diff --git a/404.html b/404.html index b3692751..a0e536d3 100644 --- a/404.html +++ b/404.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

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/CNAME b/CNAME deleted file mode 100644 index df4d6bef..00000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -opensource.tcetmumbai.in \ No newline at end of file diff --git a/assets/images/installPartition-0c20aab1c8b0076fe6fc9ba8031b7ddb.png b/assets/images/installPartitionEraseDisk-0c20aab1c8b0076fe6fc9ba8031b7ddb.png similarity index 100% rename from assets/images/installPartition-0c20aab1c8b0076fe6fc9ba8031b7ddb.png rename to assets/images/installPartitionEraseDisk-0c20aab1c8b0076fe6fc9ba8031b7ddb.png diff --git a/assets/images/installPartitionManual-2fc54d8365d4936a542982725d10b358.png b/assets/images/installPartitionManual-2fc54d8365d4936a542982725d10b358.png new file mode 100644 index 00000000..200f3821 Binary files /dev/null and b/assets/images/installPartitionManual-2fc54d8365d4936a542982725d10b358.png differ diff --git a/assets/images/mobilenav-48cc94d6c1da177352f9f5328784433a.jpg b/assets/images/mobilenav-48cc94d6c1da177352f9f5328784433a.jpg new file mode 100644 index 00000000..25258169 Binary files /dev/null and b/assets/images/mobilenav-48cc94d6c1da177352f9f5328784433a.jpg differ diff --git a/assets/images/mobilenav-6b9ae1d1097cc061965a79608d6d9d4b.jpg b/assets/images/mobilenav-6b9ae1d1097cc061965a79608d6d9d4b.jpg deleted file mode 100644 index 43985499..00000000 Binary files a/assets/images/mobilenav-6b9ae1d1097cc061965a79608d6d9d4b.jpg and /dev/null differ diff --git a/assets/images/navbar-6ef666980fdf2a104a65e9d481a6d1b0.jpg b/assets/images/navbar-6ef666980fdf2a104a65e9d481a6d1b0.jpg deleted file mode 100644 index 45759447..00000000 Binary files a/assets/images/navbar-6ef666980fdf2a104a65e9d481a6d1b0.jpg and /dev/null differ diff --git a/assets/images/navbar-88f5884e76624d322fb1612c2a8ea46e.jpg b/assets/images/navbar-88f5884e76624d322fb1612c2a8ea46e.jpg new file mode 100644 index 00000000..e803555c Binary files /dev/null and b/assets/images/navbar-88f5884e76624d322fb1612c2a8ea46e.jpg differ diff --git a/assets/images/set1-23757eac22c7cef57bf6b295af65115c.jpg b/assets/images/set1-23757eac22c7cef57bf6b295af65115c.jpg deleted file mode 100644 index 49385488..00000000 Binary files a/assets/images/set1-23757eac22c7cef57bf6b295af65115c.jpg and /dev/null differ diff --git a/assets/images/set1-96574a7a8cd86a20ca31a0182cee12f3.jpg b/assets/images/set1-96574a7a8cd86a20ca31a0182cee12f3.jpg new file mode 100644 index 00000000..757a6ab1 Binary files /dev/null and b/assets/images/set1-96574a7a8cd86a20ca31a0182cee12f3.jpg differ diff --git a/assets/images/set2-0f3674007d6a0619c58aa0b2aef94859.jpg b/assets/images/set2-0f3674007d6a0619c58aa0b2aef94859.jpg new file mode 100644 index 00000000..45b9713c Binary files /dev/null and b/assets/images/set2-0f3674007d6a0619c58aa0b2aef94859.jpg differ diff --git a/assets/images/set2-a697248626263b64e89765c883549c72.jpg b/assets/images/set2-a697248626263b64e89765c883549c72.jpg deleted file mode 100644 index 4e82c39f..00000000 Binary files a/assets/images/set2-a697248626263b64e89765c883549c72.jpg and /dev/null differ diff --git a/assets/js/2b5f54f2.86ff094d.js b/assets/js/2b5f54f2.d955ed29.js similarity index 99% rename from assets/js/2b5f54f2.86ff094d.js rename to assets/js/2b5f54f2.d955ed29.js index 597a3948..0db46587 100644 --- a/assets/js/2b5f54f2.86ff094d.js +++ b/assets/js/2b5f54f2.d955ed29.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[129],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>k});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(n),u=r,k=c["".concat(l,".").concat(u)]||c[u]||d[u]||i;return n?a.createElement(k,o(o({ref:t},m),{},{components:n})):a.createElement(k,o({ref:t},m))}));function k(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[c]="string"==typeof e?e:r,o[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>k,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var a=n(7462),r=(n(7294),n(3905));const i=n.p+"assets/images/navbar-6ef666980fdf2a104a65e9d481a6d1b0.jpg",o=n.p+"assets/images/mobilenav-6b9ae1d1097cc061965a79608d6d9d4b.jpg",s={title:"Navbar",id:"navbar",description:"Navbar Component in Tcet Linux Website",sidebar_label:"Navbar",keywords:["mobile-nav","navbar"]},l=void 0,p={unversionedId:"projects/tcet-linux-website/frontend-components/navbar",id:"projects/tcet-linux-website/frontend-components/navbar",title:"Navbar",description:"Navbar Component in Tcet Linux Website",source:"@site/docs/projects/tcet-linux-website/frontend-components/navbar.mdx",sourceDirName:"projects/tcet-linux-website/frontend-components",slug:"/projects/tcet-linux-website/frontend-components/navbar",permalink:"/docs/projects/tcet-linux-website/frontend-components/navbar",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux-website/frontend-components/navbar.mdx",tags:[],version:"current",lastUpdatedBy:"Himanshu Agarwal",lastUpdatedAt:1688047840,formattedLastUpdatedAt:"Jun 29, 2023",frontMatter:{title:"Navbar",id:"navbar",description:"Navbar Component in Tcet Linux Website",sidebar_label:"Navbar",keywords:["mobile-nav","navbar"]},sidebar:"docs",previous:{title:"Tech Stacks",permalink:"/docs/projects/tcet-linux-website/frontend-components/tech-stacks"},next:{title:"Footer",permalink:"/docs/projects/tcet-linux-website/frontend-components/footer"}},m={},c=[{value:"Logo Section",id:"logo-section",level:3},{value:"Navlinks Section",id:"navlinks-section",level:3},{value:"Hamburger Section",id:"hamburger-section",level:3},{value:"Mobile View Section",id:"mobile-view-section",level:3}],d={toc:c},u="wrapper";function k(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The ",(0,r.kt)("strong",{parentName:"p"},"Navbar")," is an informative element of the ",(0,r.kt)("a",{parentName:"p",href:"https://linux.tcetmumbai.in/"},(0,r.kt)("strong",{parentName:"a"},"TCET Linux Website")),". It is located at the top of page and contain ",(0,r.kt)("strong",{parentName:"p"},"TCET OpenSource logo")," and links to important sections such as ",(0,r.kt)("strong",{parentName:"p"},"Download"),", ",(0,r.kt)("strong",{parentName:"p"},"About us"),", ",(0,r.kt)("strong",{parentName:"p"},"Get started")," and ",(0,r.kt)("strong",{parentName:"p"},"Documention"),". A well-designed navbar is a critical component of any website, facilitating smooth and intuitive navigation for users, therefore we have created a ",(0,r.kt)("inlineCode",{parentName:"p"},"Navbar")," that enhances the user experience, adapts to different devices and ensures accessibility."),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"Here's how we implemented the navbar:")),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Opening the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/Navbar.jsx"},(0,r.kt)("strong",{parentName:"a"},'"Navbar.jsx"')),"file.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"This is a ",(0,r.kt)("em",{parentName:"p"},"React component")," called ",(0,r.kt)("inlineCode",{parentName:"p"},"Navbar")," implemented by us that represents a navigation bar elements with responsive behavior. Inside the component, we have defined an ",(0,r.kt)("strong",{parentName:"p"},"Array")," called ",(0,r.kt)("inlineCode",{parentName:"p"},"navlinks")," that contains objects representing different navigation links."),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {3,4,7,8,9,12,13,14} showLineNumbers',title:'"Navbar.jsx"',"{3,4,7,8,9,12,13,14}":!0,showLineNumbers:!0},' const navlinks = [\n {\n title: "Download",\n link: "/#download",\n },\n {\n title: "Documentation",\n link: "https://opensource.tcetmumbai.in/docs/projects/tcet-linux/about-tcet-linux",\n newtab: true\n },\n {\n title: "About Us",\n link: "https://opensource.tcetmumbai.in/docs/about-tcetopensource",\n newtab: true\n },\n ]\n // futher code\n')),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Each object has a ",(0,r.kt)("strong",{parentName:"p"},"title")," and a ",(0,r.kt)("strong",{parentName:"p"},"link")," property.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"LINE 9 and 14")," contains a newtab property, indicating whether the link should be opened in a new tab."))))),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"In the same way, we can add another ",(0,r.kt)("strong",{parentName:"p"},"title")," and ",(0,r.kt)("strong",{parentName:"p"},"link")," property to get more icon on the ",(0,r.kt)("inlineCode",{parentName:"p"},"Navbar"),". ")),(0,r.kt)("ol",{start:3},(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"p"},"Open")," is a state variable defined by us and its corresponding setter function ",(0,r.kt)("inlineCode",{parentName:"p"},"setOpen")," used to indicate whether the menu is opened or closed. ",(0,r.kt)("inlineCode",{parentName:"p"},"HandleMenu function"),", which is triggered when the menu button is clicked and logs the current value of open to the console."),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {2-3} showLineNumbers',title:'"Navbar.jsx"',"{2-3}":!0,showLineNumbers:!0}," // Array defination \n const [open, setOpen] = useState(false);\n const handleMenu = () => {\n setOpen((prev) => !prev);\n console.log(open);};\n\n"))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"The outermost element is a ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," representing the ",(0,r.kt)("strong",{parentName:"p"},"background color")," and ",(0,r.kt)("strong",{parentName:"p"},"font family"),". Inside the main ",(0,r.kt)("inlineCode",{parentName:"p"},"
"),", there are another ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," elements for responsive styling. This ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," contains the actual navigation bar elements. The navigation bar consists of three sections: logo, navlinks, and hamburger menu."),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {2-4} showLineNumbers',title:'"Navbar.jsx"',"{2-4}":!0,showLineNumbers:!0},' // state variable\n
\n
\n
\n // Logo code \n')))),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},"The array and state variable is created to run datamap function ahead, so the code length can be shortened which is easy to understand and use. Refer the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/Navbar.jsx"},(0,r.kt)("strong",{parentName:"a"},"Navbar.jsx"))," file.")),(0,r.kt)("h3",{id:"logo-section"},"Logo Section"),(0,r.kt)("p",null,"This section contains the logo of ",(0,r.kt)("strong",{parentName:"p"},"TCET OpenSource Organisation")," in the navbar. "),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We have created a ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," element. ")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"we Imported the logo by using ",(0,r.kt)("strong",{parentName:"p"},"href tag")," from the root folder where image is stored. "),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {} showLineNumbers',title:'"Navbar.jsx"',"{}":!0,showLineNumbers:!0},' // state variable\n
\n
\n
\n
\n \n TCET Open Source Logo\n \n
\n // Other section code \n')))),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"The logo can be updated by changing ",(0,r.kt)("strong",{parentName:"p"},"href")," pathlink or the image in that path. ")),(0,r.kt)("h3",{id:"navlinks-section"},"Navlinks Section"),(0,r.kt)("p",null,"This section consists of Navlinks of the Navbar of TCET Linux website."),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We have used ",(0,r.kt)("strong",{parentName:"p"},"Data map")," function which is a Advanced Data Structure linked to the ",(0,r.kt)("strong",{parentName:"p"},"Navlinks array")," created above.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"The ",(0,r.kt)("strong",{parentName:"p"},"Mapping")," function iterates over the navlinks array and creates an a ",(0,r.kt)("inlineCode",{parentName:"p"},"tag")," for each link."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"The link's href attribute is set to the corresponding link property of the navlinks object.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"If the newtab property is true, which opens the link in a new tab.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Each link has additional styling classes for hover effects and rounded corners. ")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Line ",(0,r.kt)("strong",{parentName:"p"},"2-15")," shows the above data map code .")))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We created a ",(0,r.kt)("strong",{parentName:"p"},"Get Started")," icon using ",(0,r.kt)("inlineCode",{parentName:"p"},"\n
\n
\n
\n')))),(0,r.kt)("h3",{id:"hamburger-section"},"Hamburger Section"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Hamburger menu")," section is hidden on larger screens.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"It contains a ",(0,r.kt)("inlineCode",{parentName:"p"},"\n
\n
\n
\n')))),(0,r.kt)("h3",{id:"mobile-view-section"},"Mobile View Section"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"This code is written by our team to make the ",(0,r.kt)("strong",{parentName:"p"},"Navbar")," adjustable according to the ",(0,r.kt)("inlineCode",{parentName:"p"},"Mobile view")," of the user. ")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Following the ",(0,r.kt)("inlineCode",{parentName:"p"},"navigation bar"),", there is a ",(0,r.kt)("em",{parentName:"p"},"conditional rendering statement"),". "),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"If open is true, a mobile version of the navigation menu is displayed."))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We created a ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," with specific styling for ",(0,r.kt)("em",{parentName:"p"},"mobile screens"),". "),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Inside this ",(0,r.kt)("inlineCode",{parentName:"li"},"
"),", there is a ",(0,r.kt)("strong",{parentName:"li"},"Mapping")," function similar to the one in the `navlinks section``, but the styling is adjusted for mobile.")),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {4-14} showLineNumbers',title:'"Navbar.jsx"',"{4-14}":!0,showLineNumbers:!0},' {open ? (\n
\n
\n {navlinks.map((link, index) => (\n \n {link.title}\n \n ))}\n Get Started\n \n
\n
\n ) : null}\n')))),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"To see how we added Logo, Navlinks and Hamburger on the Navbar, refer ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/Navbar.jsx"},(0,r.kt)("strong",{parentName:"a"},"Navbar.jsx"))," file from the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website"},(0,r.kt)("strong",{parentName:"a"},"TCET Linux Website"))," repository. ")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"After adding all components, the Navbar Desktop View can be scene like this :")),(0,r.kt)("figure",null,(0,r.kt)("img",{src:i,style:{border:"2px solid gray"}}),(0,r.kt)("center",null,(0,r.kt)("b",null,(0,r.kt)("figcaption",null,"Navbar Section")))),(0,r.kt)("figure",null,(0,r.kt)("center",null,(0,r.kt)("img",{src:o,style:{border:"2px solid gray",width:"400px"}})),(0,r.kt)("center",null,(0,r.kt)("b",null,(0,r.kt)("figcaption",null,"Mobile Navbar Section")))),(0,r.kt)("br",null),(0,r.kt)("p",null,"With this, the ",(0,r.kt)("a",{parentName:"p",href:"navbar"},(0,r.kt)("strong",{parentName:"a"},"Navbar Section"))," was succesfully executed! Let's move on and see how we created the ",(0,r.kt)("a",{parentName:"p",href:"footer"},(0,r.kt)("strong",{parentName:"a"},"Footer Section"))," of the TCET Linux Website."))}k.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[129],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>k});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(n),u=r,k=c["".concat(l,".").concat(u)]||c[u]||d[u]||i;return n?a.createElement(k,o(o({ref:t},m),{},{components:n})):a.createElement(k,o({ref:t},m))}));function k(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[c]="string"==typeof e?e:r,o[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>k,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var a=n(7462),r=(n(7294),n(3905));const i=n.p+"assets/images/navbar-88f5884e76624d322fb1612c2a8ea46e.jpg",o=n.p+"assets/images/mobilenav-48cc94d6c1da177352f9f5328784433a.jpg",s={title:"Navbar",id:"navbar",description:"Navbar Component in Tcet Linux Website",sidebar_label:"Navbar",keywords:["mobile-nav","navbar"]},l=void 0,p={unversionedId:"projects/tcet-linux-website/frontend-components/navbar",id:"projects/tcet-linux-website/frontend-components/navbar",title:"Navbar",description:"Navbar Component in Tcet Linux Website",source:"@site/docs/projects/tcet-linux-website/frontend-components/navbar.mdx",sourceDirName:"projects/tcet-linux-website/frontend-components",slug:"/projects/tcet-linux-website/frontend-components/navbar",permalink:"/docs/projects/tcet-linux-website/frontend-components/navbar",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux-website/frontend-components/navbar.mdx",tags:[],version:"current",lastUpdatedBy:"Himanshu Agarwal",lastUpdatedAt:1688047840,formattedLastUpdatedAt:"Jun 29, 2023",frontMatter:{title:"Navbar",id:"navbar",description:"Navbar Component in Tcet Linux Website",sidebar_label:"Navbar",keywords:["mobile-nav","navbar"]},sidebar:"docs",previous:{title:"Tech Stacks",permalink:"/docs/projects/tcet-linux-website/frontend-components/tech-stacks"},next:{title:"Footer",permalink:"/docs/projects/tcet-linux-website/frontend-components/footer"}},m={},c=[{value:"Logo Section",id:"logo-section",level:3},{value:"Navlinks Section",id:"navlinks-section",level:3},{value:"Hamburger Section",id:"hamburger-section",level:3},{value:"Mobile View Section",id:"mobile-view-section",level:3}],d={toc:c},u="wrapper";function k(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The ",(0,r.kt)("strong",{parentName:"p"},"Navbar")," is an informative element of the ",(0,r.kt)("a",{parentName:"p",href:"https://linux.tcetmumbai.in/"},(0,r.kt)("strong",{parentName:"a"},"TCET Linux Website")),". It is located at the top of page and contain ",(0,r.kt)("strong",{parentName:"p"},"TCET OpenSource logo")," and links to important sections such as ",(0,r.kt)("strong",{parentName:"p"},"Download"),", ",(0,r.kt)("strong",{parentName:"p"},"About us"),", ",(0,r.kt)("strong",{parentName:"p"},"Get started")," and ",(0,r.kt)("strong",{parentName:"p"},"Documention"),". A well-designed navbar is a critical component of any website, facilitating smooth and intuitive navigation for users, therefore we have created a ",(0,r.kt)("inlineCode",{parentName:"p"},"Navbar")," that enhances the user experience, adapts to different devices and ensures accessibility."),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"Here's how we implemented the navbar:")),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Opening the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/Navbar.jsx"},(0,r.kt)("strong",{parentName:"a"},'"Navbar.jsx"')),"file.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"This is a ",(0,r.kt)("em",{parentName:"p"},"React component")," called ",(0,r.kt)("inlineCode",{parentName:"p"},"Navbar")," implemented by us that represents a navigation bar elements with responsive behavior. Inside the component, we have defined an ",(0,r.kt)("strong",{parentName:"p"},"Array")," called ",(0,r.kt)("inlineCode",{parentName:"p"},"navlinks")," that contains objects representing different navigation links."),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {3,4,7,8,9,12,13,14} showLineNumbers',title:'"Navbar.jsx"',"{3,4,7,8,9,12,13,14}":!0,showLineNumbers:!0},' const navlinks = [\n {\n title: "Download",\n link: "/#download",\n },\n {\n title: "Documentation",\n link: "https://opensource.tcetmumbai.in/docs/projects/tcet-linux/about-tcet-linux",\n newtab: true\n },\n {\n title: "About Us",\n link: "https://opensource.tcetmumbai.in/docs/about-tcetopensource",\n newtab: true\n },\n ]\n // futher code\n')),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Each object has a ",(0,r.kt)("strong",{parentName:"p"},"title")," and a ",(0,r.kt)("strong",{parentName:"p"},"link")," property.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"LINE 9 and 14")," contains a newtab property, indicating whether the link should be opened in a new tab."))))),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"In the same way, we can add another ",(0,r.kt)("strong",{parentName:"p"},"title")," and ",(0,r.kt)("strong",{parentName:"p"},"link")," property to get more icon on the ",(0,r.kt)("inlineCode",{parentName:"p"},"Navbar"),". ")),(0,r.kt)("ol",{start:3},(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"p"},"Open")," is a state variable defined by us and its corresponding setter function ",(0,r.kt)("inlineCode",{parentName:"p"},"setOpen")," used to indicate whether the menu is opened or closed. ",(0,r.kt)("inlineCode",{parentName:"p"},"HandleMenu function"),", which is triggered when the menu button is clicked and logs the current value of open to the console."),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {2-3} showLineNumbers',title:'"Navbar.jsx"',"{2-3}":!0,showLineNumbers:!0}," // Array defination \n const [open, setOpen] = useState(false);\n const handleMenu = () => {\n setOpen((prev) => !prev);\n console.log(open);};\n\n"))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"The outermost element is a ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," representing the ",(0,r.kt)("strong",{parentName:"p"},"background color")," and ",(0,r.kt)("strong",{parentName:"p"},"font family"),". Inside the main ",(0,r.kt)("inlineCode",{parentName:"p"},"
"),", there are another ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," elements for responsive styling. This ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," contains the actual navigation bar elements. The navigation bar consists of three sections: logo, navlinks, and hamburger menu."),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {2-4} showLineNumbers',title:'"Navbar.jsx"',"{2-4}":!0,showLineNumbers:!0},' // state variable\n
\n
\n
\n // Logo code \n')))),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},"The array and state variable is created to run datamap function ahead, so the code length can be shortened which is easy to understand and use. Refer the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/Navbar.jsx"},(0,r.kt)("strong",{parentName:"a"},"Navbar.jsx"))," file.")),(0,r.kt)("h3",{id:"logo-section"},"Logo Section"),(0,r.kt)("p",null,"This section contains the logo of ",(0,r.kt)("strong",{parentName:"p"},"TCET OpenSource Organisation")," in the navbar. "),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We have created a ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," element. ")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"we Imported the logo by using ",(0,r.kt)("strong",{parentName:"p"},"href tag")," from the root folder where image is stored. "),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {} showLineNumbers',title:'"Navbar.jsx"',"{}":!0,showLineNumbers:!0},' // state variable\n
\n
\n
\n
\n \n TCET Open Source Logo\n \n
\n // Other section code \n')))),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"The logo can be updated by changing ",(0,r.kt)("strong",{parentName:"p"},"href")," pathlink or the image in that path. ")),(0,r.kt)("h3",{id:"navlinks-section"},"Navlinks Section"),(0,r.kt)("p",null,"This section consists of Navlinks of the Navbar of TCET Linux website."),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We have used ",(0,r.kt)("strong",{parentName:"p"},"Data map")," function which is a Advanced Data Structure linked to the ",(0,r.kt)("strong",{parentName:"p"},"Navlinks array")," created above.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"The ",(0,r.kt)("strong",{parentName:"p"},"Mapping")," function iterates over the navlinks array and creates an a ",(0,r.kt)("inlineCode",{parentName:"p"},"tag")," for each link."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"The link's href attribute is set to the corresponding link property of the navlinks object.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"If the newtab property is true, which opens the link in a new tab.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Each link has additional styling classes for hover effects and rounded corners. ")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Line ",(0,r.kt)("strong",{parentName:"p"},"2-15")," shows the above data map code .")))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We created a ",(0,r.kt)("strong",{parentName:"p"},"Get Started")," icon using ",(0,r.kt)("inlineCode",{parentName:"p"},"\n
\n
\n
\n')))),(0,r.kt)("h3",{id:"hamburger-section"},"Hamburger Section"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Hamburger menu")," section is hidden on larger screens.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"It contains a ",(0,r.kt)("inlineCode",{parentName:"p"},"\n
\n
\n
\n')))),(0,r.kt)("h3",{id:"mobile-view-section"},"Mobile View Section"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"This code is written by our team to make the ",(0,r.kt)("strong",{parentName:"p"},"Navbar")," adjustable according to the ",(0,r.kt)("inlineCode",{parentName:"p"},"Mobile view")," of the user. ")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Following the ",(0,r.kt)("inlineCode",{parentName:"p"},"navigation bar"),", there is a ",(0,r.kt)("em",{parentName:"p"},"conditional rendering statement"),". "),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"If open is true, a mobile version of the navigation menu is displayed."))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"We created a ",(0,r.kt)("inlineCode",{parentName:"p"},"
")," with specific styling for ",(0,r.kt)("em",{parentName:"p"},"mobile screens"),". "),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Inside this ",(0,r.kt)("inlineCode",{parentName:"li"},"
"),", there is a ",(0,r.kt)("strong",{parentName:"li"},"Mapping")," function similar to the one in the `navlinks section``, but the styling is adjusted for mobile.")),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="Navbar.jsx" {4-14} showLineNumbers',title:'"Navbar.jsx"',"{4-14}":!0,showLineNumbers:!0},' {open ? (\n
\n
\n {navlinks.map((link, index) => (\n \n {link.title}\n \n ))}\n Get Started\n \n
\n
\n ) : null}\n')))),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"To see how we added Logo, Navlinks and Hamburger on the Navbar, refer ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/Navbar.jsx"},(0,r.kt)("strong",{parentName:"a"},"Navbar.jsx"))," file from the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website"},(0,r.kt)("strong",{parentName:"a"},"TCET Linux Website"))," repository. ")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"After adding all components, the Navbar Desktop View can be scene like this :")),(0,r.kt)("figure",null,(0,r.kt)("img",{src:i,style:{border:"2px solid gray"}}),(0,r.kt)("center",null,(0,r.kt)("b",null,(0,r.kt)("figcaption",null,"Navbar Section")))),(0,r.kt)("figure",null,(0,r.kt)("center",null,(0,r.kt)("img",{src:o,style:{border:"2px solid gray",width:"400px"}})),(0,r.kt)("center",null,(0,r.kt)("b",null,(0,r.kt)("figcaption",null,"Mobile Navbar Section")))),(0,r.kt)("br",null),(0,r.kt)("p",null,"With this, the ",(0,r.kt)("a",{parentName:"p",href:"navbar"},(0,r.kt)("strong",{parentName:"a"},"Navbar Section"))," was succesfully executed! Let's move on and see how we created the ",(0,r.kt)("a",{parentName:"p",href:"footer"},(0,r.kt)("strong",{parentName:"a"},"Footer Section"))," of the TCET Linux Website."))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4f691a94.cec18f26.js b/assets/js/4f691a94.8962e4f7.js similarity index 98% rename from assets/js/4f691a94.cec18f26.js rename to assets/js/4f691a94.8962e4f7.js index 8ac3c789..9d6e74cf 100644 --- a/assets/js/4f691a94.cec18f26.js +++ b/assets/js/4f691a94.8962e4f7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2026],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});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 s=r.createContext({}),u=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=u(e.components);return r.createElement(s.Provider,{value:t},e.children)},c="mdxType",m={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,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),c=u(n),d=i,f=c["".concat(s,".").concat(d)]||c[d]||m[d]||a;return n?r.createElement(f,o(o({ref:t},p),{},{components:n})):r.createElement(f,o({ref:t},p))}));function f(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 l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:i,o[1]=l;for(var u=2;u{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>u});var r=n(7462),i=(n(7294),n(3905));const a={title:"Requirements, Download & Verify",id:"requirements-download-verify",sidebar_label:"Requirements, Download & Verify",description:"A brief overview of Requirements Download Verify",keywords:["Open Source","TCET Linux","Requirements","Download","Verify","Checksum","SHA256SUM"]},o=void 0,l={unversionedId:"projects/tcet-linux/installation/requirements-download-verify",id:"projects/tcet-linux/installation/requirements-download-verify",title:"Requirements, Download & Verify",description:"A brief overview of Requirements Download Verify",source:"@site/docs/projects/tcet-linux/installation/requirements-download-verify.md",sourceDirName:"projects/tcet-linux/installation",slug:"/projects/tcet-linux/installation/requirements-download-verify",permalink:"/docs/projects/tcet-linux/installation/requirements-download-verify",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux/installation/requirements-download-verify.md",tags:[],version:"current",lastUpdatedBy:"Meet Jain",lastUpdatedAt:1704472988,formattedLastUpdatedAt:"Jan 5, 2024",frontMatter:{title:"Requirements, Download & Verify",id:"requirements-download-verify",sidebar_label:"Requirements, Download & Verify",description:"A brief overview of Requirements Download Verify",keywords:["Open Source","TCET Linux","Requirements","Download","Verify","Checksum","SHA256SUM"]},sidebar:"docs",previous:{title:"Releases",permalink:"/docs/projects/tcet-linux/releases"},next:{title:"Creating Bootable USB",permalink:"/docs/projects/tcet-linux/installation/creating-bootable-USB"}},s={},u=[{value:"System Requirements",id:"system-requirements",level:2},{value:"Downloading TCET Linux",id:"downloading-tcet-linux",level:2},{value:"Verify",id:"verify",level:2},{value:"Step 1: Verify the Integrity of the TCET Linux ISO",id:"step-1-verify-the-integrity-of-the-tcet-linux-iso",level:3},{value:"Step 2: Compare the Hash Value",id:"step-2-compare-the-hash-value",level:3}],p={toc:u},c="wrapper";function m(e){let{components:t,...n}=e;return(0,i.kt)(c,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"system-requirements"},"System Requirements"),(0,i.kt)("p",null,"Before you begin your journey with TCET Linux, it's essential to ensure that your system meets the minimum requirements:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"64-bit processor"),(0,i.kt)("li",{parentName:"ul"},"At least 2GB of RAM"),(0,i.kt)("li",{parentName:"ul"},"15GB of free disk space"),(0,i.kt)("li",{parentName:"ul"},"An internet connection for updates and software installation")),(0,i.kt)("p",null,"These requirements ensure that TCET Linux runs smoothly on your computer, whether it's a modern system or a resource-constrained machine."),(0,i.kt)("h2",{id:"downloading-tcet-linux"},"Downloading TCET Linux"),(0,i.kt)("p",null,"To get started with TCET Linux, you can download the latest ISO file from the TCET Linux website. We recommend the following steps for downloading and creating a bootable USB drive:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Visit the TCET Linux website at ",(0,i.kt)("strong",{parentName:"li"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux Website")),"."),(0,i.kt)("li",{parentName:"ol"},"Locate the download section and select the latest TCET Linux ISO file."),(0,i.kt)("li",{parentName:"ol"},"Download the ISO file to your computer.")),(0,i.kt)("h2",{id:"verify"},"Verify"),(0,i.kt)("h3",{id:"step-1-verify-the-integrity-of-the-tcet-linux-iso"},"Step 1: Verify the Integrity of the TCET Linux ISO"),(0,i.kt)("p",null,"Before proceeding with the installation, it's crucial to verify the integrity of the downloaded TCET Linux ISO file."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The verification is performed to guarantee the integrity of the downloaded file and to prevent potential corruption during the download process."),(0,i.kt)("li",{parentName:"ul"},"TCET Linux provides a unique checksum for each OS release, enhancing security and ensuring that users have an authentic and unaltered file.")),(0,i.kt)("p",null,"Follow these steps based on your operating system:"),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Windows:")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Open the Windows Terminal (PowerShell) in the directory where the ISO file is located.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Type the following command and press Enter:"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-powershell"},"certutil -hashfile iso-name.iso sha256\n")))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"MacOS:")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Open the Terminal in the directory where the ISO file is located.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Type the following command and press Enter:"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"shasum -a 256 iso-name.iso\n")))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Linux:")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Open the Terminal in the directory where the ISO file is located.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Type the following command and press Enter:"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"sha256sum iso-name.iso\n")))),(0,i.kt)("h3",{id:"step-2-compare-the-hash-value"},"Step 2: Compare the Hash Value"),(0,i.kt)("p",null,"After running the verification command, compare the returned hash value with the provided SHA256SUM below. Ensure that they match to confirm the authenticity of your download."),(0,i.kt)("p",null,"The Updated SHA256SUM for TCET Linux ISO is provided on the ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/#verify"},"TCET Linux Website Verify Section"))," of the ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux Website")),"."),(0,i.kt)("p",null,"By following these steps and confirming the match of the hash values, you can proceed with confidence, knowing that your TCET Linux installation file is genuine and secure. If the hash values do not match, consider re-downloading the ISO file to avoid potential issues during installation."),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("ol",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ol"},"You can visit on some learning resources listed on ",(0,i.kt)("strong",{parentName:"li"},(0,i.kt)("a",{parentName:"strong",href:"/docs/projects/tcet-linux/resources"},"Resource Page"))," of TCET Linux documentation."))),(0,i.kt)("br",null),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"The ",(0,i.kt)("a",{parentName:"em",href:"requirements-download-verify"},(0,i.kt)("strong",{parentName:"a"},"Requirements Download & Verify"))," was succesfully executed! Let's move on and see how we can ",(0,i.kt)("a",{parentName:"em",href:"creating-bootable-USB"},(0,i.kt)("strong",{parentName:"a"},"Create a Bootable Pendrive & Partitioning of Drive"))," of ",(0,i.kt)("strong",{parentName:"em"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux")),".")))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2026],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});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 s=r.createContext({}),u=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=u(e.components);return r.createElement(s.Provider,{value:t},e.children)},c="mdxType",m={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,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),c=u(n),d=i,f=c["".concat(s,".").concat(d)]||c[d]||m[d]||a;return n?r.createElement(f,o(o({ref:t},p),{},{components:n})):r.createElement(f,o({ref:t},p))}));function f(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 l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:i,o[1]=l;for(var u=2;u{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>u});var r=n(7462),i=(n(7294),n(3905));const a={title:"Requirements, Download & Verify",id:"requirements-download-verify",sidebar_label:"Requirements, Download & Verify",description:"A brief overview of Requirements Download Verify",keywords:["Open Source","TCET Linux","Requirements","Download","Verify","Checksum","SHA256SUM"]},o=void 0,l={unversionedId:"projects/tcet-linux/installation/requirements-download-verify",id:"projects/tcet-linux/installation/requirements-download-verify",title:"Requirements, Download & Verify",description:"A brief overview of Requirements Download Verify",source:"@site/docs/projects/tcet-linux/installation/requirements-download-verify.md",sourceDirName:"projects/tcet-linux/installation",slug:"/projects/tcet-linux/installation/requirements-download-verify",permalink:"/docs/projects/tcet-linux/installation/requirements-download-verify",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux/installation/requirements-download-verify.md",tags:[],version:"current",lastUpdatedBy:"Akash6222",lastUpdatedAt:1704793812,formattedLastUpdatedAt:"Jan 9, 2024",frontMatter:{title:"Requirements, Download & Verify",id:"requirements-download-verify",sidebar_label:"Requirements, Download & Verify",description:"A brief overview of Requirements Download Verify",keywords:["Open Source","TCET Linux","Requirements","Download","Verify","Checksum","SHA256SUM"]},sidebar:"docs",previous:{title:"Releases",permalink:"/docs/projects/tcet-linux/releases"},next:{title:"Creating Bootable USB",permalink:"/docs/projects/tcet-linux/installation/creating-bootable-USB"}},s={},u=[{value:"System Requirements",id:"system-requirements",level:2},{value:"Downloading TCET Linux",id:"downloading-tcet-linux",level:2},{value:"Verify",id:"verify",level:2},{value:"Step 1: Verify the Integrity of the TCET Linux ISO",id:"step-1-verify-the-integrity-of-the-tcet-linux-iso",level:3},{value:"Step 2: Compare the Hash Value",id:"step-2-compare-the-hash-value",level:3}],p={toc:u},c="wrapper";function m(e){let{components:t,...n}=e;return(0,i.kt)(c,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"system-requirements"},"System Requirements"),(0,i.kt)("p",null,"Before you begin your journey with TCET Linux, it's essential to ensure that your system meets the minimum requirements:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"64-bit processor"),(0,i.kt)("li",{parentName:"ul"},"At least 2GB of RAM"),(0,i.kt)("li",{parentName:"ul"},"20GB of free disk space"),(0,i.kt)("li",{parentName:"ul"},"An internet connection for updates and software installation")),(0,i.kt)("p",null,"These requirements ensure that TCET Linux runs smoothly on your computer, whether it's a modern system or a resource-constrained machine."),(0,i.kt)("h2",{id:"downloading-tcet-linux"},"Downloading TCET Linux"),(0,i.kt)("p",null,"To get started with TCET Linux, you can download the latest ISO file from the TCET Linux website. We recommend the following steps for downloading and creating a bootable USB drive:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Visit the TCET Linux website at ",(0,i.kt)("strong",{parentName:"li"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux Website")),"."),(0,i.kt)("li",{parentName:"ol"},"Locate the download section and select the latest TCET Linux ISO file."),(0,i.kt)("li",{parentName:"ol"},"Download the ISO file to your computer.")),(0,i.kt)("h2",{id:"verify"},"Verify"),(0,i.kt)("h3",{id:"step-1-verify-the-integrity-of-the-tcet-linux-iso"},"Step 1: Verify the Integrity of the TCET Linux ISO"),(0,i.kt)("p",null,"Before proceeding with the installation, it's crucial to verify the integrity of the downloaded TCET Linux ISO file."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The verification is performed to guarantee the integrity of the downloaded file and to prevent potential corruption during the download process."),(0,i.kt)("li",{parentName:"ul"},"TCET Linux provides a unique checksum for each OS release, enhancing security and ensuring that users have an authentic and unaltered file.")),(0,i.kt)("p",null,"Follow these steps based on your operating system:"),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Windows:")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Open the Windows Terminal (PowerShell) in the directory where the ISO file is located.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Type the following command and press Enter:"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-powershell"},"certutil -hashfile iso-name.iso sha256\n")))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"MacOS:")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Open the Terminal in the directory where the ISO file is located.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Type the following command and press Enter:"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"shasum -a 256 iso-name.iso\n")))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Linux:")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Open the Terminal in the directory where the ISO file is located.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Type the following command and press Enter:"),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"sha256sum iso-name.iso\n")))),(0,i.kt)("h3",{id:"step-2-compare-the-hash-value"},"Step 2: Compare the Hash Value"),(0,i.kt)("p",null,"After running the verification command, compare the returned hash value with the provided SHA256SUM below. Ensure that they match to confirm the authenticity of your download."),(0,i.kt)("p",null,"The Updated SHA256SUM for TCET Linux ISO is provided on the ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/#verify"},"TCET Linux Website Verify Section"))," of the ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux Website")),"."),(0,i.kt)("p",null,"By following these steps and confirming the match of the hash values, you can proceed with confidence, knowing that your TCET Linux installation file is genuine and secure. If the hash values do not match, consider re-downloading the ISO file to avoid potential issues during installation."),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("ol",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ol"},"You can visit on some learning resources listed on ",(0,i.kt)("strong",{parentName:"li"},(0,i.kt)("a",{parentName:"strong",href:"/docs/projects/tcet-linux/resources"},"Resource Page"))," of TCET Linux documentation."))),(0,i.kt)("br",null),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"The ",(0,i.kt)("a",{parentName:"em",href:"requirements-download-verify"},(0,i.kt)("strong",{parentName:"a"},"Requirements Download & Verify"))," was succesfully executed! Let's move on and see how we can ",(0,i.kt)("a",{parentName:"em",href:"creating-bootable-USB"},(0,i.kt)("strong",{parentName:"a"},"Create a Bootable Pendrive & Partitioning of Drive"))," of ",(0,i.kt)("strong",{parentName:"em"},(0,i.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux")),".")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/64149844.47c0e1e8.js b/assets/js/64149844.47c0e1e8.js new file mode 100644 index 00000000..9e0db327 --- /dev/null +++ b/assets/js/64149844.47c0e1e8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1279],{3905:(t,e,n)=>{n.d(e,{Zo:()=>u,kt:()=>k});var a=n(7294);function l(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function i(t){for(var e=1;e=0||(l[n]=t[n]);return l}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(l[n]=t[n])}return l}var s=a.createContext({}),p=function(t){var e=a.useContext(s),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},u=function(t){var e=p(t.components);return a.createElement(s.Provider,{value:e},t.children)},c="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},d=a.forwardRef((function(t,e){var n=t.components,l=t.mdxType,r=t.originalType,s=t.parentName,u=o(t,["components","mdxType","originalType","parentName"]),c=p(n),d=l,k=c["".concat(s,".").concat(d)]||c[d]||m[d]||r;return n?a.createElement(k,i(i({ref:e},u),{},{components:n})):a.createElement(k,i({ref:e},u))}));function k(t,e){var n=arguments,l=e&&e.mdxType;if("string"==typeof t||l){var r=n.length,i=new Array(r);i[0]=d;var o={};for(var s in e)hasOwnProperty.call(e,s)&&(o[s]=e[s]);o.originalType=t,o[c]="string"==typeof t?t:l,i[1]=o;for(var p=2;p{n.r(e),n.d(e,{assets:()=>h,contentTitle:()=>g,default:()=>v,frontMatter:()=>k,metadata:()=>y,toc:()=>b});var a=n(7462),l=(n(7294),n(3905));const r=n.p+"assets/images/installWelcome-8a576492dc6113a2f6382cd615282fd3.png",i=n.p+"assets/images/installLocation-9b0f9d8de8152c77153a6f79fb07295c.png",o=n.p+"assets/images/installKeyboard-c31eb6b5d32b01d7daa6913fa210299b.png",s=n.p+"assets/images/installPartitionEraseDisk-0c20aab1c8b0076fe6fc9ba8031b7ddb.png",p=n.p+"assets/images/installPartitionManual-2fc54d8365d4936a542982725d10b358.png",u=n.p+"assets/images/installUser-d10136655b59b004836f382630e2ee8c.png",c=n.p+"assets/images/installSummary-3c70dc24ee772af0a5c0cd41462de0a8.png",m=n.p+"assets/images/installInstall-52944124c1b88f1e9701ba9ccb4279bf.png",d=n.p+"assets/images/installFinish-5c3729f0aebd6f97780c8f8d6bc9ae44.png",k={title:"Installation Steps",id:"installation-steps",description:"Installation Steps of TCET Linux.",sidebar_label:"Installation Steps",keywords:["Installation Steps","Calamares Installer"]},g=void 0,y={unversionedId:"projects/tcet-linux/installation/installation-steps",id:"projects/tcet-linux/installation/installation-steps",title:"Installation Steps",description:"Installation Steps of TCET Linux.",source:"@site/docs/projects/tcet-linux/installation/installation-steps.md",sourceDirName:"projects/tcet-linux/installation",slug:"/projects/tcet-linux/installation/installation-steps",permalink:"/docs/projects/tcet-linux/installation/installation-steps",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux/installation/installation-steps.md",tags:[],version:"current",lastUpdatedBy:"Meet Jain",lastUpdatedAt:1704798203,formattedLastUpdatedAt:"Jan 9, 2024",frontMatter:{title:"Installation Steps",id:"installation-steps",description:"Installation Steps of TCET Linux.",sidebar_label:"Installation Steps",keywords:["Installation Steps","Calamares Installer"]},sidebar:"docs",previous:{title:"Installation in VM",permalink:"/docs/projects/tcet-linux/installation/installation-in-vm"},next:{title:"Troubleshoot Installation",permalink:"/docs/projects/tcet-linux/installation/troubleshoot-installation"}},h={},b=[{value:"Welcome Screen",id:"welcome-screen",level:2},{value:"Set Your Location",id:"set-your-location",level:2},{value:"Choose Keyboard Layout",id:"choose-keyboard-layout",level:2},{value:"Storage Partitioning",id:"storage-partitioning",level:2},{value:"User Details",id:"user-details",level:2},{value:"Summary",id:"summary",level:2},{value:"Installation Process",id:"installation-process",level:2},{value:"Installation Complete",id:"installation-complete",level:2}],f={toc:b},N="wrapper";function v(t){let{components:e,...n}=t;return(0,l.kt)(N,(0,a.Z)({},f,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"welcome-screen"},(0,l.kt)("strong",{parentName:"h2"},"Welcome Screen")),(0,l.kt)("p",null," Launch the installer by searching for 'Install TCET Linux.' The installer will greet you with a user-friendly interface."),(0,l.kt)("center",null,(0,l.kt)("img",{src:r,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Welcome Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"set-your-location"},(0,l.kt)("strong",{parentName:"h2"},"Set Your Location")),(0,l.kt)("p",null," Select your location by clicking on the timezones on the map. If you have an internet connection, this should happen automatically."),(0,l.kt)("center",null,(0,l.kt)("img",{src:i,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Location Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"choose-keyboard-layout"},(0,l.kt)("strong",{parentName:"h2"},"Choose Keyboard Layout")),(0,l.kt)("p",null," Keyboard layout is automatically mapped by location. Verify the layout in the text box or make adjustments as needed."),(0,l.kt)("center",null,(0,l.kt)("img",{src:o,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Keyboard Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"storage-partitioning"},(0,l.kt)("strong",{parentName:"h2"},"Storage Partitioning")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Erase Disk (Recommended):")),(0,l.kt)("p",{parentName:"li"},"The installer defaults to an automatic setup, creating partitions depending on the available storage. The home and root partitions will be on the same partition, and swap may or may not be created. This option is highly recommended for beginners."))),(0,l.kt)("br",null),(0,l.kt)("center",null,(0,l.kt)("img",{src:s,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Partition Page"))),(0,l.kt)("br",null),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Manual Partitioning (Advanced):"),"\nFor advanced users who want complete control over their disk partitions.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Select Disk:"),"\nChoose the disk where TCET Linux will be installed. This could be your SSD or HDD.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Existing Partitions:"),"\nIf there are existing partitions, you'll see them listed. Decide whether to modify, delete, or keep them.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Create Partitions:")),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"EFI System Partition (ESP):")),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: Typically around 800MB."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: FAT32."),(0,l.kt)("li",{parentName:"ul"},"Mount Point: /boot/efi.\n"))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Root Partition (/):")),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: Allocate a sufficient amount, at least 12GB."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: ext4."),(0,l.kt)("li",{parentName:"ul"},"Mount Point: /."))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Home Partition (optional):")),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: As per your storage needs."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: ext4."),(0,l.kt)("li",{parentName:"ul"},"Mount Point: /home.\n"))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Swap Partition (optional):")),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: Recommended to be equal to or double your RAM."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: Swap.\n")))))),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Filesystem and Mount Points:"),"\nAssign a filesystem (e.g., ext4) and mount points for each partition correctly.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Finalize and Apply:"),"\nConfirm your choices and apply the changes. Double-check to avoid data loss. "))),(0,l.kt)("admonition",{type:"warning"},(0,l.kt)("p",{parentName:"admonition"},(0,l.kt)("strong",{parentName:"p"},"Important Note for Multiple OS Installation:")),(0,l.kt)("ul",{parentName:"admonition"},(0,l.kt)("li",{parentName:"ul"},"If you intend to have multiple operating systems on your disk, such as dual-booting with another OS, it is recommended to choose manual partitioning."),(0,l.kt)("li",{parentName:"ul"},"Use ",(0,l.kt)("strong",{parentName:"li"},'"Erase Full Disk & Install" only if')," you are installing ",(0,l.kt)("strong",{parentName:"li"},"TCET Linux as a Virtual Machine")," OR ",(0,l.kt)("strong",{parentName:"li"},"You Want TCET Linux to be the sole operating system")," on your machine. This option will erase the entire disk, including other operating systems and data."))),(0,l.kt)("br",null),(0,l.kt)("center",null,(0,l.kt)("img",{src:p,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Partition Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"user-details"},(0,l.kt)("strong",{parentName:"h2"},"User Details")),(0,l.kt)("p",null," Enter your desired username for the login screen. Set the administrator account password (root user). Opt for different passwords for enhanced security or keep them the same for convenience."),(0,l.kt)("center",null,(0,l.kt)("img",{src:u,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"User Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"summary"},(0,l.kt)("strong",{parentName:"h2"},"Summary")),(0,l.kt)("p",null," Review a detailed summary of your choices. Confirm that the partitioning details match your preferences before proceeding."),(0,l.kt)("center",null,(0,l.kt)("img",{src:c,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Summary Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"installation-process"},(0,l.kt)("strong",{parentName:"h2"},"Installation Process")),(0,l.kt)("p",null," The installation will take approximately 5-10 minutes, depending on your SSD/HDD speed. The progress bar will keep you informed. Sit back, relax, and maybe grab a cup of coffee!"),(0,l.kt)("center",null,(0,l.kt)("img",{src:m,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Installation Process Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"installation-complete"},(0,l.kt)("strong",{parentName:"h2"},"Installation Complete")),(0,l.kt)("p",null," Once done, you'll receive a notification. Restart your system to boot into your freshly installed TCET Linux. Welcome to a new and exciting computing experience!"),(0,l.kt)("center",null,(0,l.kt)("img",{src:d,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Finish Page"))),(0,l.kt)("br",null),(0,l.kt)("admonition",{type:"tip"},(0,l.kt)("ol",{parentName:"admonition"},(0,l.kt)("li",{parentName:"ol"},"You can visit on some learning resources listed on ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"/docs/projects/tcet-linux/resources"},"Resource Page"))," of TCET Linux documentation."),(0,l.kt)("li",{parentName:"ol"},"For additional help ask on the ",(0,l.kt)("strong",{parentName:"li"},"TCET Linux Discussions Channel")," group on ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"https://discord.gg/r7ZhAREg2M"},"TCET Linux Discord Server")),"."),(0,l.kt)("li",{parentName:"ol"},"You can see how we can resolve any issues while installation in ",(0,l.kt)("a",{parentName:"li",href:"troubleshoot-installation"},(0,l.kt)("strong",{parentName:"a"},"Troubleshoot-Installation"))," section for ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux"),".")),(0,l.kt)("li",{parentName:"ol"},"You can also read the installation steps guide in our website ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/#installation"},"TCET Linux"),".")))),(0,l.kt)("br",null),(0,l.kt)("p",null,(0,l.kt)("em",{parentName:"p"},"The ",(0,l.kt)("a",{parentName:"em",href:"installation-steps"},(0,l.kt)("strong",{parentName:"a"},"Installation Steps"))," was successfully executed! Let's move on and see how we can resolve any issues in ",(0,l.kt)("a",{parentName:"em",href:"troubleshoot-installation"},(0,l.kt)("strong",{parentName:"a"},"Troubleshoot-Installation"))," section for ",(0,l.kt)("strong",{parentName:"em"},(0,l.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux")),".")))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/64149844.f6684705.js b/assets/js/64149844.f6684705.js deleted file mode 100644 index b293ed81..00000000 --- a/assets/js/64149844.f6684705.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1279],{3905:(t,e,n)=>{n.d(e,{Zo:()=>u,kt:()=>k});var a=n(7294);function l(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function o(t){for(var e=1;e=0||(l[n]=t[n]);return l}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(l[n]=t[n])}return l}var s=a.createContext({}),p=function(t){var e=a.useContext(s),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},u=function(t){var e=p(t.components);return a.createElement(s.Provider,{value:e},t.children)},c="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},d=a.forwardRef((function(t,e){var n=t.components,l=t.mdxType,r=t.originalType,s=t.parentName,u=i(t,["components","mdxType","originalType","parentName"]),c=p(n),d=l,k=c["".concat(s,".").concat(d)]||c[d]||m[d]||r;return n?a.createElement(k,o(o({ref:e},u),{},{components:n})):a.createElement(k,o({ref:e},u))}));function k(t,e){var n=arguments,l=e&&e.mdxType;if("string"==typeof t||l){var r=n.length,o=new Array(r);o[0]=d;var i={};for(var s in e)hasOwnProperty.call(e,s)&&(i[s]=e[s]);i.originalType=t,i[c]="string"==typeof t?t:l,o[1]=i;for(var p=2;p{n.r(e),n.d(e,{assets:()=>y,contentTitle:()=>k,default:()=>N,frontMatter:()=>d,metadata:()=>g,toc:()=>f});var a=n(7462),l=(n(7294),n(3905));const r=n.p+"assets/images/installWelcome-8a576492dc6113a2f6382cd615282fd3.png",o=n.p+"assets/images/installLocation-9b0f9d8de8152c77153a6f79fb07295c.png",i=n.p+"assets/images/installKeyboard-c31eb6b5d32b01d7daa6913fa210299b.png",s=n.p+"assets/images/installPartition-0c20aab1c8b0076fe6fc9ba8031b7ddb.png",p=n.p+"assets/images/installUser-d10136655b59b004836f382630e2ee8c.png",u=n.p+"assets/images/installSummary-3c70dc24ee772af0a5c0cd41462de0a8.png",c=n.p+"assets/images/installInstall-52944124c1b88f1e9701ba9ccb4279bf.png",m=n.p+"assets/images/installFinish-5c3729f0aebd6f97780c8f8d6bc9ae44.png",d={title:"Installation Steps",id:"installation-steps",description:"Installation Steps of TCET Linux.",sidebar_label:"Installation Steps",keywords:["Installation Steps","Calamares Installer"]},k=void 0,g={unversionedId:"projects/tcet-linux/installation/installation-steps",id:"projects/tcet-linux/installation/installation-steps",title:"Installation Steps",description:"Installation Steps of TCET Linux.",source:"@site/docs/projects/tcet-linux/installation/installation-steps.md",sourceDirName:"projects/tcet-linux/installation",slug:"/projects/tcet-linux/installation/installation-steps",permalink:"/docs/projects/tcet-linux/installation/installation-steps",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux/installation/installation-steps.md",tags:[],version:"current",lastUpdatedBy:"Meet Jain",lastUpdatedAt:1704472882,formattedLastUpdatedAt:"Jan 5, 2024",frontMatter:{title:"Installation Steps",id:"installation-steps",description:"Installation Steps of TCET Linux.",sidebar_label:"Installation Steps",keywords:["Installation Steps","Calamares Installer"]},sidebar:"docs",previous:{title:"Installation in VM",permalink:"/docs/projects/tcet-linux/installation/installation-in-vm"},next:{title:"Troubleshoot Installation",permalink:"/docs/projects/tcet-linux/installation/troubleshoot-installation"}},y={},f=[{value:"Welcome Screen",id:"welcome-screen",level:2},{value:"Set Your Location",id:"set-your-location",level:2},{value:"Choose Keyboard Layout",id:"choose-keyboard-layout",level:2},{value:"Storage Partitioning",id:"storage-partitioning",level:2},{value:"User Details",id:"user-details",level:2},{value:"Summary",id:"summary",level:2},{value:"Installation Process",id:"installation-process",level:2},{value:"Installation Complete",id:"installation-complete",level:2}],h={toc:f},b="wrapper";function N(t){let{components:e,...n}=t;return(0,l.kt)(b,(0,a.Z)({},h,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"welcome-screen"},(0,l.kt)("strong",{parentName:"h2"},"Welcome Screen")),(0,l.kt)("p",null," Launch the installer by searching for 'Install TCET Linux.' The installer will greet you with a user-friendly interface."),(0,l.kt)("center",null,(0,l.kt)("img",{src:r,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Welcome Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"set-your-location"},(0,l.kt)("strong",{parentName:"h2"},"Set Your Location")),(0,l.kt)("p",null," Select your location by clicking on the timezones on the map. If you have an internet connection, this should happen automatically."),(0,l.kt)("center",null,(0,l.kt)("img",{src:o,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Location Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"choose-keyboard-layout"},(0,l.kt)("strong",{parentName:"h2"},"Choose Keyboard Layout")),(0,l.kt)("p",null," Keyboard layout is automatically mapped by location. Verify the layout in the text box or make adjustments as needed."),(0,l.kt)("center",null,(0,l.kt)("img",{src:i,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Keyboard Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"storage-partitioning"},(0,l.kt)("strong",{parentName:"h2"},"Storage Partitioning")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Automatic Setup (Recommended):")),(0,l.kt)("p",{parentName:"li"},"The installer defaults to an automatic setup, creating a Fat32 EFI System Partition and a root partition with the ext4 filesystem. This is recommended for most users.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Manual Partitioning (Advanced):")),(0,l.kt)("p",{parentName:"li"},"For advanced users who want complete control over their disk partitions."),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Select Disk:"),"\nChoose the disk where TCET Linux will be installed. This could be your SSD or HDD.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Existing Partitions:"),"\nIf there are existing partitions, you'll see them listed. Decide whether to modify, delete, or keep them.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Create Partitions:")),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"EFI System Partition (ESP):"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: Typically around 300MB."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: FAT32."),(0,l.kt)("li",{parentName:"ul"},"Mount Point: /boot/efi."))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Root Partition (/):"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: Allocate a sufficient amount, at least 20GB."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: ext4."),(0,l.kt)("li",{parentName:"ul"},"Mount Point: /."))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Swap Partition (optional):"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: Recommended to be equal to or double your RAM."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: Swap."))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("strong",{parentName:"li"},"Home Partition (optional):"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"Size: As per your storage needs."),(0,l.kt)("li",{parentName:"ul"},"Filesystem: ext4."),(0,l.kt)("li",{parentName:"ul"},"Mount Point: /home."))))),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Filesystem and Mount Points:"),"\nAssign a filesystem (e.g., ext4) and mount points for each partition.")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"Finalize and Apply:"),"\nConfirm your choices and apply the changes. Double-check to avoid data loss. "))))),(0,l.kt)("admonition",{type:"warning"},(0,l.kt)("p",{parentName:"admonition"},(0,l.kt)("strong",{parentName:"p"},"Important Note for Multiple OS Installation:")),(0,l.kt)("ul",{parentName:"admonition"},(0,l.kt)("li",{parentName:"ul"},"If you intend to have multiple operating systems on your disk, such as dual-booting with another OS, it is recommended to choose manual partitioning."),(0,l.kt)("li",{parentName:"ul"},"Use ",(0,l.kt)("strong",{parentName:"li"},'"Erase Full Disk & Install" only if')," you are installing ",(0,l.kt)("strong",{parentName:"li"},"TCET Linux as a Virtual Machine")," OR ",(0,l.kt)("strong",{parentName:"li"},"You Want TCET Linux to be the sole operating system")," on your machine. This option will erase the entire disk, including other operating systems and data."))),(0,l.kt)("br",null),(0,l.kt)("center",null,(0,l.kt)("img",{src:s,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Partition Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"user-details"},(0,l.kt)("strong",{parentName:"h2"},"User Details")),(0,l.kt)("p",null," Enter your desired username for the login screen. Set the administrator account password (root user). Opt for different passwords for enhanced security or keep them the same for convenience."),(0,l.kt)("center",null,(0,l.kt)("img",{src:p,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"User Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"summary"},(0,l.kt)("strong",{parentName:"h2"},"Summary")),(0,l.kt)("p",null," Review a detailed summary of your choices. Confirm that the partitioning details match your preferences before proceeding."),(0,l.kt)("center",null,(0,l.kt)("img",{src:u,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Summary Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"installation-process"},(0,l.kt)("strong",{parentName:"h2"},"Installation Process")),(0,l.kt)("p",null," The installation will take approximately 5-10 minutes, depending on your SSD/HDD speed. The progress bar will keep you informed. Sit back, relax, and maybe grab a cup of coffee!"),(0,l.kt)("center",null,(0,l.kt)("img",{src:c,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Installation Process Page"))),(0,l.kt)("br",null),(0,l.kt)("h2",{id:"installation-complete"},(0,l.kt)("strong",{parentName:"h2"},"Installation Complete")),(0,l.kt)("p",null," Once done, you'll receive a notification. Restart your system to boot into your freshly installed TCET Linux. Welcome to a new and exciting computing experience!"),(0,l.kt)("center",null,(0,l.kt)("img",{src:m,style:{border:"2px solid gray"}}),(0,l.kt)("b",null,(0,l.kt)("figcaption",null,"Finish Page"))),(0,l.kt)("br",null),(0,l.kt)("admonition",{type:"tip"},(0,l.kt)("ol",{parentName:"admonition"},(0,l.kt)("li",{parentName:"ol"},"You can visit on some learning resources listed on ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"/docs/projects/tcet-linux/resources"},"Resource Page"))," of TCET Linux documentation."),(0,l.kt)("li",{parentName:"ol"},"For additional help ask on the ",(0,l.kt)("strong",{parentName:"li"},"TCET Linux Discussions Channel")," group on ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"https://discord.gg/r7ZhAREg2M"},"TCET Linux Discord Server")),"."),(0,l.kt)("li",{parentName:"ol"},"You can see how we can resolve any issues while installation in ",(0,l.kt)("a",{parentName:"li",href:"troubleshoot-installation"},(0,l.kt)("strong",{parentName:"a"},"Troubleshoot-Installation"))," section for ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux"),".")),(0,l.kt)("li",{parentName:"ol"},"You can also read the installation steps guide in our website ",(0,l.kt)("strong",{parentName:"li"},(0,l.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/#installation"},"TCET Linux"),".")))),(0,l.kt)("br",null),(0,l.kt)("p",null,(0,l.kt)("em",{parentName:"p"},"The ",(0,l.kt)("a",{parentName:"em",href:"installation-steps"},(0,l.kt)("strong",{parentName:"a"},"Installation Steps"))," was successfully executed! Let's move on and see how we can resolve any issues in ",(0,l.kt)("a",{parentName:"em",href:"troubleshoot-installation"},(0,l.kt)("strong",{parentName:"a"},"Troubleshoot-Installation"))," section for ",(0,l.kt)("strong",{parentName:"em"},(0,l.kt)("a",{parentName:"strong",href:"https://linux.tcetmumbai.in/"},"TCET Linux")),".")))}N.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/65e2adb6.a49cfb05.js b/assets/js/65e2adb6.ab5778f8.js similarity index 99% rename from assets/js/65e2adb6.a49cfb05.js rename to assets/js/65e2adb6.ab5778f8.js index f81f389d..c3869634 100644 --- a/assets/js/65e2adb6.a49cfb05.js +++ b/assets/js/65e2adb6.ab5778f8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1861],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>k});var a=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 o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(n),u=i,k=c["".concat(l,".").concat(u)]||c[u]||d[u]||o;return n?a.createElement(k,r(r({ref:t},m),{},{components:n})):a.createElement(k,r({ref:t},m))}));function k(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,r=new Array(o);r[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[c]="string"==typeof e?e:i,r[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>k,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var a=n(7462),i=(n(7294),n(3905));const o=n.p+"assets/images/set1-23757eac22c7cef57bf6b295af65115c.jpg",r=n.p+"assets/images/set2-a697248626263b64e89765c883549c72.jpg",s={title:"Installation Steps",id:"installation-steps",description:"Installation Steps Component in Tcet Linux Website",sidebar_label:"Installation Steps",keywords:["Installation Steps","Installation","Steps","Guide","linux guide"]},l=void 0,p={unversionedId:"projects/tcet-linux-website/frontend-components/installation-steps",id:"projects/tcet-linux-website/frontend-components/installation-steps",title:"Installation Steps",description:"Installation Steps Component in Tcet Linux Website",source:"@site/docs/projects/tcet-linux-website/frontend-components/installation-steps.mdx",sourceDirName:"projects/tcet-linux-website/frontend-components",slug:"/projects/tcet-linux-website/frontend-components/installation-steps",permalink:"/docs/projects/tcet-linux-website/frontend-components/installation-steps",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux-website/frontend-components/installation-steps.mdx",tags:[],version:"current",lastUpdatedBy:"Himanshu Agarwal",lastUpdatedAt:1688047840,formattedLastUpdatedAt:"Jun 29, 2023",frontMatter:{title:"Installation Steps",id:"installation-steps",description:"Installation Steps Component in Tcet Linux Website",sidebar_label:"Installation Steps",keywords:["Installation Steps","Installation","Steps","Guide","linux guide"]},sidebar:"docs",previous:{title:"Hero",permalink:"/docs/projects/tcet-linux-website/frontend-components/hero"},next:{title:"Verify Download",permalink:"/docs/projects/tcet-linux-website/frontend-components/verify-downloads"}},m={},c=[{value:"Function Defination",id:"function-defination",level:2},{value:"Array Defination",id:"array-defination",level:2},{value:"Sets of Installation Steps",id:"sets-of-installation-steps",level:2}],d={toc:c},u="wrapper";function k(e){let{components:t,...n}=e;return(0,i.kt)(u,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"TCET Linux Installation Steps ",(0,i.kt)("inlineCode",{parentName:"p"},"element")," is a step-by-step guide created by us that will walk you through the process of installing ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux/releases/download/v0.5-beta/checksum"},(0,i.kt)("strong",{parentName:"a"},"TCET Linux"))," on your system. We have included all the neccessary steps from ",(0,i.kt)("strong",{parentName:"p"},"Initial Welcome Screen")," to selecting your ",(0,i.kt)("strong",{parentName:"p"},"Location"),", ",(0,i.kt)("strong",{parentName:"p"},"Keyboard Layout"),", ",(0,i.kt)("strong",{parentName:"p"},"Storage Partitioning"),", and ",(0,i.kt)("strong",{parentName:"p"},"User Details"),". This ",(0,i.kt)("inlineCode",{parentName:"p"},"Section")," in the ",(0,i.kt)("a",{parentName:"p",href:"https://linux.tcetmumbai.in/"},(0,i.kt)("strong",{parentName:"a"},"TCET Linux Website"))," helps the user to easily install ",(0,i.kt)("inlineCode",{parentName:"p"},"TCET Linux")," on their Device."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Here's how we implemented code of this ",(0,i.kt)("inlineCode",{parentName:"strong"},"Element")," :")),(0,i.kt)("h2",{id:"function-defination"},"Function Defination"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Opening the ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/InstallationSteps.jsx"},(0,i.kt)("strong",{parentName:"a"},'"InstallationSteps.jsx"')),"file.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"In ",(0,i.kt)("strong",{parentName:"p"},"Installation Steps Element"),", We have implemented a ",(0,i.kt)("inlineCode",{parentName:"p"},"code")," that consist a ",(0,i.kt)("inlineCode",{parentName:"p"},"React")," component called ",(0,i.kt)("strong",{parentName:"p"},"InstallationSteps"),". It is a functional component that renders a set of installation steps for ",(0,i.kt)("strong",{parentName:"p"},"TCET Linux Installation")," along with ",(0,i.kt)("inlineCode",{parentName:"p"},"Corresponding Images")," with ",(0,i.kt)("strong",{parentName:"p"},"Hovering Effect"),"."),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="InstallationSteps.jsx" {1-2,11-12} showLineNumbers',title:'"InstallationSteps.jsx"',"{1-2,11-12}":!0,showLineNumbers:!0},"//import dependencies\nfunction InstallationSteps() \n const [imageFirst, setImageFirst] = useState(welcomeImage);\n const [imageSecond, setImageSecond] = useState(welcomeImage);\n //Futher Code\n"))),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Our implemented ",(0,i.kt)("inlineCode",{parentName:"p"},"code")," begins with importing the necessary dependencies and several image files using relative paths for our ",(0,i.kt)("inlineCode",{parentName:"p"},"Requirements"),".")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"We have defined ",(0,i.kt)("strong",{parentName:"p"},"InstallationSteps")," function as the component."),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Inside the component, two ",(0,i.kt)("strong",{parentName:"p"},"State Variables")," are initialized using the ",(0,i.kt)("inlineCode",{parentName:"p"},"useState")," hook: ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," and ",(0,i.kt)("strong",{parentName:"p"},"imageSecond"),".")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"The ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," variable represents the image displayed on the ",(0,i.kt)("inlineCode",{parentName:"p"},"Left side"),", and ",(0,i.kt)("strong",{parentName:"p"},"imageSecond")," represents the image displayed on the ",(0,i.kt)("inlineCode",{parentName:"p"},"Right")," side."))))),(0,i.kt)("h2",{id:"array-defination"},"Array Defination"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"In this ",(0,i.kt)("inlineCode",{parentName:"p"},"step"),", we have defined an Two ",(0,i.kt)("inlineCode",{parentName:"p"},"Array")," called ",(0,i.kt)("strong",{parentName:"p"},"installationStepsFirstSet")," and ",(0,i.kt)("strong",{parentName:"p"},"installationStepsSecondSet"),". These arrays contain objects representing the installation steps.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"First ",(0,i.kt)("strong",{parentName:"p"},"Array")," contain the objects for ",(0,i.kt)("inlineCode",{parentName:"p"},"First Set")," of Installation Steps component. Similarly Second ",(0,i.kt)("strong",{parentName:"p"},"Array")," contain the objects for ",(0,i.kt)("inlineCode",{parentName:"p"},"Second Set")," of Installation Steps component."),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="InstallationSteps.jsx" {2,4-8} showLineNumbers',title:'"InstallationSteps.jsx"',"{2,4-8}":!0,showLineNumbers:!0},' //function defination\n const installationStepsFirstSet = \n {\n id: 1,\n header: "Welcome Screen",\n description:\n "Launch the installer by searching for \'Install TCET Linux\'. The installer will look like this.",\n image: welcomeImage,\n },\n //Futher code\n'))),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Each step object has properties such as id, header, description, and image which represents step number, step title, step description, step image file path."))),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Similar Steps were carried out by us to create different object in both the ",(0,i.kt)("a",{parentName:"strong",href:"#array-defination"},"Arrays"),".")),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},"We created this ",(0,i.kt)("inlineCode",{parentName:"p"},"Arrays")," to utilise in ",(0,i.kt)("strong",{parentName:"p"},"Main")," Structure, which shorten's the code length and make it accessible to understand.")),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"You can refer this code from ",(0,i.kt)("strong",{parentName:"p"},'"InstallationSteps.jsx"')," file from our ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website"},(0,i.kt)("strong",{parentName:"a"},"TCET Linux Website"))," repo.")),(0,i.kt)("h2",{id:"sets-of-installation-steps"},"Sets of Installation Steps"),(0,i.kt)("p",null,"This Component consist of the main Structure of code implemented by our team which enable the ",(0,i.kt)("inlineCode",{parentName:"p"},"Sets")," section with ",(0,i.kt)("inlineCode",{parentName:"p"},"hovering image")," effect."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="InstallationSteps.jsx" {2,6,7,8,11,12,15,16,19,21} showLineNumbers',title:'"InstallationSteps.jsx"',"{2,6,7,8,11,12,15,16,19,21}":!0,showLineNumbers:!0},'//Main Structure\n
\n
\n
\n
\n

INSTALLATION GUIDE

\n

\n TCET Linux Installation Steps\n

\n
\n
setImageFirst(welcomeImage)}>\n {installationStepsFirstSet.map((step) => (\n setImageFirst(step.image)}\n key={step.id}\n >\n

\n {step.id}. {step.header}\n

\n

{step.description}

\n
\n ))}\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n// Similar Set section Code\n')),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Here's the explanation of the code : ")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"We defined a JSX is wrapped in a ",(0,i.kt)("inlineCode",{parentName:"p"},"
"),' element with the id set to "installation" and some CSS classes for styling purposes. ')),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Within the component, we defined the JSX structure which is divided into two main sections for the ",(0,i.kt)("strong",{parentName:"p"},"first")," and ",(0,i.kt)("strong",{parentName:"p"},"second")," sets of installation steps.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"In the first section, we created a ",(0,i.kt)("inlineCode",{parentName:"p"},"
")," elements containing another div's for the left side content and the right side content.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Inside the left side ",(0,i.kt)("inlineCode",{parentName:"p"},"
"),", we created a paragragh tag (",(0,i.kt)("inlineCode",{parentName:"p"},"

"),") element for the title, a ",(0,i.kt)("inlineCode",{parentName:"p"},"

")," element for the description of the installation guide and an ",(0,i.kt)("inlineCode",{parentName:"p"},"")," element that displays the image corresponding to the currently selected step. The ",(0,i.kt)("inlineCode",{parentName:"p"},"image")," source is controlled by the ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," variable.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"The ",(0,i.kt)("strong",{parentName:"p"},"installationStepsFirstSet")," ",(0,i.kt)("inlineCode",{parentName:"p"},"array")," is mapped over to render each step as a ",(0,i.kt)("inlineCode",{parentName:"p"},"

"),". The ",(0,i.kt)("strong",{parentName:"p"},"onMouseEnter")," event is used by us to update the ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," variable with the corresponding image when a step is hovered over."))),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Similar Steps were carried out to created another set of ",(0,i.kt)("a",{parentName:"strong",href:"#sets-of-installation-steps"},"InstallationSteps"),".")),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"Using this Syntax of Javascript Language, Multiple Sets can be created as per your Requirements.")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"After implementing all components, the Installation Steps Component can be scene like this :")),(0,i.kt)("figure",null,(0,i.kt)("center",null,(0,i.kt)("img",{src:o,style:{border:"2px solid gray"}})),(0,i.kt)("center",null,(0,i.kt)("b",null,(0,i.kt)("figcaption",null,"Installation Steps Set 1")))),(0,i.kt)("figure",null,(0,i.kt)("center",null,(0,i.kt)("img",{src:r,style:{border:"2px solid gray"}})),(0,i.kt)("center",null,(0,i.kt)("b",null,(0,i.kt)("figcaption",null,"Installation Steps Set 2")))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"In this page, we saw how the ",(0,i.kt)("a",{parentName:"em",href:"installation-steps"},(0,i.kt)("strong",{parentName:"a"},"Installation Steps"))," section was put together. Let's go on towards the next stage,the ",(0,i.kt)("a",{parentName:"em",href:"verify-downloads"},(0,i.kt)("strong",{parentName:"a"},"Verify Downloads"))," Section , to see how the component was implemented.")))}k.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1861],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>k});var a=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 o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(n),u=i,k=c["".concat(l,".").concat(u)]||c[u]||d[u]||o;return n?a.createElement(k,r(r({ref:t},m),{},{components:n})):a.createElement(k,r({ref:t},m))}));function k(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,r=new Array(o);r[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[c]="string"==typeof e?e:i,r[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>k,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var a=n(7462),i=(n(7294),n(3905));const o=n.p+"assets/images/set1-96574a7a8cd86a20ca31a0182cee12f3.jpg",r=n.p+"assets/images/set2-0f3674007d6a0619c58aa0b2aef94859.jpg",s={title:"Installation Steps",id:"installation-steps",description:"Installation Steps Component in Tcet Linux Website",sidebar_label:"Installation Steps",keywords:["Installation Steps","Installation","Steps","Guide","linux guide"]},l=void 0,p={unversionedId:"projects/tcet-linux-website/frontend-components/installation-steps",id:"projects/tcet-linux-website/frontend-components/installation-steps",title:"Installation Steps",description:"Installation Steps Component in Tcet Linux Website",source:"@site/docs/projects/tcet-linux-website/frontend-components/installation-steps.mdx",sourceDirName:"projects/tcet-linux-website/frontend-components",slug:"/projects/tcet-linux-website/frontend-components/installation-steps",permalink:"/docs/projects/tcet-linux-website/frontend-components/installation-steps",draft:!1,editUrl:"https://github.com/tcet-opensource/documentation/edit/main/docs/projects/tcet-linux-website/frontend-components/installation-steps.mdx",tags:[],version:"current",lastUpdatedBy:"Himanshu Agarwal",lastUpdatedAt:1688047840,formattedLastUpdatedAt:"Jun 29, 2023",frontMatter:{title:"Installation Steps",id:"installation-steps",description:"Installation Steps Component in Tcet Linux Website",sidebar_label:"Installation Steps",keywords:["Installation Steps","Installation","Steps","Guide","linux guide"]},sidebar:"docs",previous:{title:"Hero",permalink:"/docs/projects/tcet-linux-website/frontend-components/hero"},next:{title:"Verify Download",permalink:"/docs/projects/tcet-linux-website/frontend-components/verify-downloads"}},m={},c=[{value:"Function Defination",id:"function-defination",level:2},{value:"Array Defination",id:"array-defination",level:2},{value:"Sets of Installation Steps",id:"sets-of-installation-steps",level:2}],d={toc:c},u="wrapper";function k(e){let{components:t,...n}=e;return(0,i.kt)(u,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"TCET Linux Installation Steps ",(0,i.kt)("inlineCode",{parentName:"p"},"element")," is a step-by-step guide created by us that will walk you through the process of installing ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux/releases/download/v0.5-beta/checksum"},(0,i.kt)("strong",{parentName:"a"},"TCET Linux"))," on your system. We have included all the neccessary steps from ",(0,i.kt)("strong",{parentName:"p"},"Initial Welcome Screen")," to selecting your ",(0,i.kt)("strong",{parentName:"p"},"Location"),", ",(0,i.kt)("strong",{parentName:"p"},"Keyboard Layout"),", ",(0,i.kt)("strong",{parentName:"p"},"Storage Partitioning"),", and ",(0,i.kt)("strong",{parentName:"p"},"User Details"),". This ",(0,i.kt)("inlineCode",{parentName:"p"},"Section")," in the ",(0,i.kt)("a",{parentName:"p",href:"https://linux.tcetmumbai.in/"},(0,i.kt)("strong",{parentName:"a"},"TCET Linux Website"))," helps the user to easily install ",(0,i.kt)("inlineCode",{parentName:"p"},"TCET Linux")," on their Device."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Here's how we implemented code of this ",(0,i.kt)("inlineCode",{parentName:"strong"},"Element")," :")),(0,i.kt)("h2",{id:"function-defination"},"Function Defination"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Opening the ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website/blob/main/src/components/InstallationSteps.jsx"},(0,i.kt)("strong",{parentName:"a"},'"InstallationSteps.jsx"')),"file.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"In ",(0,i.kt)("strong",{parentName:"p"},"Installation Steps Element"),", We have implemented a ",(0,i.kt)("inlineCode",{parentName:"p"},"code")," that consist a ",(0,i.kt)("inlineCode",{parentName:"p"},"React")," component called ",(0,i.kt)("strong",{parentName:"p"},"InstallationSteps"),". It is a functional component that renders a set of installation steps for ",(0,i.kt)("strong",{parentName:"p"},"TCET Linux Installation")," along with ",(0,i.kt)("inlineCode",{parentName:"p"},"Corresponding Images")," with ",(0,i.kt)("strong",{parentName:"p"},"Hovering Effect"),"."),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="InstallationSteps.jsx" {1-2,11-12} showLineNumbers',title:'"InstallationSteps.jsx"',"{1-2,11-12}":!0,showLineNumbers:!0},"//import dependencies\nfunction InstallationSteps() \n const [imageFirst, setImageFirst] = useState(welcomeImage);\n const [imageSecond, setImageSecond] = useState(welcomeImage);\n //Futher Code\n"))),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Our implemented ",(0,i.kt)("inlineCode",{parentName:"p"},"code")," begins with importing the necessary dependencies and several image files using relative paths for our ",(0,i.kt)("inlineCode",{parentName:"p"},"Requirements"),".")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"We have defined ",(0,i.kt)("strong",{parentName:"p"},"InstallationSteps")," function as the component."),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Inside the component, two ",(0,i.kt)("strong",{parentName:"p"},"State Variables")," are initialized using the ",(0,i.kt)("inlineCode",{parentName:"p"},"useState")," hook: ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," and ",(0,i.kt)("strong",{parentName:"p"},"imageSecond"),".")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"The ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," variable represents the image displayed on the ",(0,i.kt)("inlineCode",{parentName:"p"},"Left side"),", and ",(0,i.kt)("strong",{parentName:"p"},"imageSecond")," represents the image displayed on the ",(0,i.kt)("inlineCode",{parentName:"p"},"Right")," side."))))),(0,i.kt)("h2",{id:"array-defination"},"Array Defination"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"In this ",(0,i.kt)("inlineCode",{parentName:"p"},"step"),", we have defined an Two ",(0,i.kt)("inlineCode",{parentName:"p"},"Array")," called ",(0,i.kt)("strong",{parentName:"p"},"installationStepsFirstSet")," and ",(0,i.kt)("strong",{parentName:"p"},"installationStepsSecondSet"),". These arrays contain objects representing the installation steps.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"First ",(0,i.kt)("strong",{parentName:"p"},"Array")," contain the objects for ",(0,i.kt)("inlineCode",{parentName:"p"},"First Set")," of Installation Steps component. Similarly Second ",(0,i.kt)("strong",{parentName:"p"},"Array")," contain the objects for ",(0,i.kt)("inlineCode",{parentName:"p"},"Second Set")," of Installation Steps component."),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="InstallationSteps.jsx" {2,4-8} showLineNumbers',title:'"InstallationSteps.jsx"',"{2,4-8}":!0,showLineNumbers:!0},' //function defination\n const installationStepsFirstSet = \n {\n id: 1,\n header: "Welcome Screen",\n description:\n "Launch the installer by searching for \'Install TCET Linux\'. The installer will look like this.",\n image: welcomeImage,\n },\n //Futher code\n'))),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Each step object has properties such as id, header, description, and image which represents step number, step title, step description, step image file path."))),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Similar Steps were carried out by us to create different object in both the ",(0,i.kt)("a",{parentName:"strong",href:"#array-defination"},"Arrays"),".")),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},"We created this ",(0,i.kt)("inlineCode",{parentName:"p"},"Arrays")," to utilise in ",(0,i.kt)("strong",{parentName:"p"},"Main")," Structure, which shorten's the code length and make it accessible to understand.")),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"You can refer this code from ",(0,i.kt)("strong",{parentName:"p"},'"InstallationSteps.jsx"')," file from our ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/tcet-opensource/tcet-linux-website"},(0,i.kt)("strong",{parentName:"a"},"TCET Linux Website"))," repo.")),(0,i.kt)("h2",{id:"sets-of-installation-steps"},"Sets of Installation Steps"),(0,i.kt)("p",null,"This Component consist of the main Structure of code implemented by our team which enable the ",(0,i.kt)("inlineCode",{parentName:"p"},"Sets")," section with ",(0,i.kt)("inlineCode",{parentName:"p"},"hovering image")," effect."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="InstallationSteps.jsx" {2,6,7,8,11,12,15,16,19,21} showLineNumbers',title:'"InstallationSteps.jsx"',"{2,6,7,8,11,12,15,16,19,21}":!0,showLineNumbers:!0},'//Main Structure\n
\n
\n
\n
\n

INSTALLATION GUIDE

\n

\n TCET Linux Installation Steps\n

\n
\n
setImageFirst(welcomeImage)}>\n {installationStepsFirstSet.map((step) => (\n setImageFirst(step.image)}\n key={step.id}\n >\n

\n {step.id}. {step.header}\n

\n

{step.description}

\n
\n ))}\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n// Similar Set section Code\n')),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Here's the explanation of the code : ")),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"We defined a JSX is wrapped in a ",(0,i.kt)("inlineCode",{parentName:"p"},"
"),' element with the id set to "installation" and some CSS classes for styling purposes. ')),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Within the component, we defined the JSX structure which is divided into two main sections for the ",(0,i.kt)("strong",{parentName:"p"},"first")," and ",(0,i.kt)("strong",{parentName:"p"},"second")," sets of installation steps.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"In the first section, we created a ",(0,i.kt)("inlineCode",{parentName:"p"},"
")," elements containing another div's for the left side content and the right side content.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Inside the left side ",(0,i.kt)("inlineCode",{parentName:"p"},"
"),", we created a paragragh tag (",(0,i.kt)("inlineCode",{parentName:"p"},"

"),") element for the title, a ",(0,i.kt)("inlineCode",{parentName:"p"},"

")," element for the description of the installation guide and an ",(0,i.kt)("inlineCode",{parentName:"p"},"")," element that displays the image corresponding to the currently selected step. The ",(0,i.kt)("inlineCode",{parentName:"p"},"image")," source is controlled by the ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," variable.")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"The ",(0,i.kt)("strong",{parentName:"p"},"installationStepsFirstSet")," ",(0,i.kt)("inlineCode",{parentName:"p"},"array")," is mapped over to render each step as a ",(0,i.kt)("inlineCode",{parentName:"p"},"

"),". The ",(0,i.kt)("strong",{parentName:"p"},"onMouseEnter")," event is used by us to update the ",(0,i.kt)("strong",{parentName:"p"},"imageFirst")," ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," variable with the corresponding image when a step is hovered over."))),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Similar Steps were carried out to created another set of ",(0,i.kt)("a",{parentName:"strong",href:"#sets-of-installation-steps"},"InstallationSteps"),".")),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"Using this Syntax of Javascript Language, Multiple Sets can be created as per your Requirements.")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"After implementing all components, the Installation Steps Component can be scene like this :")),(0,i.kt)("figure",null,(0,i.kt)("center",null,(0,i.kt)("img",{src:o,style:{border:"2px solid gray"}})),(0,i.kt)("center",null,(0,i.kt)("b",null,(0,i.kt)("figcaption",null,"Installation Steps Set 1")))),(0,i.kt)("figure",null,(0,i.kt)("center",null,(0,i.kt)("img",{src:r,style:{border:"2px solid gray"}})),(0,i.kt)("center",null,(0,i.kt)("b",null,(0,i.kt)("figcaption",null,"Installation Steps Set 2")))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"In this page, we saw how the ",(0,i.kt)("a",{parentName:"em",href:"installation-steps"},(0,i.kt)("strong",{parentName:"a"},"Installation Steps"))," section was put together. Let's go on towards the next stage,the ",(0,i.kt)("a",{parentName:"em",href:"verify-downloads"},(0,i.kt)("strong",{parentName:"a"},"Verify Downloads"))," Section , to see how the component was implemented.")))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/main.17738613.js b/assets/js/main.aa91ba68.js similarity index 99% rename from assets/js/main.17738613.js rename to assets/js/main.aa91ba68.js index ff885113..e461b841 100644 --- a/assets/js/main.17738613.js +++ b/assets/js/main.aa91ba68.js @@ -1,2 +1,2 @@ -/*! For license information please see main.17738613.js.LICENSE.txt */ -(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[179],{830:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});var o=n(7294);function r(){return o.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},o.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var o=n(7294),r=n(7462),a=n(8356),i=n.n(a),s=n(6887);const l={"011e0067":[()=>n.e(3976).then(n.t.bind(n,280,19)),"~blog/default/blog-tags-cyberpunk-69c-list.json",280],"015b1d9e":[()=>n.e(6476).then(n.bind(n,2709)),"@site/docs/projects/tnp-website/frontend-components/footer.mdx",2709],"018d5104":[()=>n.e(9707).then(n.t.bind(n,5792,19)),"~blog/default/blog-tags-css-153-list.json",5792],"01a85c17":[()=>Promise.all([n.e(532),n.e(4013)]).then(n.bind(n,1223)),"@theme/BlogTagsListPage",1223],"01bf591d":[()=>n.e(357).then(n.bind(n,6986)),"@site/docs/projects/tcet-linux/iso-profile/scripts.md",6986],"0525c05b":[()=>n.e(9846).then(n.t.bind(n,9191,19)),"~blog/default/blog-tags-zero-to-merge-939-list.json",9191],"064ccdc3":[()=>n.e(7013).then(n.bind(n,6877)),"@site/blog/2023-10-10-CNCF-Zero-to-Merge-Your-first-step-towards-Open-Source/index.md?truncated=true",6877],"0678a95e":[()=>n.e(1914).then(n.bind(n,7478)),"@site/docs/projects/tnp-website/frontend-components/internships.mdx",7478],"06d3e07c":[()=>n.e(178).then(n.bind(n,2948)),"@site/docs/projects/fmc-website/mathematical-logic/average.mdx",2948],"07d439e2":[()=>n.e(2943).then(n.bind(n,8498)),"@site/docs/projects/fmc-website/mathematical-logic/table-manager.mdx",8498],"07d4f3c3":[()=>n.e(5794).then(n.bind(n,4040)),"@site/docs/projects/docs-site/getting-started.md",4040],"07e2df72":[()=>Promise.all([n.e(532),n.e(3334)]).then(n.bind(n,4642)),"@site/blog/2023-06-10-introduction-to-api/index.mdx",4642],"084c7118":[()=>n.e(1958).then(n.t.bind(n,5399,19)),"~blog/default/blog-tags-guide-b39-list.json",5399],"08c356fe":[()=>n.e(1258).then(n.bind(n,1404)),"@site/docs/projects/fmc-website/components/button-instructions.mdx",1404],"093d5119":[()=>n.e(9851).then(n.bind(n,5959)),"@site/blog/2023-04-07-opensource/index.md?truncated=true",5959],"0abe3c97":[()=>n.e(9962).then(n.t.bind(n,701,19)),"~blog/default/blog-tags-automation-1d1-list.json",701],"0b770e5c":[()=>n.e(2114).then(n.t.bind(n,3655,19)),"~blog/default/blog-tags-cyberpunk-69c.json",3655],"0bb967d4":[()=>n.e(6336).then(n.bind(n,9845)),"@site/docs/projects/resume-screener-website/frontend-components/ats-resume-template.mdx",9845],"0be9de06":[()=>n.e(7222).then(n.t.bind(n,390,19)),"~blog/default/blog-tags-api-ce2-list.json",390],"0ca0adb8":[()=>n.e(2184).then(n.t.bind(n,4348,19)),"~blog/default/blog-tags-virtaul-dom-558.json",4348],"0d33ead3":[()=>n.e(8681).then(n.bind(n,5381)),"@site/docs/projects/tcet-linux/guides/backup-restore-timeshift.md",5381],"0dbc6863":[()=>n.e(6759).then(n.bind(n,2330)),"@site/docs/projects/fmc-website/components/cycle-result.mdx",2330],"0e701e42":[()=>n.e(8485).then(n.bind(n,48)),"@site/docs/projects/fmc-website/about-fmc-website.mdx",48],"0f9e71a3":[()=>n.e(1422).then(n.bind(n,6853)),"@site/blog/2023-04-10-intro-to-react-js/index.md",6853],10221538:[()=>n.e(817).then(n.bind(n,3633)),"@site/blog/2023-06-30-tmai-june-23/index.md",3633],"10702ea9":[()=>n.e(4917).then(n.t.bind(n,6370,19)),"~blog/default/blog-tags-binary-a17.json",6370],"1132ad1b":[()=>n.e(1316).then(n.bind(n,3385)),"@site/docs/projects/tnp-website/frontend-components/event-page.mdx",3385],"11ce4159":[()=>n.e(1531).then(n.t.bind(n,5034,19)),"~blog/default/blog-page-5-c6b.json",5034],"1217cc9a":[()=>n.e(9088).then(n.bind(n,9214)),"@site/blog/2023-04-09-intro-to-cloud-computing/index.md?truncated=true",9214],"126747ee":[()=>n.e(7060).then(n.bind(n,3230)),"@site/blog/2023-10-01-blog-guidlines/index.mdx",3230],"13c191f5":[()=>n.e(8050).then(n.t.bind(n,5880,19)),"~blog/default/blog-tags-free-ba0.json",5880],"145b2738":[()=>n.e(997).then(n.bind(n,2544)),"@site/blog/2023-04-10-intro-to-react-js/index.md?truncated=true",2544],"148b302f":[()=>n.e(8624).then(n.bind(n,6242)),"@site/docs/projects/resume-screener-website/frontend-components/hero.mdx",6242],"14ab2c58":[()=>n.e(952).then(n.bind(n,1578)),"@site/docs/projects/tnp-website/frontend-components/components.mdx",1578],"14eb3368":[()=>Promise.all([n.e(532),n.e(9817)]).then(n.bind(n,4228)),"@theme/DocCategoryGeneratedIndexPage",4228],"16ea2389":[()=>n.e(4414).then(n.t.bind(n,1511,19)),"~blog/default/blog-tags-source-541-list.json",1511],"174af344":[()=>n.e(2072).then(n.bind(n,5454)),"@site/docs/projects/fmc-website/components/footer.mdx",5454],17896441:[()=>Promise.all([n.e(532),n.e(2497),n.e(7918)]).then(n.bind(n,5154)),"@theme/DocItem",5154],"180aea8b":[()=>n.e(2618).then(n.t.bind(n,5565,19)),"~blog/default/blog-tags-artificial-intelligence-d5b.json",5565],"181379b6":[()=>n.e(4406).then(n.bind(n,5293)),"@site/blog/2023-10-08-web-crawling/index.mdx",5293],"183d06d0":[()=>n.e(6626).then(n.t.bind(n,5446,19)),"~blog/default/blog-tags-react-js-89e-list.json",5446],19077414:[()=>n.e(8030).then(n.bind(n,2564)),"@site/docs/projects/fmc-website/mathematical-logic/perform.mdx",2564],"195928cd":[()=>n.e(6483).then(n.t.bind(n,181,19)),"~blog/default/blog-tags-tui-9bb.json",181],"19b37017":[()=>n.e(1515).then(n.bind(n,6528)),"@site/docs/resources/workflows/internal-workflow/internal-workflow.md",6528],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,9172)),"@theme/SearchPage",9172],"1be78505":[()=>Promise.all([n.e(532),n.e(9514)]).then(n.bind(n,9963)),"@theme/DocPage",9963],"1f1a9191":[()=>n.e(5145).then(n.bind(n,1100)),"@site/docs/projects/tcet-linux/iso-profile/rootfs.md",1100],"203e7aa1":[()=>n.e(1235).then(n.bind(n,81)),"@site/blog/2023-06-06-tmai-may-23/index.md",81],"2243869d":[()=>n.e(5704).then(n.bind(n,4627)),"@site/blog/2023-05-13-introduction-to-artificial-intelligence/index.mdx",4627],23449821:[()=>n.e(1859).then(n.t.bind(n,1664,19)),"~blog/default/blog-tags-cloud-computing-d12-list.json",1664],"2455eea8":[()=>n.e(7228).then(n.t.bind(n,8892,19)),"~blog/default/blog-tags-data-extraction-2ae.json",8892],"249c34a0":[()=>n.e(1602).then(n.t.bind(n,5668,19)),"~blog/default/blog-tags-software-page-2-60d.json",5668],"24eed22f":[()=>n.e(6648).then(n.bind(n,6132)),"@site/blog/2023-10-14-Quantum-Computing/index.mdx?truncated=true",6132],"25db3e58":[()=>n.e(5810).then(n.t.bind(n,8007,19)),"~blog/default/blog-tags-terminal-1f8-list.json",8007],"266a8bdf":[()=>n.e(7772).then(n.bind(n,318)),"@site/docs/projects/tcet-linux/guides/application/welcome-app.md",318],"277a8968":[()=>n.e(3536).then(n.t.bind(n,7603,19)),"~blog/default/blog-tags-cloud-computing-d12.json",7603],"27cf01df":[()=>n.e(7377).then(n.t.bind(n,3781,19)),"~blog/default/blog-tags-modeltraining-72f-list.json",3781],"28d37a26":[()=>n.e(9535).then(n.t.bind(n,1066,19)),"~blog/default/blog-tags-cncf-636-list.json",1066],"2b5f54f2":[()=>n.e(129).then(n.bind(n,4613)),"@site/docs/projects/tcet-linux-website/frontend-components/navbar.mdx",4613],"2b7c4d8e":[()=>n.e(6451).then(n.t.bind(n,7257,19)),"~blog/default/blog-tags-innovation-5b5.json",7257],"2ca153c8":[()=>n.e(2798).then(n.t.bind(n,2074,19)),"~blog/default/blog-tags-jsx-5c1-list.json",2074],"2d2f753f":[()=>n.e(2894).then(n.t.bind(n,9299,19)),"~blog/default/blog-tags-mind-benders-8e7-list.json",9299],"2e20eea4":[()=>n.e(7708).then(n.bind(n,7088)),"@site/docs/projects/resume-screener-website/frontend-components/about-us.mdx",7088],"2e79d8a7":[()=>n.e(2682).then(n.t.bind(n,5195,19)),"~docs/default/category-docs-docs-category-workflows-67c.json",5195],"2ee72b7d":[()=>n.e(359).then(n.bind(n,4070)),"@site/blog/2023-10-14-Quantum-Computing/index.mdx",4070],"2f43b7b8":[()=>n.e(9344).then(n.t.bind(n,9588,19)),"~blog/default/blog-tags-free-ba0-list.json",9588],33054666:[()=>n.e(3981).then(n.bind(n,5900)),"@site/docs/projects/tcet-linux/guides/alias-commands.md",5900],"332c576c":[()=>n.e(4974).then(n.t.bind(n,1145,19)),"~blog/default/blog-tags-data-48e.json",1145],"336d5e53":[()=>n.e(2357).then(n.bind(n,4797)),"@site/docs/projects/resume-screener-website/frontend-components/guideline.mdx",4797],"35fb2de4":[()=>n.e(5877).then(n.t.bind(n,4379,19)),"~blog/default/blog-tags-data-page-2-3d2.json",4379],"361aeaff":[()=>n.e(6731).then(n.bind(n,3424)),"@site/blog/2023-10-01-blog-guidlines/index.mdx?truncated=true",3424],"3af8b805":[()=>n.e(4094).then(n.bind(n,4390)),"@site/docs/projects/tcet-linux/installation/creating-bootable-USB.md",4390],"3b584882":[()=>n.e(8492).then(n.bind(n,9470)),"@site/docs/projects/tnp-website/frontend-components/tech-stacks.mdx",9470],"3bcb60ef":[()=>n.e(4420).then(n.t.bind(n,4781,19)),"~blog/default/blog-tags-cultural-950-list.json",4781],"3efe186d":[()=>n.e(5456).then(n.bind(n,9173)),"@site/blog/2023-04-09-intro-to-cloud-computing/index.md",9173],"41a57e93":[()=>n.e(1399).then(n.bind(n,3166)),"@site/docs/projects/resume-screener-website/getting-started.mdx",3166],"41d36ca8":[()=>n.e(6422).then(n.bind(n,9197)),"@site/docs/projects/tcet-linux/guides/getting-started.md",9197],"424aade5":[()=>n.e(5196).then(n.t.bind(n,8746,19)),"~blog/default/blog-tags-data-page-2-3d2-list.json",8746],"42a79876":[()=>n.e(4199).then(n.bind(n,1292)),"@site/docs/projects/resume-screener-website/about-resume-screener-website.mdx",1292],"42cfb5d4":[()=>n.e(6740).then(n.t.bind(n,987,19)),"~blog/default/blog-tags-social-806-list.json",987],"4303eacb":[()=>n.e(6488).then(n.bind(n,230)),"@site/docs/projects/resume-screener-website/frontend-components/footer.mdx",230],"44ac4dbb":[()=>n.e(7142).then(n.t.bind(n,399,19)),"~blog/default/blog-page-6-772.json",399],"457d31f8":[()=>n.e(8098).then(n.t.bind(n,7085,19)),"C:\\Users\\ASUS\\Projects\\tcet-opensource\\documentation\\.docusaurus\\docusaurus-theme-search-algolia\\default\\plugin-route-context-module-100.json",7085],"45ca282f":[()=>n.e(7516).then(n.t.bind(n,7967,19)),"~blog/default/blog-tags-work-4b3.json",7967],"468416a0":[()=>n.e(5614).then(n.t.bind(n,9557,19)),"~blog/default/blog-tags-blockchain-bb4.json",9557],"4732c43b":[()=>n.e(7072).then(n.bind(n,6687)),"@site/blog/2023-05-07-tmai-april-23/index.md",6687],"481fd4dd":[()=>Promise.all([n.e(532),n.e(7892)]).then(n.bind(n,3226)),"@site/docs/projects/docs-site/sidebar/adding-items.mdx",3226],"48b11c83":[()=>n.e(9106).then(n.bind(n,9942)),"@site/docs/projects/fmc-website/components/header-help.mdx",9942],"4b078b99":[()=>n.e(4972).then(n.t.bind(n,1682,19)),"~blog/default/blog-tags-work-4b3-list.json",1682],"4b2d8469":[()=>n.e(2369).then(n.t.bind(n,5752,19)),"~blog/default/blog-tags-tmai-ee7-list.json",5752],"4b95aa7a":[()=>n.e(9484).then(n.bind(n,202)),"@site/docs/projects/docs-site/sidebar/multiple-sidebars.mdx",202],"4bc386a3":[()=>n.e(2300).then(n.bind(n,1928)),"@site/docs/projects/tcet-linux-website/frontend-components/tech-stacks.mdx",1928],"4bd5fd33":[()=>n.e(6560).then(n.t.bind(n,404,19)),"~blog/default/blog-tags-automation-1d1.json",404],"4cbce6ab":[()=>n.e(8426).then(n.bind(n,346)),"@site/docs/projects/tnp-website/frontend-components/top-placed-students.mdx",346],"4e20cbbc":[()=>n.e(9313).then(n.t.bind(n,8115,19)),"~blog/default/blog-tags-integration-a8f.json",8115],"4e5f1ca0":[()=>n.e(1835).then(n.t.bind(n,1676,19)),"~blog/default/blog-tags-jsx-5c1.json",1676],"4e7cf029":[()=>n.e(383).then(n.bind(n,8885)),"@site/docs/projects/fmc-website/components/tech-stacks.mdx",8885],"4f691a94":[()=>n.e(2026).then(n.bind(n,9583)),"@site/docs/projects/tcet-linux/installation/requirements-download-verify.md",9583],"50039d65":[()=>n.e(4789).then(n.t.bind(n,4778,19)),"~blog/default/blog-tags-imagination-ca5-list.json",4778],"50411d1a":[()=>n.e(8673).then(n.t.bind(n,781,19)),"~blog/default/blog-tags-model-75f-list.json",781],"50aee6de":[()=>n.e(4272).then(n.t.bind(n,8433,19)),"~blog/default/blog-tags-guide-b39.json",8433],"51e4ac6f":[()=>n.e(9169).then(n.t.bind(n,7736,19)),"~blog/default/blog-tags-open-source-6de.json",7736],52099127:[()=>n.e(1426).then(n.t.bind(n,4708,19)),"~blog/default/blog-page-7-af4.json",4708],52961045:[()=>n.e(6189).then(n.t.bind(n,8440,19)),"~blog/default/blog-tags-terminal-1f8.json",8440],"52cd39ac":[()=>n.e(2877).then(n.bind(n,8682)),"@site/docs/projects/fmc-website/components/displaying-cycle.mdx",8682],"545cb3af":[()=>n.e(3682).then(n.bind(n,9647)),"@site/blog/2023-05-13-introduction-to-artificial-intelligence/index.mdx?truncated=true",9647],55207995:[()=>n.e(9650).then(n.t.bind(n,3610,19)),"~blog/default/blog-tags-technology-3f7.json",3610],"56341d78":[()=>n.e(6650).then(n.bind(n,7551)),"@site/docs/projects/tcet-linux/releases.md",7551],"56e32e60":[()=>n.e(3711).then(n.t.bind(n,9623,19)),"~blog/default/blog-tags-authentication-b73-list.json",9623],"56ec2d2a":[()=>n.e(64).then(n.bind(n,1398)),"@site/docs/projects/fmc-website/mathematical-logic/input-handler.mdx",1398],"5892662e":[()=>n.e(3075).then(n.t.bind(n,1552,19)),"~blog/default/blog-tags-html-67d-list.json",1552],"58f68416":[()=>n.e(3893).then(n.bind(n,4454)),"@site/blog/2023-10-14-Machine-Learning/index.mdx?truncated=true",4454],"5a05c4ed":[()=>n.e(1183).then(n.bind(n,276)),"@site/docs/projects/tnp-website/frontend-components/header.mdx",276],"5b4d43ff":[()=>n.e(3058).then(n.t.bind(n,2095,19)),"~blog/default/blog-tags-source-541.json",2095],"5bf92320":[()=>n.e(8650).then(n.bind(n,6719)),"@site/docs/projects/fmc-website/mathematical-logic/table-transformation.mdx",6719],"5d67ed81":[()=>n.e(5683).then(n.bind(n,251)),"@site/blog/2023-06-30-tmai-june-23/index.md?truncated=true",251],"5e3d8917":[()=>n.e(4736).then(n.bind(n,733)),"@site/docs/projects/tcet-linux-website/frontend-components/download-section.mdx",733],"5e729dc7":[()=>n.e(1353).then(n.t.bind(n,6603,19)),"~blog/default/blog-tags-integration-a8f-list.json",6603],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5f8fc89b":[()=>n.e(8523).then(n.bind(n,6166)),"@site/docs/projects/tnp-website/frontend-components/student-award.mdx",6166],"5fcc37c8":[()=>n.e(930).then(n.t.bind(n,7761,19)),"~blog/default/blog-tags-data-science-578.json",7761],"6068a052":[()=>n.e(5850).then(n.t.bind(n,3405,19)),"~blog/default/blog-tags-data-science-578-list.json",3405],"63e72577":[()=>n.e(6742).then(n.bind(n,2621)),"@site/docs/projects/tcet-linux/guides/install-remove-update-package.md",2621],64149844:[()=>n.e(1279).then(n.bind(n,4419)),"@site/docs/projects/tcet-linux/installation/installation-steps.md",4419],"65e2adb6":[()=>n.e(1861).then(n.bind(n,7961)),"@site/docs/projects/tcet-linux-website/frontend-components/installation-steps.mdx",7961],"671a900e":[()=>n.e(8923).then(n.bind(n,6318)),"@site/blog/2023-10-14-Machine-Learning/index.mdx",6318],"6724b65c":[()=>n.e(3690).then(n.bind(n,271)),"@site/docs/projects/tnp-website/frontend-components/companies.mdx",271],"67fc793f":[()=>n.e(7466).then(n.bind(n,2964)),"@site/docs/projects/tnp-website/frontend-components/industry-interaction.mdx",2964],"6875c492":[()=>Promise.all([n.e(532),n.e(2497),n.e(6048),n.e(8610)]).then(n.bind(n,1714)),"@theme/BlogTagsPostsPage",1714],"68d4a8ee":[()=>n.e(3477).then(n.bind(n,9307)),"@site/docs/projects/tnp-website/frontend-components/attendance-chart.mdx",9307],"69b09ea9":[()=>n.e(498).then(n.t.bind(n,2332,19)),"~blog/default/blog-tags-community-d90.json",2332],"69c643c0":[()=>Promise.all([n.e(532),n.e(6144)]).then(n.bind(n,4386)),"@site/docs/projects/docs-site/navbar/search-bar.mdx",4386],"6b040dea":[()=>n.e(645).then(n.bind(n,2751)),"@site/blog/2023-04-15-rcblog/index.md?truncated=true",2751],"6c601b0f":[()=>n.e(3374).then(n.t.bind(n,6622,19)),"~blog/default/blog-tags-cli-9c0-list.json",6622],"6c7ec1b6":[()=>n.e(5160).then(n.bind(n,3477)),"@site/blog/2023-05-07-tmai-april-23/index.md?truncated=true",3477],"6d025361":[()=>n.e(4110).then(n.bind(n,9967)),"@site/blog/2023-10-06-linux-cli/index.mdx?truncated=true",9967],"6d453d64":[()=>n.e(9287).then(n.t.bind(n,794,19)),"~blog/default/blog-tags-api-ce2.json",794],"6de70aac":[()=>Promise.all([n.e(532),n.e(3004)]).then(n.bind(n,980)),"@site/docs/projects/tnp-website/frontend-components/placement.mdx",980],"6ee5f2ba":[()=>n.e(4959).then(n.bind(n,642)),"@site/blog/2023-10-7-Blockchain/index.md",642],"70ad3ff0":[()=>n.e(147).then(n.t.bind(n,3478,19)),"~blog/default/blog-tags-blockchain-bb4-list.json",3478],"70c84758":[()=>n.e(5932).then(n.t.bind(n,7571,19)),"~blog/default/blog-tags-linux-a80-list.json",7571],"720401d8":[()=>n.e(4022).then(n.bind(n,8492)),"@site/blog/2023-10-10-CNCF-Zero-to-Merge-Your-first-step-towards-Open-Source/index.md",8492],"73006ab0":[()=>n.e(5300).then(n.bind(n,2262)),"@site/docs/projects/docs-site/navbar/adding-links.md",2262],"7332ec3f":[()=>n.e(9556).then(n.bind(n,5524)),"@site/docs/projects/tcet-linux/iso-profile/bootloaders.md",5524],"7425c87d":[()=>Promise.all([n.e(532),n.e(4843)]).then(n.bind(n,7674)),"@site/docs/projects/tnp-website/frontend-components/placed-students.mdx",7674],74806472:[()=>n.e(3661).then(n.bind(n,1124)),"@site/docs/projects/tcet-linux/installation/partitioning.md",1124],"7748fdc4":[()=>n.e(3553).then(n.t.bind(n,5745,19)),"C:\\Users\\ASUS\\Projects\\tcet-opensource\\documentation\\.docusaurus\\docusaurus-plugin-content-pages\\default\\plugin-route-context-module-100.json",5745],"7797872e":[()=>n.e(850).then(n.t.bind(n,5695,19)),"~blog/default/blog-tags-software-f0d-list.json",5695],"77b704ef":[()=>n.e(4898).then(n.t.bind(n,7907,19)),"~blog/default/blog-tags-editorial-8fd.json",7907],"77d5019d":[()=>n.e(3627).then(n.bind(n,8085)),"@site/docs/projects/tcet-linux/installation/troubleshoot-installation.md",8085],"79b40c34":[()=>n.e(703).then(n.bind(n,8598)),"@site/docs/projects/tcet-linux-website/frontend-components/verify-downloads.mdx",8598],"7acc330d":[()=>n.e(978).then(n.t.bind(n,6250,19)),"~blog/default/blog-tags-model-75f.json",6250],"7b55c963":[()=>n.e(7800).then(n.t.bind(n,2671,19)),"~blog/default/blog-tags-ml-84a.json",2671],"7d921a2a":[()=>n.e(1076).then(n.t.bind(n,7945,19)),"~blog/default/blog-tags-quantum-computing-b33.json",7945],"7d9726a8":[()=>n.e(7429).then(n.t.bind(n,9494,19)),"~blog/default/blog-page-4-30b.json",9494],"7f7940a1":[()=>n.e(7456).then(n.bind(n,2240)),"@site/blog/2023-06-06-tmai-may-23/index.md?truncated=true",2240],"801c6379":[()=>n.e(3759).then(n.bind(n,8797)),"@site/docs/projects/tcet-linux/resources.md",8797],"805a8850":[()=>n.e(6085).then(n.t.bind(n,2194,19)),"~blog/default/blog-tags-virtaul-dom-558-list.json",2194],"8128ed27":[()=>n.e(8404).then(n.t.bind(n,6089,19)),"~blog/default/blog-tags-software-f0d.json",6089],"814f3328":[()=>n.e(2535).then(n.t.bind(n,5641,19)),"~blog/default/blog-post-list-prop-default.json",5641],"829ce8eb":[()=>n.e(8566).then(n.t.bind(n,2661,19)),"~blog/default/blog-tags-data-extraction-2ae-list.json",2661],"829f3b94":[()=>n.e(4194).then(n.bind(n,8670)),"@site/docs/projects/fmc-website/mathematical-logic/table-updater.mdx",8670],"84e5d1c3":[()=>n.e(2526).then(n.t.bind(n,9298,19)),"~blog/default/blog-tags-ai-page-2-099.json",9298],"8609c8e4":[()=>n.e(4925).then(n.t.bind(n,4479,19)),"~blog/default/blog-tags-innovation-5b5-list.json",4479],"89d2fbd1":[()=>n.e(5987).then(n.bind(n,7194)),"@site/docs/projects/docs-site/sidebar/adding-links.md",7194],"8b50d3be":[()=>n.e(2293).then(n.t.bind(n,2577,19)),"~blog/default/blog-tags-realm-080.json",2577],"8b916fa8":[()=>n.e(7890).then(n.t.bind(n,2117,19)),"~blog/default/blog-tags-mental-model-b08-list.json",2117],"8e736435":[()=>n.e(4752).then(n.bind(n,6976)),"@site/docs/projects/tcet-linux/guides/system-maintenance.md",6976],"8eb4e46b":[()=>n.e(1).then(n.t.bind(n,2638,19)),"~blog/default/blog-page-2-677.json",2638],"8f081614":[()=>n.e(7922).then(n.bind(n,389)),"@site/docs/projects/resume-screener-website/frontend-components/card.mdx",389],"918c5d55":[()=>n.e(9906).then(n.bind(n,519)),"@site/blog/2023-04-12-dive-into-web-design/index.md",519],"92999a1c":[()=>n.e(8442).then(n.t.bind(n,5310,19)),"~blog/default/blog-page-3-fd4.json",5310],"92fd5fda":[()=>n.e(849).then(n.t.bind(n,6855,19)),"~blog/default/blog-tags-web-design-e76.json",6855],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"940d989c":[()=>n.e(3920).then(n.bind(n,8276)),"@site/docs/resources/workflows/external-workflow/external-workflow.md",8276],"9475880e":[()=>n.e(1151).then(n.t.bind(n,1426,19)),"~blog/default/blog-tags-authentication-b73.json",1426],96504147:[()=>n.e(7661).then(n.bind(n,3050)),"@site/blog/2023-04-12-dive-into-web-design/index.md?truncated=true",3050],"970d58c3":[()=>n.e(2197).then(n.bind(n,5001)),"@site/blog/2023-10-06-linux-cli/index.mdx",5001],"99a66f7b":[()=>n.e(259).then(n.t.bind(n,8769,19)),"~blog/default/blog-tags-frontend-1ec-list.json",8769],"9a413aa3":[()=>n.e(4759).then(n.t.bind(n,4838,19)),"~blog/default/blog-tags-react-js-89e.json",4838],"9c364e92":[()=>n.e(1180).then(n.bind(n,6027)),"@site/docs/projects/fmc-website/mathematical-logic/checker.mdx",6027],"9c7c88e8":[()=>n.e(2435).then(n.bind(n,3196)),"@site/docs/projects/tcet-linux/contribute-tcet-linux.md",3196],"9c9d8604":[()=>n.e(4827).then(n.t.bind(n,1560,19)),"~blog/default/blog-tags-binary-a17-list.json",1560],"9d13a154":[()=>n.e(5742).then(n.t.bind(n,7655,19)),"~blog/default/blog-tags-open-204-list.json",7655],"9d67aca7":[()=>n.e(1737).then(n.t.bind(n,6542,19)),"~blog/default/blog-tags-cultural-950.json",6542],"9e4087bc":[()=>n.e(3608).then(n.bind(n,3169)),"@theme/BlogArchivePage",3169],"9fdd84a8":[()=>n.e(7488).then(n.t.bind(n,4731,19)),"~blog/default/blog-tags-quantum-computing-b33-list.json",4731],a349cfa2:[()=>n.e(5552).then(n.bind(n,6499)),"@site/docs/projects/tcet-linux/guides/chroot.md",6499],a36811df:[()=>n.e(3854).then(n.t.bind(n,4944,19)),"~blog/default/blog-tags-resonsiveness-962.json",4944],a3f8542c:[()=>n.e(9361).then(n.bind(n,858)),"@site/docs/projects/fmc-website/mathematical-logic/table-calculator.mdx",858],a6aa9e1f:[()=>Promise.all([n.e(532),n.e(2497),n.e(6048),n.e(3089)]).then(n.bind(n,46)),"@theme/BlogListPage",46],a6be9a06:[()=>n.e(9044).then(n.bind(n,1508)),"@site/docs/projects/fmc-website/mathematical-logic/scripts.mdx",1508],a7023ddc:[()=>n.e(1713).then(n.t.bind(n,3457,19)),"~blog/default/blog-tags-tags-4c2.json",3457],a8657b80:[()=>n.e(9209).then(n.bind(n,3155)),"@site/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard.mdx",3155],a977d5d4:[()=>n.e(2735).then(n.bind(n,4020)),"@site/blog/2023-10-7-Blockchain/index.md?truncated=true",4020],aadce569:[()=>n.e(9837).then(n.bind(n,7153)),"@site/docs/projects/tcet-linux/guides/application/troubleshoot-application.md",7153],ab2ce8cc:[()=>n.e(9230).then(n.bind(n,4792)),"@site/docs/projects/tnp-website/frontend-components/hero.mdx",4792],ab4c6d72:[()=>n.e(2332).then(n.t.bind(n,2770,19)),"~blog/default/blog-tags-ai-3e5-list.json",2770],ac2246e0:[()=>n.e(4732).then(n.bind(n,7827)),"@site/blog/2023-10-13-AI-Automation/index.mdx",7827],acc02da2:[()=>n.e(2063).then(n.t.bind(n,8359,19)),"~docs/default/category-docs-docs-category-tcet-linux-0e9.json",8359],ad24ee66:[()=>n.e(4090).then(n.t.bind(n,9793,19)),"~blog/default/blog-tags-nvidia-5cf.json",9793],ad4a1baf:[()=>n.e(9714).then(n.bind(n,1542)),"@site/docs/projects/tcet-linux/guides/application/getting-started-with-application.md",1542],ad4ba58a:[()=>n.e(4586).then(n.bind(n,293)),"@site/blog/2023-10-1-cloudgaming/index.md?truncated=true",293],ad7114c0:[()=>n.e(9054).then(n.t.bind(n,791,19)),"~blog/default/blog-tags-web-design-e76-list.json",791],ad8a4f52:[()=>n.e(2406).then(n.t.bind(n,2710,19)),"~blog/default/blog-tags-web-crawling-df6-list.json",2710],afaff11a:[()=>n.e(2878).then(n.t.bind(n,6271,19)),"~blog/default/blog-tags-community-d90-list.json",6271],b1513dc1:[()=>n.e(3937).then(n.t.bind(n,4370,19)),"~blog/default/blog-tags-cloud-d01-list.json",4370],b2709843:[()=>n.e(3554).then(n.t.bind(n,6951,19)),"~blog/default/blog-tags-mental-model-b08.json",6951],b2b675dd:[()=>n.e(533).then(n.t.bind(n,8017,19)),"~blog/default/blog-c06.json",8017],b2f554cd:[()=>n.e(1477).then(n.t.bind(n,10,19)),"~blog/default/blog-archive-80c.json",10],b3738e59:[()=>n.e(8414).then(n.bind(n,7938)),"@site/docs/projects/docs-site/sidebar/adding-categories.md",7938],b47e0805:[()=>n.e(1572).then(n.bind(n,1821)),"@site/docs/projects/tcet-linux/guides/yay.md",1821],b6213d43:[()=>n.e(5158).then(n.bind(n,2458)),"@site/docs/projects/resume-screener-website/frontend-components/tech-stacks.mdx",2458],b7d85a1f:[()=>n.e(2979).then(n.bind(n,9853)),"@site/docs/projects/tcet-linux/installation/installation-in-vm.md",9853],b86fb017:[()=>n.e(9409).then(n.bind(n,8959)),"@site/blog/2023-04-15-rcblog/index.md",8959],b90f67ab:[()=>n.e(4039).then(n.bind(n,4333)),"@site/docs/projects/tnp-website/getting-started.md",4333],b915f261:[()=>n.e(175).then(n.bind(n,3902)),"@site/docs/projects/tnp-website/frontend-components/top-recruiters.mdx",3902],b9a85f2b:[()=>n.e(4986).then(n.bind(n,8494)),"@site/docs/projects/tcet-linux/references-credits.md",8494],ba096015:[()=>n.e(9780).then(n.bind(n,6494)),"@site/docs/projects/tcet-linux/variant.md",6494],ba8f817c:[()=>n.e(7404).then(n.t.bind(n,6716,19)),"~blog/default/blog-tags-tui-9bb-list.json",6716],bb1961e5:[()=>n.e(5590).then(n.t.bind(n,3769,19)),"C:\\Users\\ASUS\\Projects\\tcet-opensource\\documentation\\.docusaurus\\docusaurus-plugin-content-docs\\default\\plugin-route-context-module-100.json",3769],bb19e508:[()=>n.e(9686).then(n.bind(n,4626)),"@site/blog/2023-04-07-opensource/index.md",4626],bc23c598:[()=>n.e(580).then(n.t.bind(n,7442,19)),"~blog/default/blog-tags-web-crawling-df6.json",7442],bdff1965:[()=>n.e(2307).then(n.t.bind(n,6948,19)),"~blog/default/blog-tags-open-source-6de-list.json",6948],bece1fcc:[()=>n.e(5029).then(n.t.bind(n,9359,19)),"~blog/default/blog-tags-machine-learning-36b.json",9359],c17206ae:[()=>n.e(3832).then(n.bind(n,9079)),"@site/docs/projects/docs-site/about-docs.md",9079],c29df475:[()=>n.e(476).then(n.bind(n,2527)),"@site/docs/projects/tcet-linux-website/about-tcet-linux-website.mdx",2527],c319e58f:[()=>n.e(8622).then(n.bind(n,7620)),"@site/docs/projects/tcet-linux/guides/reset-password.md",7620],c3596f7d:[()=>n.e(2892).then(n.bind(n,6098)),"@site/docs/projects/tcet-linux/iso-profile/iso-profile.md",6098],c44c3bbb:[()=>n.e(2049).then(n.t.bind(n,306,19)),"~docs/default/category-docs-docs-category-resources-2da.json",306],c4f5d8e4:[()=>Promise.all([n.e(532),n.e(6233),n.e(4195)]).then(n.bind(n,6156)),"@site/src/pages/index.js",6156],c578a3f6:[()=>n.e(3887).then(n.bind(n,4592)),"@site/docs/projects/docs-site/sidebar/sidebar.md",4592],c5e81cca:[()=>n.e(8717).then(n.t.bind(n,2170,19)),"~blog/default/blog-tags-gaming-b21-list.json",2170],c689f34a:[()=>n.e(1820).then(n.t.bind(n,4307,19)),"~blog/default/blog-tags-nvidia-5cf-list.json",4307],c6f71f2b:[()=>n.e(4491).then(n.t.bind(n,8590,19)),"~blog/default/blog-tags-frontend-1ec.json",8590],c7135589:[()=>n.e(7229).then(n.t.bind(n,2412,19)),"~blog/default/blog-tags-resonsiveness-962-list.json",2412],c750b51b:[()=>n.e(5105).then(n.bind(n,2380)),"@site/docs/projects/docs-site/navbar/navbar.md",2380],ca576004:[()=>n.e(4270).then(n.bind(n,9372)),"@site/docs/projects/fmc-website/components/defining-cycle.mdx",9372],cb2f910a:[()=>n.e(3954).then(n.bind(n,5979)),"@site/docs/projects/tcet-linux-website/frontend-components/hero.mdx",5979],cb345c93:[()=>Promise.all([n.e(532),n.e(7820)]).then(n.bind(n,1129)),"@site/blog/2023-06-10-introduction-to-api/index.mdx?truncated=true",1129],cbafb38b:[()=>n.e(3074).then(n.t.bind(n,8946,19)),"~blog/default/blog-tags-software-page-2-60d-list.json",8946],ccc49370:[()=>Promise.all([n.e(532),n.e(2497),n.e(6048),n.e(6103)]).then(n.bind(n,5203)),"@theme/BlogPostPage",5203],cda22062:[()=>n.e(957).then(n.t.bind(n,3407,19)),"~blog/default/blog-tags-machine-learning-36b-list.json",3407],ce974d64:[()=>n.e(9274).then(n.t.bind(n,7373,19)),"~blog/default/blog-tags-css-153.json",7373],cf5983a7:[()=>n.e(2499).then(n.t.bind(n,5972,19)),"~blog/default/blog-tags-mind-benders-8e7.json",5972],d1c21ad3:[()=>n.e(1829).then(n.t.bind(n,9562,19)),"~blog/default/blog-tags-html-67d.json",9562],d2402109:[()=>Promise.all([n.e(532),n.e(2008)]).then(n.bind(n,3587)),"@site/docs/about-tcetopensource.mdx",3587],d530b40c:[()=>n.e(9571).then(n.t.bind(n,453,19)),"~blog/default/blog-tags-cncf-636.json",453],d74a0d55:[()=>Promise.all([n.e(532),n.e(6345)]).then(n.bind(n,5678)),"@site/docs/projects/tnp-website/frontend-components/training.mdx",5678],d7f54ba9:[()=>n.e(788).then(n.t.bind(n,4688,19)),"~blog/default/blog-tags-technology-3f7-list.json",4688],db0d0857:[()=>n.e(7256).then(n.t.bind(n,1516,19)),"~blog/default/blog-tags-ai-page-2-099-list.json",1516],dcc8afdd:[()=>n.e(8505).then(n.t.bind(n,4710,19)),"~blog/default/blog-tags-imagination-ca5.json",4710],dccfcda8:[()=>n.e(378).then(n.bind(n,1869)),"@site/docs/projects/resume-screener-website/frontend-components/header.mdx",1869],dd5bc5cd:[()=>n.e(4640).then(n.t.bind(n,3631,19)),"~blog/default/blog-tags-linux-a80.json",3631],dff928e6:[()=>n.e(4951).then(n.t.bind(n,4049,19)),"~blog/default/blog-tags-gaming-b21.json",4049],e0eb994a:[()=>n.e(6274).then(n.t.bind(n,7424,19)),"~blog/default/blog-tags-data-48e-list.json",7424],e1b5da7f:[()=>n.e(2444).then(n.bind(n,1785)),"@site/docs/projects/fmc-website/mathematical-logic/table-row-updater.mdx",1785],e1f3d415:[()=>n.e(9223).then(n.bind(n,4793)),"@site/blog/2023-10-13-AI-Automation/index.mdx?truncated=true",4793],e34e7220:[()=>n.e(113).then(n.t.bind(n,3114,19)),"~blog/default/blog-tags-realm-080-list.json",3114],e40d9651:[()=>n.e(4813).then(n.t.bind(n,885,19)),"~blog/default/blog-tags-editorial-8fd-list.json",885],e5ed126e:[()=>n.e(2284).then(n.bind(n,9949)),"@site/docs/projects/fmc-website/mathematical-logic/calculation.mdx",9949],e6bee1e8:[()=>n.e(7352).then(n.bind(n,4122)),"@site/docs/projects/docs-site/navbar/title-and-logo.md",4122],e6c44b2b:[()=>n.e(6149).then(n.t.bind(n,2277,19)),"~blog/default/blog-tags-cli-9c0.json",2277],e8564438:[()=>n.e(899).then(n.t.bind(n,4542,19)),"~blog/default/blog-tags-zero-to-merge-939.json",4542],e8674cfb:[()=>n.e(5205).then(n.bind(n,260)),"@site/docs/projects/fmc-website/mathematical-logic/page-interaction.mdx",260],e943ec5e:[()=>n.e(992).then(n.t.bind(n,3130,19)),"~blog/default/blog-tags-artificial-intelligence-d5b-list.json",3130],e9fb9b7c:[()=>n.e(9118).then(n.t.bind(n,5970,19)),"~blog/default/blog-tags-tmai-ee7.json",5970],eac793e6:[()=>n.e(8397).then(n.t.bind(n,4469,19)),"C:\\Users\\ASUS\\Projects\\tcet-opensource\\documentation\\.docusaurus\\docusaurus-plugin-content-blog\\default\\plugin-route-context-module-100.json",4469],ed67adc0:[()=>n.e(8267).then(n.bind(n,6379)),"@site/docs/projects/tcet-linux-website/getting-started.mdx",6379],ee5821a3:[()=>n.e(7682).then(n.t.bind(n,5756,19)),"~docs/default/category-docs-docs-category-project-docs-98c.json",5756],ef5c2ce9:[()=>n.e(1733).then(n.bind(n,6225)),"@site/docs/projects/tnp-website/directory-structure.md",6225],f09c742d:[()=>n.e(8635).then(n.bind(n,4086)),"@site/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan.mdx",4086],f1fda3c7:[()=>n.e(8063).then(n.bind(n,9625)),"@site/docs/projects/tnp-website/frontend-components/about-us.mdx",9625],f21b70b1:[()=>n.e(4639).then(n.bind(n,491)),"@site/blog/2023-10-08-web-crawling/index.mdx?truncated=true",491],f2544e3f:[()=>n.e(1347).then(n.t.bind(n,6395,19)),"~blog/default/blog-tags-social-806.json",6395],f32fe326:[()=>n.e(8843).then(n.t.bind(n,4634,19)),"~blog/default/blog-tags-ai-3e5.json",4634],f3543915:[()=>n.e(3376).then(n.t.bind(n,7698,19)),"~blog/default/blog-tags-cloud-d01.json",7698],f3acecd9:[()=>n.e(1149).then(n.bind(n,3204)),"@site/docs/projects/tcet-linux/about-tcet-linux.md",3204],f4acf23e:[()=>n.e(8104).then(n.bind(n,2825)),"@site/docs/projects/fmc-website/getting-started.mdx",2825],f4e0f831:[()=>n.e(7100).then(n.t.bind(n,3545,19)),"~blog/default/blog-tags-modeltraining-72f.json",3545],f50d5d37:[()=>n.e(3353).then(n.bind(n,6199)),"@site/docs/projects/tcet-linux/idea-behind-creating-tcet-linux.md",6199],f51360a1:[()=>n.e(9475).then(n.t.bind(n,8049,19)),"~blog/default/blog-tags-ml-84a-list.json",8049],f74d269b:[()=>n.e(4803).then(n.bind(n,5326)),"@site/docs/projects/tcet-linux-website/frontend-components/footer.mdx",5326],f7646656:[()=>n.e(342).then(n.t.bind(n,5192,19)),"~blog/default/blog-tags-open-204.json",5192],f7c79d71:[()=>n.e(5854).then(n.bind(n,2001)),"@site/blog/2023-10-1-cloudgaming/index.md",2001],f9492474:[()=>n.e(7491).then(n.bind(n,1197)),"@site/docs/projects/tnp-website/frontend-components/testimonials.mdx",1197],fa3e5dd5:[()=>n.e(4361).then(n.bind(n,9484)),"@site/docs/projects/tnp-website/about-tnp-website.mdx",9484],feea2548:[()=>n.e(7207).then(n.bind(n,2347)),"@site/docs/projects/docs-site/navbar/adding-items.md",2347]};function c(e){let{error:t,retry:n,pastDelay:r}=e;return t?o.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},o.createElement("p",null,String(t)),o.createElement("div",null,o.createElement("button",{type:"button",onClick:n},"Retry"))):r?o.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},o.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},o.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},o.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.createElement("circle",{cx:"22",cy:"22",r:"8"},o.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var u=n(9670),d=n(226);function p(e,t){if("*"===e)return i()({loading:c,loader:()=>n.e(7515).then(n.bind(n,4972)),modules:["@theme/NotFound"],webpack:()=>[4972],render(e,t){const n=e.default;return o.createElement(d.z,{value:{plugin:{name:"native",id:"default"}}},o.createElement(n,t))}});const a=s[`${e}-${t}`],p={},f=[],m=[],g=(0,u.Z)(a);return Object.entries(g).forEach((e=>{let[t,n]=e;const o=l[n];o&&(p[t]=o[0],f.push(o[1]),m.push(o[2]))})),i().Map({loading:c,loader:p,modules:f,webpack:()=>m,render(t,n){const i=JSON.parse(JSON.stringify(a));Object.entries(t).forEach((t=>{let[n,o]=t;const r=o.default;if(!r)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof r&&"function"!=typeof r||Object.keys(o).filter((e=>"default"!==e)).forEach((e=>{r[e]=o[e]}));let a=i;const s=n.split(".");s.slice(0,-1).forEach((e=>{a=a[e]})),a[s[s.length-1]]=r}));const s=i.__comp;delete i.__comp;const l=i.__context;return delete i.__context,o.createElement(d.z,{value:l},o.createElement(s,(0,r.Z)({},i,n)))}})}const f=[{path:"/blog",component:p("/blog","38e"),exact:!0},{path:"/blog/archive",component:p("/blog/archive","d81"),exact:!0},{path:"/blog/blog-posting-guidelines",component:p("/blog/blog-posting-guidelines","502"),exact:!0},{path:"/blog/breaking-the-ice-open-source",component:p("/blog/breaking-the-ice-open-source","375"),exact:!0},{path:"/blog/Cloud-gaming",component:p("/blog/Cloud-gaming","d8a"),exact:!0},{path:"/blog/CNCF-Zero-to-Merge",component:p("/blog/CNCF-Zero-to-Merge","62d"),exact:!0},{path:"/blog/dive-into-web-design",component:p("/blog/dive-into-web-design","46f"),exact:!0},{path:"/blog/intro-to-ai-automation",component:p("/blog/intro-to-ai-automation","6d8"),exact:!0},{path:"/blog/intro-to-artificial-intelligence",component:p("/blog/intro-to-artificial-intelligence","415"),exact:!0},{path:"/blog/intro-to-blockchain",component:p("/blog/intro-to-blockchain","5f2"),exact:!0},{path:"/blog/intro-to-cloud-computing",component:p("/blog/intro-to-cloud-computing","41d"),exact:!0},{path:"/blog/intro-to-machine-learning",component:p("/blog/intro-to-machine-learning","d93"),exact:!0},{path:"/blog/intro-to-react-js",component:p("/blog/intro-to-react-js","7ef"),exact:!0},{path:"/blog/introduction-to-api",component:p("/blog/introduction-to-api","23f"),exact:!0},{path:"/blog/linux-basics",component:p("/blog/linux-basics","ef5"),exact:!0},{path:"/blog/page/2",component:p("/blog/page/2","afd"),exact:!0},{path:"/blog/page/3",component:p("/blog/page/3","036"),exact:!0},{path:"/blog/page/4",component:p("/blog/page/4","dbb"),exact:!0},{path:"/blog/page/5",component:p("/blog/page/5","f74"),exact:!0},{path:"/blog/page/6",component:p("/blog/page/6","f6b"),exact:!0},{path:"/blog/page/7",component:p("/blog/page/7","ccf"),exact:!0},{path:"/blog/quantum computing",component:p("/blog/quantum computing","836"),exact:!0},{path:"/blog/rotaract-club-of-tcet",component:p("/blog/rotaract-club-of-tcet","402"),exact:!0},{path:"/blog/tags",component:p("/blog/tags","6c6"),exact:!0},{path:"/blog/tags/ai",component:p("/blog/tags/ai","dd8"),exact:!0},{path:"/blog/tags/ai/page/2",component:p("/blog/tags/ai/page/2","5c2"),exact:!0},{path:"/blog/tags/api",component:p("/blog/tags/api","70e"),exact:!0},{path:"/blog/tags/artificial-intelligence",component:p("/blog/tags/artificial-intelligence","8b1"),exact:!0},{path:"/blog/tags/authentication",component:p("/blog/tags/authentication","aae"),exact:!0},{path:"/blog/tags/automation",component:p("/blog/tags/automation","5da"),exact:!0},{path:"/blog/tags/binary",component:p("/blog/tags/binary","0fe"),exact:!0},{path:"/blog/tags/blockchain",component:p("/blog/tags/blockchain","712"),exact:!0},{path:"/blog/tags/cli",component:p("/blog/tags/cli","78b"),exact:!0},{path:"/blog/tags/cloud",component:p("/blog/tags/cloud","aa0"),exact:!0},{path:"/blog/tags/cloud-computing",component:p("/blog/tags/cloud-computing","004"),exact:!0},{path:"/blog/tags/cncf",component:p("/blog/tags/cncf","c22"),exact:!0},{path:"/blog/tags/community",component:p("/blog/tags/community","1d3"),exact:!0},{path:"/blog/tags/css",component:p("/blog/tags/css","8c9"),exact:!0},{path:"/blog/tags/cultural",component:p("/blog/tags/cultural","a99"),exact:!0},{path:"/blog/tags/cyberpunk",component:p("/blog/tags/cyberpunk","186"),exact:!0},{path:"/blog/tags/data",component:p("/blog/tags/data","04f"),exact:!0},{path:"/blog/tags/data-extraction",component:p("/blog/tags/data-extraction","4b3"),exact:!0},{path:"/blog/tags/data-science",component:p("/blog/tags/data-science","1e3"),exact:!0},{path:"/blog/tags/data/page/2",component:p("/blog/tags/data/page/2","3c2"),exact:!0},{path:"/blog/tags/editorial",component:p("/blog/tags/editorial","913"),exact:!0},{path:"/blog/tags/free",component:p("/blog/tags/free","0f4"),exact:!0},{path:"/blog/tags/frontend",component:p("/blog/tags/frontend","f3f"),exact:!0},{path:"/blog/tags/gaming",component:p("/blog/tags/gaming","7f6"),exact:!0},{path:"/blog/tags/guide",component:p("/blog/tags/guide","0ae"),exact:!0},{path:"/blog/tags/html",component:p("/blog/tags/html","f49"),exact:!0},{path:"/blog/tags/imagination",component:p("/blog/tags/imagination","2c9"),exact:!0},{path:"/blog/tags/innovation",component:p("/blog/tags/innovation","5cb"),exact:!0},{path:"/blog/tags/integration",component:p("/blog/tags/integration","59c"),exact:!0},{path:"/blog/tags/jsx",component:p("/blog/tags/jsx","88c"),exact:!0},{path:"/blog/tags/linux",component:p("/blog/tags/linux","3b5"),exact:!0},{path:"/blog/tags/machine-learning",component:p("/blog/tags/machine-learning","22f"),exact:!0},{path:"/blog/tags/mental-model",component:p("/blog/tags/mental-model","909"),exact:!0},{path:"/blog/tags/mind-benders",component:p("/blog/tags/mind-benders","f1d"),exact:!0},{path:"/blog/tags/ml",component:p("/blog/tags/ml","a70"),exact:!0},{path:"/blog/tags/model",component:p("/blog/tags/model","72e"),exact:!0},{path:"/blog/tags/modeltraining",component:p("/blog/tags/modeltraining","dea"),exact:!0},{path:"/blog/tags/nvidia",component:p("/blog/tags/nvidia","708"),exact:!0},{path:"/blog/tags/open",component:p("/blog/tags/open","fe9"),exact:!0},{path:"/blog/tags/open-source",component:p("/blog/tags/open-source","4ab"),exact:!0},{path:"/blog/tags/quantum-computing",component:p("/blog/tags/quantum-computing","1d9"),exact:!0},{path:"/blog/tags/react-js",component:p("/blog/tags/react-js","241"),exact:!0},{path:"/blog/tags/realm",component:p("/blog/tags/realm","571"),exact:!0},{path:"/blog/tags/resonsiveness",component:p("/blog/tags/resonsiveness","00c"),exact:!0},{path:"/blog/tags/social",component:p("/blog/tags/social","89b"),exact:!0},{path:"/blog/tags/software",component:p("/blog/tags/software","e23"),exact:!0},{path:"/blog/tags/software/page/2",component:p("/blog/tags/software/page/2","cff"),exact:!0},{path:"/blog/tags/source",component:p("/blog/tags/source","d09"),exact:!0},{path:"/blog/tags/technology",component:p("/blog/tags/technology","992"),exact:!0},{path:"/blog/tags/terminal",component:p("/blog/tags/terminal","fc3"),exact:!0},{path:"/blog/tags/tmai",component:p("/blog/tags/tmai","ba5"),exact:!0},{path:"/blog/tags/tui",component:p("/blog/tags/tui","7e6"),exact:!0},{path:"/blog/tags/virtaul-dom",component:p("/blog/tags/virtaul-dom","a4a"),exact:!0},{path:"/blog/tags/web-crawling",component:p("/blog/tags/web-crawling","c84"),exact:!0},{path:"/blog/tags/web-design",component:p("/blog/tags/web-design","693"),exact:!0},{path:"/blog/tags/work",component:p("/blog/tags/work","43c"),exact:!0},{path:"/blog/tags/zero-to-merge",component:p("/blog/tags/zero-to-merge","514"),exact:!0},{path:"/blog/tmai-april-2023",component:p("/blog/tmai-april-2023","833"),exact:!0},{path:"/blog/tmai-june-2023",component:p("/blog/tmai-june-2023","2b4"),exact:!0},{path:"/blog/tmai-may-2023",component:p("/blog/tmai-may-2023","dc9"),exact:!0},{path:"/blog/web-crawling",component:p("/blog/web-crawling","365"),exact:!0},{path:"/search",component:p("/search","e41"),exact:!0},{path:"/docs",component:p("/docs","14e"),routes:[{path:"/docs/about-tcetopensource",component:p("/docs/about-tcetopensource","a55"),exact:!0,sidebar:"docs"},{path:"/docs/category/projects",component:p("/docs/category/projects","efe"),exact:!0,sidebar:"docs"},{path:"/docs/category/resources",component:p("/docs/category/resources","99b"),exact:!0,sidebar:"docs"},{path:"/docs/category/tcet-linux",component:p("/docs/category/tcet-linux","83d"),exact:!0,sidebar:"docs"},{path:"/docs/category/workflows",component:p("/docs/category/workflows","13b"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/about-docs",component:p("/docs/projects/docs-site/about-docs","e12"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/getting-started",component:p("/docs/projects/docs-site/getting-started","9cd"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/navbar/",component:p("/docs/projects/docs-site/navbar/","272"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/navbar/adding-items",component:p("/docs/projects/docs-site/navbar/adding-items","e26"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/navbar/adding-links",component:p("/docs/projects/docs-site/navbar/adding-links","179"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/navbar/search-bar",component:p("/docs/projects/docs-site/navbar/search-bar","ed6"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/navbar/title-and-logo",component:p("/docs/projects/docs-site/navbar/title-and-logo","152"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/sidebar/",component:p("/docs/projects/docs-site/sidebar/","83a"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/sidebar/adding-categories",component:p("/docs/projects/docs-site/sidebar/adding-categories","74c"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/sidebar/adding-items",component:p("/docs/projects/docs-site/sidebar/adding-items","f3e"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/sidebar/adding-links",component:p("/docs/projects/docs-site/sidebar/adding-links","c50"),exact:!0,sidebar:"docs"},{path:"/docs/projects/docs-site/sidebar/multiple-sidebars",component:p("/docs/projects/docs-site/sidebar/multiple-sidebars","db4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/about-fmc-website",component:p("/docs/projects/fmc-website/about-fmc-website","67b"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/button-instructions",component:p("/docs/projects/fmc-website/components/button-instructions","7db"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/cycle-result",component:p("/docs/projects/fmc-website/components/cycle-result","a12"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/defining-cycle",component:p("/docs/projects/fmc-website/components/defining-cycle","ea9"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/displaying-cycle",component:p("/docs/projects/fmc-website/components/displaying-cycle","349"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/footer",component:p("/docs/projects/fmc-website/components/footer","78e"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/header-help",component:p("/docs/projects/fmc-website/components/header-help","bd8"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/components/tech-stacks",component:p("/docs/projects/fmc-website/components/tech-stacks","db4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/getting-started",component:p("/docs/projects/fmc-website/getting-started","ed1"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/average",component:p("/docs/projects/fmc-website/mathematical-logic/average","df3"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/calculation",component:p("/docs/projects/fmc-website/mathematical-logic/calculation","5a4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/checker",component:p("/docs/projects/fmc-website/mathematical-logic/checker","c49"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/input-handler",component:p("/docs/projects/fmc-website/mathematical-logic/input-handler","f5d"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/page-interaction",component:p("/docs/projects/fmc-website/mathematical-logic/page-interaction","89e"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/perform",component:p("/docs/projects/fmc-website/mathematical-logic/perform","a09"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/scripts",component:p("/docs/projects/fmc-website/mathematical-logic/scripts","eb6"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/table-calculator",component:p("/docs/projects/fmc-website/mathematical-logic/table-calculator","5f8"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/table-manager",component:p("/docs/projects/fmc-website/mathematical-logic/table-manager","268"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/table-row-updater",component:p("/docs/projects/fmc-website/mathematical-logic/table-row-updater","e50"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/table-transformation",component:p("/docs/projects/fmc-website/mathematical-logic/table-transformation","bac"),exact:!0,sidebar:"docs"},{path:"/docs/projects/fmc-website/mathematical-logic/table-updater",component:p("/docs/projects/fmc-website/mathematical-logic/table-updater","cd6"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/about-resume-screener-website",component:p("/docs/projects/resume-screener-website/about-resume-screener-website","ce4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/about-us",component:p("/docs/projects/resume-screener-website/frontend-components/about-us","fb7"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/ats-resume-template",component:p("/docs/projects/resume-screener-website/frontend-components/ats-resume-template","21a"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan",component:p("/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan","62d"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/card",component:p("/docs/projects/resume-screener-website/frontend-components/card","d83"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/footer",component:p("/docs/projects/resume-screener-website/frontend-components/footer","f34"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/guideline",component:p("/docs/projects/resume-screener-website/frontend-components/guideline","401"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/header",component:p("/docs/projects/resume-screener-website/frontend-components/header","8af"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/hero",component:p("/docs/projects/resume-screener-website/frontend-components/hero","070"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/frontend-components/tech-stacks",component:p("/docs/projects/resume-screener-website/frontend-components/tech-stacks","9bc"),exact:!0,sidebar:"docs"},{path:"/docs/projects/resume-screener-website/getting-started",component:p("/docs/projects/resume-screener-website/getting-started","8ad"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/about-tcet-linux-website",component:p("/docs/projects/tcet-linux-website/about-tcet-linux-website","fe7"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard",component:p("/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard","a69"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/download-section",component:p("/docs/projects/tcet-linux-website/frontend-components/download-section","0b2"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/footer",component:p("/docs/projects/tcet-linux-website/frontend-components/footer","ccc"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/hero",component:p("/docs/projects/tcet-linux-website/frontend-components/hero","dd3"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/installation-steps",component:p("/docs/projects/tcet-linux-website/frontend-components/installation-steps","626"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/navbar",component:p("/docs/projects/tcet-linux-website/frontend-components/navbar","662"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/tech-stacks",component:p("/docs/projects/tcet-linux-website/frontend-components/tech-stacks","0b1"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/frontend-components/verify-downloads",component:p("/docs/projects/tcet-linux-website/frontend-components/verify-downloads","219"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux-website/getting-started",component:p("/docs/projects/tcet-linux-website/getting-started","b88"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/about-tcet-linux",component:p("/docs/projects/tcet-linux/about-tcet-linux","833"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/contribute-tcet-linux",component:p("/docs/projects/tcet-linux/contribute-tcet-linux","7e0"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/alias-commands",component:p("/docs/projects/tcet-linux/guides/alias-commands","cad"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/application/getting-started-with-application",component:p("/docs/projects/tcet-linux/guides/application/getting-started-with-application","b4b"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/application/troubleshoot-application",component:p("/docs/projects/tcet-linux/guides/application/troubleshoot-application","884"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/application/welcome-app",component:p("/docs/projects/tcet-linux/guides/application/welcome-app","491"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/backup-restore-timeshift",component:p("/docs/projects/tcet-linux/guides/backup-restore-timeshift","3ec"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/chroot",component:p("/docs/projects/tcet-linux/guides/chroot","5e8"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/getting-started",component:p("/docs/projects/tcet-linux/guides/getting-started","192"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/install-remove-update-package",component:p("/docs/projects/tcet-linux/guides/install-remove-update-package","c7b"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/reset-password",component:p("/docs/projects/tcet-linux/guides/reset-password","47b"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/system-maintenance",component:p("/docs/projects/tcet-linux/guides/system-maintenance","163"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/guides/yay",component:p("/docs/projects/tcet-linux/guides/yay","d32"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/idea-behind-creating-tcet-linux",component:p("/docs/projects/tcet-linux/idea-behind-creating-tcet-linux","9f0"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/installation/creating-bootable-USB",component:p("/docs/projects/tcet-linux/installation/creating-bootable-USB","7c8"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/installation/installation-in-vm",component:p("/docs/projects/tcet-linux/installation/installation-in-vm","e09"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/installation/installation-steps",component:p("/docs/projects/tcet-linux/installation/installation-steps","484"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/installation/partitioning",component:p("/docs/projects/tcet-linux/installation/partitioning","c7b"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/installation/requirements-download-verify",component:p("/docs/projects/tcet-linux/installation/requirements-download-verify","ee3"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/installation/troubleshoot-installation",component:p("/docs/projects/tcet-linux/installation/troubleshoot-installation","7a3"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/iso-profile/",component:p("/docs/projects/tcet-linux/iso-profile/","a34"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/iso-profile/bootloaders",component:p("/docs/projects/tcet-linux/iso-profile/bootloaders","408"),exact:!0},{path:"/docs/projects/tcet-linux/iso-profile/rootfs",component:p("/docs/projects/tcet-linux/iso-profile/rootfs","e77"),exact:!0},{path:"/docs/projects/tcet-linux/iso-profile/scripts",component:p("/docs/projects/tcet-linux/iso-profile/scripts","43d"),exact:!0},{path:"/docs/projects/tcet-linux/references-credits",component:p("/docs/projects/tcet-linux/references-credits","433"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/releases",component:p("/docs/projects/tcet-linux/releases","902"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/resources",component:p("/docs/projects/tcet-linux/resources","e1d"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tcet-linux/variant",component:p("/docs/projects/tcet-linux/variant","bd4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/about-tnp-website",component:p("/docs/projects/tnp-website/about-tnp-website","6d9"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/directory-structure",component:p("/docs/projects/tnp-website/directory-structure","105"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/about-us",component:p("/docs/projects/tnp-website/frontend-components/about-us","e2a"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/attendance-chart",component:p("/docs/projects/tnp-website/frontend-components/attendance-chart","2e9"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/companies",component:p("/docs/projects/tnp-website/frontend-components/companies","466"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/components",component:p("/docs/projects/tnp-website/frontend-components/components","bd2"),exact:!0},{path:"/docs/projects/tnp-website/frontend-components/event-page",component:p("/docs/projects/tnp-website/frontend-components/event-page","3f4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/footer",component:p("/docs/projects/tnp-website/frontend-components/footer","736"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/header",component:p("/docs/projects/tnp-website/frontend-components/header","fe8"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/hero",component:p("/docs/projects/tnp-website/frontend-components/hero","e9a"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/industry-interaction",component:p("/docs/projects/tnp-website/frontend-components/industry-interaction","82e"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/internships",component:p("/docs/projects/tnp-website/frontend-components/internships","d25"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/placed-students",component:p("/docs/projects/tnp-website/frontend-components/placed-students","ca3"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/placement",component:p("/docs/projects/tnp-website/frontend-components/placement","1a4"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/student-award",component:p("/docs/projects/tnp-website/frontend-components/student-award","e5f"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/tech-stacks",component:p("/docs/projects/tnp-website/frontend-components/tech-stacks","694"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/testimonials",component:p("/docs/projects/tnp-website/frontend-components/testimonials","e7c"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/top-placed-students",component:p("/docs/projects/tnp-website/frontend-components/top-placed-students","8b5"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/top-recruiters",component:p("/docs/projects/tnp-website/frontend-components/top-recruiters","58f"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/frontend-components/training",component:p("/docs/projects/tnp-website/frontend-components/training","659"),exact:!0,sidebar:"docs"},{path:"/docs/projects/tnp-website/getting-started",component:p("/docs/projects/tnp-website/getting-started","000"),exact:!0,sidebar:"docs"},{path:"/docs/resources/workflows/external-workflow/",component:p("/docs/resources/workflows/external-workflow/","3be"),exact:!0,sidebar:"docs"},{path:"/docs/resources/workflows/internal-workflow/",component:p("/docs/resources/workflows/internal-workflow/","937"),exact:!0,sidebar:"docs"}]},{path:"/",component:p("/","fbd"),exact:!0},{path:"*",component:p("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>r,t:()=>a});var o=n(7294);const r=o.createContext(!1);function a(e){let{children:t}=e;const[n,a]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{a(!0)}),[]),o.createElement(r.Provider,{value:n},t)}},7221:(e,t,n)=>{"use strict";var o=n(7294),r=n(3935),a=n(3727),i=n(405),s=n(412);const l=[n(2497),n(3310),n(8320),n(2295)];var c=n(723),u=n(6550),d=n(8790);function p(e){let{children:t}=e;return o.createElement(o.Fragment,null,t)}var f=n(7462),m=n(5742),g=n(2263),b=n(4996),h=n(6668),v=n(833),w=n(4711),y=n(9727),x=n(3320),k=n(8780),E=n(197);function _(){const{i18n:{defaultLocale:e,localeConfigs:t}}=(0,g.Z)(),n=(0,w.l)();return o.createElement(m.Z,null,Object.entries(t).map((e=>{let[t,{htmlLang:r}]=e;return o.createElement("link",{key:t,rel:"alternate",href:n.createUrl({locale:t,fullyQualified:!0}),hrefLang:r})})),o.createElement("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function S(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,g.Z)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,g.Z)(),{pathname:o}=(0,u.TH)();return e+(0,k.applyTrailingSlash)((0,b.Z)(o),{trailingSlash:n,baseUrl:t})}(),a=t?`${n}${t}`:r;return o.createElement(m.Z,null,o.createElement("meta",{property:"og:url",content:a}),o.createElement("link",{rel:"canonical",href:a}))}function j(){const{i18n:{currentLocale:e}}=(0,g.Z)(),{metadata:t,image:n}=(0,h.L)();return o.createElement(o.Fragment,null,o.createElement(m.Z,null,o.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),o.createElement("body",{className:y.h})),n&&o.createElement(v.d,{image:n}),o.createElement(S,null),o.createElement(_,null),o.createElement(E.Z,{tag:x.HX,locale:e}),o.createElement(m.Z,null,t.map(((e,t)=>o.createElement("meta",(0,f.Z)({key:t},e))))))}const C=new Map;function T(e){if(C.has(e.pathname))return{...e,pathname:C.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return C.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return C.set(e.pathname,t),{...e,pathname:t}}var A=n(8934),L=n(8940);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o{const o=t.default?.[e]??t[e];return o?.(...n)}));return()=>r.forEach((e=>e?.()))}const P=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,o.useLayoutEffect)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const o=t.pathname===n.pathname,r=t.hash===n.hash,a=t.search===n.search;if(o&&r&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends o.Component{constructor(e){super(e),this.previousLocation=void 0,this.routeUpdateCleanupCb=void 0,this.previousLocation=null,this.routeUpdateCleanupCb=s.Z.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return o.createElement(P,{previousLocation:this.previousLocation,location:t},o.createElement(u.AW,{location:t,render:()=>e}))}}const I=O,M="__docusaurus-base-url-issue-banner-container",D="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container",F="__DOCUSAURUS_INSERT_BASEURL_BANNER";function U(e){return`\nwindow['${F}'] = true;\n\ndocument.addEventListener('DOMContentLoaded', maybeInsertBanner);\n\nfunction maybeInsertBanner() {\n var shouldInsert = window['${F}'];\n shouldInsert && insertBanner();\n}\n\nfunction insertBanner() {\n var bannerContainer = document.getElementById('${M}');\n if (!bannerContainer) {\n return;\n }\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{window[F]=!1}),[]),o.createElement(o.Fragment,null,!s.Z.canUseDOM&&o.createElement(m.Z,null,o.createElement("script",null,U(e))),o.createElement("div",{id:M}))}function $(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,g.Z)(),{pathname:n}=(0,u.TH)();return t&&n===e?o.createElement(z,null):null}function q(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:r,localeConfigs:a}}=(0,g.Z)(),i=(0,b.Z)(e),{htmlLang:s,direction:l}=a[r];return o.createElement(m.Z,null,o.createElement("html",{lang:s,dir:l}),o.createElement("title",null,t),o.createElement("meta",{property:"og:title",content:t}),o.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&o.createElement("meta",{name:"robots",content:"noindex, nofollow"}),e&&o.createElement("link",{rel:"icon",href:i}))}var H=n(4763),Z=n(2389);function G(){const e=(0,Z.Z)();return o.createElement(m.Z,null,o.createElement("html",{"data-has-hydrated":e}))}function V(){const e=(0,d.H)(c.Z),t=(0,u.TH)();return o.createElement(H.Z,null,o.createElement(L.M,null,o.createElement(A.t,null,o.createElement(p,null,o.createElement(q,null),o.createElement(j,null),o.createElement($,null),o.createElement(I,{location:T(t)},e)),o.createElement(G,null))))}var W=n(6887);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const o=document.createElement("link");o.setAttribute("rel","prefetch"),o.setAttribute("href",e),o.onload=()=>t(),o.onerror=()=>n();const r=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;r?.appendChild(o)}))}:function(e){return new Promise(((t,n)=>{const o=new XMLHttpRequest;o.open("GET",e,!0),o.withCredentials=!0,o.onload=()=>{200===o.status?t():n()},o.send(null)}))};var Y=n(9670);const Q=new Set,X=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!X.has(e)&&!Q.has(e))(e))return!1;Q.add(e);const t=(0,d.f)(c.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(W).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Y.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?K(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!X.has(e))(e)&&(X.add(e),N(e))},te=Object.freeze(ee);if(s.Z.canUseDOM){window.docusaurus=te;const e=r.hydrate;N(window.location.pathname).then((()=>{e(o.createElement(i.B6,null,o.createElement(a.VK,null,o.createElement(V,null))),document.getElementById("__docusaurus"))}))}},8940:(e,t,n)=>{"use strict";n.d(t,{_:()=>u,M:()=>d});var o=n(7294),r=n(6809);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"about-tcetopensource","docs":[{"id":"about-tcetopensource","path":"/docs/about-tcetopensource","sidebar":"docs"},{"id":"projects/docs-site/about-docs","path":"/docs/projects/docs-site/about-docs","sidebar":"docs"},{"id":"projects/docs-site/getting-started","path":"/docs/projects/docs-site/getting-started","sidebar":"docs"},{"id":"projects/docs-site/navbar/adding-items","path":"/docs/projects/docs-site/navbar/adding-items","sidebar":"docs"},{"id":"projects/docs-site/navbar/adding-links","path":"/docs/projects/docs-site/navbar/adding-links","sidebar":"docs"},{"id":"projects/docs-site/navbar/navbar","path":"/docs/projects/docs-site/navbar/","sidebar":"docs"},{"id":"projects/docs-site/navbar/search-bar","path":"/docs/projects/docs-site/navbar/search-bar","sidebar":"docs"},{"id":"projects/docs-site/navbar/title-and-logo","path":"/docs/projects/docs-site/navbar/title-and-logo","sidebar":"docs"},{"id":"projects/docs-site/sidebar/adding-categories","path":"/docs/projects/docs-site/sidebar/adding-categories","sidebar":"docs"},{"id":"projects/docs-site/sidebar/adding-items","path":"/docs/projects/docs-site/sidebar/adding-items","sidebar":"docs"},{"id":"projects/docs-site/sidebar/adding-links","path":"/docs/projects/docs-site/sidebar/adding-links","sidebar":"docs"},{"id":"projects/docs-site/sidebar/multiple-sidebars","path":"/docs/projects/docs-site/sidebar/multiple-sidebars","sidebar":"docs"},{"id":"projects/docs-site/sidebar/sidebar","path":"/docs/projects/docs-site/sidebar/","sidebar":"docs"},{"id":"projects/fmc-website/about-fmc-website","path":"/docs/projects/fmc-website/about-fmc-website","sidebar":"docs"},{"id":"projects/fmc-website/components/button-instructions","path":"/docs/projects/fmc-website/components/button-instructions","sidebar":"docs"},{"id":"projects/fmc-website/components/cycle-result","path":"/docs/projects/fmc-website/components/cycle-result","sidebar":"docs"},{"id":"projects/fmc-website/components/defining-cycle","path":"/docs/projects/fmc-website/components/defining-cycle","sidebar":"docs"},{"id":"projects/fmc-website/components/displaying-cycle","path":"/docs/projects/fmc-website/components/displaying-cycle","sidebar":"docs"},{"id":"projects/fmc-website/components/footer","path":"/docs/projects/fmc-website/components/footer","sidebar":"docs"},{"id":"projects/fmc-website/components/header-help","path":"/docs/projects/fmc-website/components/header-help","sidebar":"docs"},{"id":"projects/fmc-website/components/tech-stacks","path":"/docs/projects/fmc-website/components/tech-stacks","sidebar":"docs"},{"id":"projects/fmc-website/getting-started","path":"/docs/projects/fmc-website/getting-started","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/average","path":"/docs/projects/fmc-website/mathematical-logic/average","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/calculation","path":"/docs/projects/fmc-website/mathematical-logic/calculation","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/checker","path":"/docs/projects/fmc-website/mathematical-logic/checker","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/input-handler","path":"/docs/projects/fmc-website/mathematical-logic/input-handler","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/page-interaction","path":"/docs/projects/fmc-website/mathematical-logic/page-interaction","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/perform","path":"/docs/projects/fmc-website/mathematical-logic/perform","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/scripts","path":"/docs/projects/fmc-website/mathematical-logic/scripts","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/table-calculator","path":"/docs/projects/fmc-website/mathematical-logic/table-calculator","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/table-manager","path":"/docs/projects/fmc-website/mathematical-logic/table-manager","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/table-row-updater","path":"/docs/projects/fmc-website/mathematical-logic/table-row-updater","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/table-transformation","path":"/docs/projects/fmc-website/mathematical-logic/table-transformation","sidebar":"docs"},{"id":"projects/fmc-website/mathematical-logic/table-updater","path":"/docs/projects/fmc-website/mathematical-logic/table-updater","sidebar":"docs"},{"id":"projects/resume-screener-website/about-resume-screener-website","path":"/docs/projects/resume-screener-website/about-resume-screener-website","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/about-us","path":"/docs/projects/resume-screener-website/frontend-components/about-us","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/ats-resume-template","path":"/docs/projects/resume-screener-website/frontend-components/ats-resume-template","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/ats-resume-test-scan","path":"/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/card","path":"/docs/projects/resume-screener-website/frontend-components/card","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/footer","path":"/docs/projects/resume-screener-website/frontend-components/footer","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/guideline","path":"/docs/projects/resume-screener-website/frontend-components/guideline","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/header","path":"/docs/projects/resume-screener-website/frontend-components/header","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/hero","path":"/docs/projects/resume-screener-website/frontend-components/hero","sidebar":"docs"},{"id":"projects/resume-screener-website/frontend-components/tech-stacks","path":"/docs/projects/resume-screener-website/frontend-components/tech-stacks","sidebar":"docs"},{"id":"projects/resume-screener-website/getting-started","path":"/docs/projects/resume-screener-website/getting-started","sidebar":"docs"},{"id":"projects/tcet-linux-website/about-tcet-linux-website","path":"/docs/projects/tcet-linux-website/about-tcet-linux-website","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/copy-to-clipboard","path":"/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/download-section","path":"/docs/projects/tcet-linux-website/frontend-components/download-section","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/footer","path":"/docs/projects/tcet-linux-website/frontend-components/footer","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/hero","path":"/docs/projects/tcet-linux-website/frontend-components/hero","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/installation-steps","path":"/docs/projects/tcet-linux-website/frontend-components/installation-steps","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/navbar","path":"/docs/projects/tcet-linux-website/frontend-components/navbar","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/tech-stacks","path":"/docs/projects/tcet-linux-website/frontend-components/tech-stacks","sidebar":"docs"},{"id":"projects/tcet-linux-website/frontend-components/verify-downloads","path":"/docs/projects/tcet-linux-website/frontend-components/verify-downloads","sidebar":"docs"},{"id":"projects/tcet-linux-website/getting-started","path":"/docs/projects/tcet-linux-website/getting-started","sidebar":"docs"},{"id":"projects/tcet-linux/about-tcet-linux","path":"/docs/projects/tcet-linux/about-tcet-linux","sidebar":"docs"},{"id":"projects/tcet-linux/contribute-tcet-linux","path":"/docs/projects/tcet-linux/contribute-tcet-linux","sidebar":"docs"},{"id":"projects/tcet-linux/guides/alias-commands","path":"/docs/projects/tcet-linux/guides/alias-commands","sidebar":"docs"},{"id":"projects/tcet-linux/guides/application/getting-started-with-application","path":"/docs/projects/tcet-linux/guides/application/getting-started-with-application","sidebar":"docs"},{"id":"projects/tcet-linux/guides/application/troubleshoot-application","path":"/docs/projects/tcet-linux/guides/application/troubleshoot-application","sidebar":"docs"},{"id":"projects/tcet-linux/guides/application/welcome-app","path":"/docs/projects/tcet-linux/guides/application/welcome-app","sidebar":"docs"},{"id":"projects/tcet-linux/guides/backup-restore-timeshift","path":"/docs/projects/tcet-linux/guides/backup-restore-timeshift","sidebar":"docs"},{"id":"projects/tcet-linux/guides/chroot","path":"/docs/projects/tcet-linux/guides/chroot","sidebar":"docs"},{"id":"projects/tcet-linux/guides/getting-started","path":"/docs/projects/tcet-linux/guides/getting-started","sidebar":"docs"},{"id":"projects/tcet-linux/guides/install-remove-update-package","path":"/docs/projects/tcet-linux/guides/install-remove-update-package","sidebar":"docs"},{"id":"projects/tcet-linux/guides/reset-password","path":"/docs/projects/tcet-linux/guides/reset-password","sidebar":"docs"},{"id":"projects/tcet-linux/guides/system-maintenance","path":"/docs/projects/tcet-linux/guides/system-maintenance","sidebar":"docs"},{"id":"projects/tcet-linux/guides/yay","path":"/docs/projects/tcet-linux/guides/yay","sidebar":"docs"},{"id":"projects/tcet-linux/idea-behind-creating-tcet-linux","path":"/docs/projects/tcet-linux/idea-behind-creating-tcet-linux","sidebar":"docs"},{"id":"projects/tcet-linux/installation/creating-bootable-USB","path":"/docs/projects/tcet-linux/installation/creating-bootable-USB","sidebar":"docs"},{"id":"projects/tcet-linux/installation/installation-in-vm","path":"/docs/projects/tcet-linux/installation/installation-in-vm","sidebar":"docs"},{"id":"projects/tcet-linux/installation/installation-steps","path":"/docs/projects/tcet-linux/installation/installation-steps","sidebar":"docs"},{"id":"projects/tcet-linux/installation/partitioning","path":"/docs/projects/tcet-linux/installation/partitioning","sidebar":"docs"},{"id":"projects/tcet-linux/installation/requirements-download-verify","path":"/docs/projects/tcet-linux/installation/requirements-download-verify","sidebar":"docs"},{"id":"projects/tcet-linux/installation/troubleshoot-installation","path":"/docs/projects/tcet-linux/installation/troubleshoot-installation","sidebar":"docs"},{"id":"projects/tcet-linux/iso-profile/bootloaders","path":"/docs/projects/tcet-linux/iso-profile/bootloaders"},{"id":"projects/tcet-linux/iso-profile/iso-profile","path":"/docs/projects/tcet-linux/iso-profile/","sidebar":"docs"},{"id":"projects/tcet-linux/iso-profile/rootfs","path":"/docs/projects/tcet-linux/iso-profile/rootfs"},{"id":"projects/tcet-linux/iso-profile/scripts","path":"/docs/projects/tcet-linux/iso-profile/scripts"},{"id":"projects/tcet-linux/references-credits","path":"/docs/projects/tcet-linux/references-credits","sidebar":"docs"},{"id":"projects/tcet-linux/releases","path":"/docs/projects/tcet-linux/releases","sidebar":"docs"},{"id":"projects/tcet-linux/resources","path":"/docs/projects/tcet-linux/resources","sidebar":"docs"},{"id":"projects/tcet-linux/variant","path":"/docs/projects/tcet-linux/variant","sidebar":"docs"},{"id":"projects/tnp-website/about-tnp-website","path":"/docs/projects/tnp-website/about-tnp-website","sidebar":"docs"},{"id":"projects/tnp-website/directory-structure","path":"/docs/projects/tnp-website/directory-structure","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/about-us","path":"/docs/projects/tnp-website/frontend-components/about-us","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/attendance-chart","path":"/docs/projects/tnp-website/frontend-components/attendance-chart","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/companies","path":"/docs/projects/tnp-website/frontend-components/companies","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/components","path":"/docs/projects/tnp-website/frontend-components/components"},{"id":"projects/tnp-website/frontend-components/event-page","path":"/docs/projects/tnp-website/frontend-components/event-page","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/footer","path":"/docs/projects/tnp-website/frontend-components/footer","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/header","path":"/docs/projects/tnp-website/frontend-components/header","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/hero","path":"/docs/projects/tnp-website/frontend-components/hero","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/industry-interaction","path":"/docs/projects/tnp-website/frontend-components/industry-interaction","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/internships","path":"/docs/projects/tnp-website/frontend-components/internships","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/placed-students","path":"/docs/projects/tnp-website/frontend-components/placed-students","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/placement","path":"/docs/projects/tnp-website/frontend-components/placement","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/student-award","path":"/docs/projects/tnp-website/frontend-components/student-award","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/tech-stacks","path":"/docs/projects/tnp-website/frontend-components/tech-stacks","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/testimonials","path":"/docs/projects/tnp-website/frontend-components/testimonials","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/top-placed-students","path":"/docs/projects/tnp-website/frontend-components/top-placed-students","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/top-recruiters","path":"/docs/projects/tnp-website/frontend-components/top-recruiters","sidebar":"docs"},{"id":"projects/tnp-website/frontend-components/training","path":"/docs/projects/tnp-website/frontend-components/training","sidebar":"docs"},{"id":"projects/tnp-website/getting-started","path":"/docs/projects/tnp-website/getting-started","sidebar":"docs"},{"id":"resources/workflows/external-workflow/external-workflow","path":"/docs/resources/workflows/external-workflow/","sidebar":"docs"},{"id":"resources/workflows/internal-workflow/internal-workflow","path":"/docs/resources/workflows/internal-workflow/","sidebar":"docs"},{"id":"/category/projects","path":"/docs/category/projects","sidebar":"docs"},{"id":"/category/tcet-linux","path":"/docs/category/tcet-linux","sidebar":"docs"},{"id":"/category/resources","path":"/docs/category/resources","sidebar":"docs"},{"id":"/category/workflows","path":"/docs/category/workflows","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/docs/about-tcetopensource","label":"about-tcetopensource"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(7529);const l=JSON.parse('{"docusaurusVersion":"2.4.3","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.4.3"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"2.4.3"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.4.3"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.4.3"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.4.3"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"2.4.3"},"docusaurus-tailwindcss":{"type":"local"}}}'),c={siteConfig:r.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},u=o.createContext(c);function d(e){let{children:t}=e;return o.createElement(u.Provider,{value:c},t)}},4763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var o=n(7294),r=n(412),a=n(5742),i=n(8780),s=n(7452);function l(e){let{error:t,tryAgain:n}=e;return o.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"}},o.createElement("h1",{style:{fontSize:"3rem"}},"This page crashed"),o.createElement("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"}},"Try again"),o.createElement(c,{error:t}))}function c(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return o.createElement("p",{style:{whiteSpace:"pre-wrap"}},n)}function u(e){let{error:t,tryAgain:n}=e;return o.createElement(p,{fallback:()=>o.createElement(l,{error:t,tryAgain:n})},o.createElement(a.Z,null,o.createElement("title",null,"Page Error")),o.createElement(s.Z,null,o.createElement(l,{error:t,tryAgain:n})))}const d=e=>o.createElement(u,e);class p extends o.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){r.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??d)(e)}return e??null}}},412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const o="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,r={canUseDOM:o,canUseEventListeners:o&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:o&&"IntersectionObserver"in window,canUseViewport:o&&"screen"in window}},5742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(7294),r=n(405);function a(e){return o.createElement(r.ql,e)}},9960:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var o=n(7462),r=n(7294),a=n(3727),i=n(8780),s=n(2263),l=n(3919),c=n(412);const u=r.createContext({collectLink:()=>{}});var d=n(4996);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:g,"data-noBrokenLinkCheck":b,autoAddBaseUrl:h=!0,...v}=e;const{siteConfig:{trailingSlash:w,baseUrl:y}}=(0,s.Z)(),{withBaseUrl:x}=(0,d.C)(),k=(0,r.useContext)(u),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>E.current));const _=p||f;const S=(0,l.Z)(_),j=_?.replace("pathname://","");let C=void 0!==j?(T=j,h&&(e=>e.startsWith("/"))(T)?x(T):T):void 0;var T;C&&S&&(C=(0,i.applyTrailingSlash)(C,{trailingSlash:w,baseUrl:y}));const A=(0,r.useRef)(!1),L=n?a.OL:a.rU,R=c.Z.canUseIntersectionObserver,P=(0,r.useRef)(),N=()=>{A.current||null==C||(window.docusaurus.preload(C),A.current=!0)};(0,r.useEffect)((()=>(!R&&S&&null!=C&&window.docusaurus.prefetch(C),()=>{R&&P.current&&P.current.disconnect()})),[P,C,R,S]);const O=C?.startsWith("#")??!1,I=!C||!S||O;return I||b||k.collectLink(C),I?r.createElement("a",(0,o.Z)({ref:E,href:C},_&&!S&&{target:"_blank",rel:"noopener noreferrer"},v)):r.createElement(L,(0,o.Z)({},v,{onMouseEnter:N,onTouchStart:N,innerRef:e=>{E.current=e,R&&e&&S&&(P.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(P.current.unobserve(e),P.current.disconnect(),null!=C&&window.docusaurus.prefetch(C))}))})),P.current.observe(e))},to:C},n&&{isActive:g,activeClassName:m}))}const f=r.forwardRef(p)},5999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l,I:()=>s});var o=n(7294);function r(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,o.isValidElement)(e)))?n.map(((e,t)=>(0,o.isValidElement)(e)?o.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var a=n(7529);function i(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return a[t??n]??n??t}function s(e,t){let{message:n,id:o}=e;return r(i({message:n,id:o}),t)}function l(e){let{children:t,id:n,values:a}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const s=i({message:t,id:n});return o.createElement(o.Fragment,null,r(s,a))}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>o});const o="default"},3919:(e,t,n)=>{"use strict";function o(e){return/^(?:\w*:|\/\/)/.test(e)}function r(e){return void 0!==e&&!o(e)}n.d(t,{Z:()=>r,b:()=>o})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>s});var o=n(7294),r=n(2263),a=n(3919);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,r.Z)(),n=(0,o.useCallback)(((n,o)=>function(e,t,n,o){let{forcePrependBaseUrl:r=!1,absolute:i=!1}=void 0===o?{}:o;if(!n||n.startsWith("#")||(0,a.b)(n))return n;if(r)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const s=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+s:s}(t,e,n,o)),[t,e]);return{withBaseUrl:n}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(7294),r=n(8940);function a(){return(0,o.useContext)(r._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(7294),r=n(8934);function a(){return(0,o.useContext)(r._)}},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const o=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function r(e){const t={};return function e(n,r){Object.entries(n).forEach((n=>{let[a,i]=n;const s=r?`${r}.${a}`:a;o(i)?e(i,s):t[s]=i}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>r,z:()=>a});var o=n(7294);const r=o.createContext(null);function a(e){let{children:t,value:n}=e;const a=o.useContext(r),i=(0,o.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const o={...t.data,...n?.data};return{plugin:t.plugin,data:o}}({parent:a,value:n})),[a,n]);return o.createElement(r.Provider,{value:i},t)}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>f,WS:()=>m,_r:()=>d,Jo:()=>v,zh:()=>p,yW:()=>b,gB:()=>g});var o=n(6550),r=n(2263),a=n(9935);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,r.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const s=e=>e.versions.find((e=>e.isLast));function l(e,t){const n=s(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,o.LX)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=l(e,t),r=n?.docs.find((e=>!!(0,o.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:r,alternateDocVersions:r?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((o=>{o.id===t&&(n[e.name]=o)}))})),n}(r.id):{}}}const u={},d=()=>i("docusaurus-plugin-content-docs")??u,p=e=>function(e,t,n){void 0===t&&(t=a.m),void 0===n&&(n={});const o=i(e),r=o?.[t];if(!r&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return r}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,o.TH)();return function(e,t,n){void 0===n&&(n={});const r=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,o.LX)(t,{path:n.path,exact:!1,strict:!1})})),a=r?{pluginId:r[0],pluginData:r[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function m(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,o.TH)();if(!t)return;return{activePlugin:t,activeVersion:l(t.pluginData,n)}}function g(e){return p(e).versions}function b(e){const t=p(e);return s(t)}function h(e){const t=p(e),{pathname:n}=(0,o.TH)();return c(t,n)}function v(e){const t=p(e),{pathname:n}=(0,o.TH)();return function(e,t){const n=s(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(4865),r=n.n(o);r().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{r().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){r().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var o=n(7410),r=n(6809);!function(e){const{themeConfig:{prism:t}}=r.default,{additionalLanguages:o}=t;globalThis.Prism=e,o.forEach((e=>{n(6726)(`./prism-${e}`)})),delete globalThis.Prism}(o.Z)},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(7294);const r={iconExternalLink:"iconExternalLink_nPIU"};function a(e){let{width:t=13.5,height:n=13.5}=e;return o.createElement("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink},o.createElement("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"}))}},7452:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Lt});var o=n(7294),r=n(6010),a=n(4763),i=n(833),s=n(7462),l=n(6550),c=n(5999),u=n(5936);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,o.useRef)(null),{action:t}=(0,l.k6)(),n=(0,o.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,u.S)((n=>{let{location:o}=n;e.current&&!o.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,c.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function g(e){const t=e.children??m,{containerRef:n,onClick:r}=f();return o.createElement("div",{ref:n,role:"region","aria-label":m},o.createElement("a",(0,s.Z)({},e,{href:`#${d}`,onClick:r}),t))}var b=n(5281),h=n(9727);const v={skipToContent:"skipToContent_fXgn"};function w(){return o.createElement(g,{className:v.skipToContent})}var y=n(6668),x=n(9689);function k(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:a=1.2,className:i,...l}=e;return o.createElement("svg",(0,s.Z)({viewBox:"0 0 15 15",width:t,height:n},l),o.createElement("g",{stroke:r,strokeWidth:a},o.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}const E={closeButton:"closeButton_CVFx"};function _(e){return o.createElement("button",(0,s.Z)({type:"button","aria-label":(0,c.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,r.Z)("clean-btn close",E.closeButton,e.className)}),o.createElement(k,{width:14,height:14,strokeWidth:3.1}))}const S={content:"content_knG7"};function j(e){const{announcementBar:t}=(0,y.L)(),{content:n}=t;return o.createElement("div",(0,s.Z)({},e,{className:(0,r.Z)(S.content,e.className),dangerouslySetInnerHTML:{__html:n}}))}const C={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function T(){const{announcementBar:e}=(0,y.L)(),{isActive:t,close:n}=(0,x.nT)();if(!t)return null;const{backgroundColor:r,textColor:a,isCloseable:i}=e;return o.createElement("div",{className:C.announcementBar,style:{backgroundColor:r,color:a},role:"banner"},i&&o.createElement("div",{className:C.announcementBarPlaceholder}),o.createElement(j,{className:C.announcementBarContent}),i&&o.createElement(_,{onClick:n,className:C.announcementBarClose}))}var A=n(3163),L=n(2466);var R=n(902),P=n(3102);const N=o.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,A.e)(),t=(0,P.HY)(),[n,r]=(0,o.useState)(!1),a=null!==t.component,i=(0,R.D9)(a);return(0,o.useEffect)((()=>{a&&!i&&r(!0)}),[a,i]),(0,o.useEffect)((()=>{a?e.shown||r(!0):r(!1)}),[e.shown,a]),(0,o.useMemo)((()=>[n,r]),[n])}();return o.createElement(N.Provider,{value:n},t)}function I(e){if(e.component){const t=e.component;return o.createElement(t,e.props)}}function M(){const e=(0,o.useContext)(N);if(!e)throw new R.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,r=(0,o.useCallback)((()=>n(!1)),[n]),a=(0,P.HY)();return(0,o.useMemo)((()=>({shown:t,hide:r,content:I(a)})),[r,a,t])}function D(e){let{header:t,primaryMenu:n,secondaryMenu:a}=e;const{shown:i}=M();return o.createElement("div",{className:"navbar-sidebar"},t,o.createElement("div",{className:(0,r.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i})},o.createElement("div",{className:"navbar-sidebar__item menu"},n),o.createElement("div",{className:"navbar-sidebar__item menu"},a)))}var B=n(2949),F=n(2389);function U(e){return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:24,height:24},e),o.createElement("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"}))}function z(e){return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:24,height:24},e),o.createElement("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"}))}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:a,onChange:i}=e;const s=(0,F.Z)(),l=(0,c.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===a?(0,c.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,c.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return o.createElement("div",{className:(0,r.Z)($.toggle,t)},o.createElement("button",{className:(0,r.Z)("clean-btn",$.toggleButton,!s&&$.toggleButtonDisabled,n),type:"button",onClick:()=>i("dark"===a?"light":"dark"),disabled:!s,title:l,"aria-label":l,"aria-live":"polite"},o.createElement(U,{className:(0,r.Z)($.toggleIcon,$.lightToggleIcon)}),o.createElement(z,{className:(0,r.Z)($.toggleIcon,$.darkToggleIcon)})))}const H=o.memo(q),Z={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:t}=e;const n=(0,y.L)().navbar.style,r=(0,y.L)().colorMode.disableSwitch,{colorMode:a,setColorMode:i}=(0,B.I)();return r?null:o.createElement(H,{className:t,buttonClassName:"dark"===n?Z.darkNavbarColorModeToggle:void 0,value:a,onChange:i})}var V=n(1327);function W(){return o.createElement(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,A.e)();return o.createElement("button",{type:"button","aria-label":(0,c.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle()},o.createElement(k,{color:"var(--ifm-color-emphasis-600)"}))}function Y(){return o.createElement("div",{className:"navbar-sidebar__brand"},o.createElement(W,null),o.createElement(G,{className:"margin-right--md"}),o.createElement(K,null))}var Q=n(9960),X=n(4996),J=n(3919),ee=n(8022),te=n(9471);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:a,label:i,html:l,isDropdownLink:c,prependBaseUrlToHref:u,...d}=e;const p=(0,X.Z)(r),f=(0,X.Z)(t),m=(0,X.Z)(a,{forcePrependBaseUrl:!0}),g=i&&a&&!(0,J.Z)(a),b=l?{dangerouslySetInnerHTML:{__html:l}}:{children:o.createElement(o.Fragment,null,i,g&&o.createElement(te.Z,c&&{width:12,height:12}))};return a?o.createElement(Q.Z,(0,s.Z)({href:u?m:a},d,b)):o.createElement(Q.Z,(0,s.Z)({to:p,isNavLink:!0},(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(f)},d,b))}function oe(e){let{className:t,isDropdownItem:n=!1,...a}=e;const i=o.createElement(ne,(0,s.Z)({className:(0,r.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n},a));return n?o.createElement("li",null,i):i}function re(e){let{className:t,isDropdownItem:n,...a}=e;return o.createElement("li",{className:"menu__list-item"},o.createElement(ne,(0,s.Z)({className:(0,r.Z)("menu__link",t)},a)))}function ae(e){let{mobile:t=!1,position:n,...r}=e;const a=t?re:oe;return o.createElement(a,(0,s.Z)({},r,{activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")}))}var ie=n(6043),se=n(8596),le=n(2263);function ce(e,t){return e.some((e=>function(e,t){return!!(0,se.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function ue(e){let{items:t,position:n,className:a,onClick:i,...l}=e;const c=(0,o.useRef)(null),[u,d]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{const e=e=>{c.current&&!c.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[c]),o.createElement("div",{ref:c,className:(0,r.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":u})},o.createElement(ne,(0,s.Z)({"aria-haspopup":"true","aria-expanded":u,role:"button",href:l.to?void 0:"#",className:(0,r.Z)("navbar__link",a)},l,{onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!u))}}),l.children??l.label),o.createElement("ul",{className:"dropdown__menu"},t.map(((e,t)=>o.createElement(qe,(0,s.Z)({isDropdownItem:!0,activeClassName:"dropdown__link--active"},e,{key:t}))))))}function de(e){let{items:t,className:n,position:a,onClick:i,...c}=e;const u=function(){const{siteConfig:{baseUrl:e}}=(0,le.Z)(),{pathname:t}=(0,l.TH)();return t.replace(e,"/")}(),d=ce(t,u),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!d});return(0,o.useEffect)((()=>{d&&m(!d)}),[u,d,m]),o.createElement("li",{className:(0,r.Z)("menu__list-item",{"menu__list-item--collapsed":p})},o.createElement(ne,(0,s.Z)({role:"button",className:(0,r.Z)("menu__link menu__link--sublist menu__link--sublist-caret",n)},c,{onClick:e=>{e.preventDefault(),f()}}),c.children??c.label),o.createElement(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p},t.map(((e,t)=>o.createElement(qe,(0,s.Z)({mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active"},e,{key:t}))))))}function pe(e){let{mobile:t=!1,...n}=e;const r=t?de:ue;return o.createElement(r,n)}var fe=n(4711);function me(e){let{width:t=20,height:n=20,...r}=e;return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0},r),o.createElement("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"}))}const ge="iconLanguage_nlXk";function be(){return o.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},o.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var he=n(830),ve=["translations"];function we(){return we=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,o=new Array(t);n=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var Ee="Ctrl";var _e=o.forwardRef((function(e,t){var n=e.translations,r=void 0===n?{}:n,a=ke(e,ve),i=r.buttonText,s=void 0===i?"Search":i,l=r.buttonAriaLabel,c=void 0===l?"Search":l,u=ye((0,o.useState)(null),2),d=u[0],p=u[1];return(0,o.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ee))}),[]),o.createElement("button",we({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},a,{ref:t}),o.createElement("span",{className:"DocSearch-Button-Container"},o.createElement(he.W,null),o.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),o.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&o.createElement(o.Fragment,null,o.createElement("kbd",{className:"DocSearch-Button-Key"},d===Ee?o.createElement(be,null):d),o.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),Se=n(5742),je=n(6177),Ce=n(239),Te=n(3320);var Ae=n(3935);const Le={button:{buttonText:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,c.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,c.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,c.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,c.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,c.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,c.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,c.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,c.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Pe(e){let{hit:t,children:n}=e;return o.createElement(Q.Z,{to:t.url},n)}function Ne(e){let{state:t,onClose:n}=e;const r=(0,je.M)();return o.createElement(Q.Z,{to:r(t.query),onClick:n},o.createElement(c.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits}},"See all {count} results"))}function Oe(e){let{contextualSearch:t,externalUrlRegex:r,...a}=e;const{siteMetadata:i}=(0,le.Z)(),c=(0,Ce.l)(),u=function(){const{locale:e,tags:t}=(0,Te._q)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),d=a.searchParameters?.facetFilters??[],p=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(u,d):d,f={...a.searchParameters,facetFilters:p},m=(0,l.k6)(),g=(0,o.useRef)(null),b=(0,o.useRef)(null),[h,v]=(0,o.useState)(!1),[w,y]=(0,o.useState)(void 0),x=(0,o.useCallback)((()=>Re?Promise.resolve():Promise.all([n.e(6672).then(n.bind(n,6672)),Promise.all([n.e(532),n.e(6945)]).then(n.bind(n,6945)),Promise.all([n.e(532),n.e(8894)]).then(n.bind(n,8894))]).then((e=>{let[{DocSearchModal:t}]=e;Re=t}))),[]),k=(0,o.useCallback)((()=>{x().then((()=>{g.current=document.createElement("div"),document.body.insertBefore(g.current,document.body.firstChild),v(!0)}))}),[x,v]),E=(0,o.useCallback)((()=>{v(!1),g.current?.remove()}),[v]),_=(0,o.useCallback)((e=>{x().then((()=>{v(!0),y(e.key)}))}),[x,v,y]),S=(0,o.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(r,t)?window.location.href=t:m.push(t)}}).current,j=(0,o.useRef)((e=>a.transformItems?a.transformItems(e):e.map((e=>({...e,url:c(e.url)}))))).current,C=(0,o.useMemo)((()=>e=>o.createElement(Ne,(0,s.Z)({},e,{onClose:E}))),[E]),T=(0,o.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,r=e.onClose,a=e.onInput,i=e.searchButtonRef;o.useEffect((function(){function e(e){var o;(27===e.keyCode&&t||"k"===(null===(o=e.key)||void 0===o?void 0:o.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?r():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&a&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&a(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,r,a,i])}({isOpen:h,onOpen:k,onClose:E,onInput:_,searchButtonRef:b}),o.createElement(o.Fragment,null,o.createElement(Se.Z,null,o.createElement("link",{rel:"preconnect",href:`https://${a.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})),o.createElement(_e,{onTouchStart:x,onFocus:x,onMouseOver:x,onClick:k,ref:b,translations:Le.button}),h&&Re&&g.current&&(0,Ae.createPortal)(o.createElement(Re,(0,s.Z)({onClose:E,initialScrollY:window.scrollY,initialQuery:w,navigator:S,transformItems:j,hitComponent:Pe,transformSearchClient:T},a.searchPagePath&&{resultsFooterComponent:C},a,{searchParameters:f,placeholder:Le.placeholder,translations:Le.modal})),g.current))}function Ie(){const{siteConfig:e}=(0,le.Z)();return o.createElement(Oe,e.themeConfig.algolia)}const Me={searchBox:"searchBox_ZlJk"};function De(e){let{children:t,className:n}=e;return o.createElement("div",{className:(0,r.Z)(n,Me.searchBox)},t)}var Be=n(143),Fe=n(3438);var Ue=n(373);const ze=e=>e.docs.find((t=>t.id===e.mainDocId));const $e={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,...a}=e;const{i18n:{currentLocale:i,locales:u,localeConfigs:d}}=(0,le.Z)(),p=(0,fe.l)(),{search:f,hash:m}=(0,l.TH)(),g=[...n,...u.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],b=t?(0,c.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return o.createElement(pe,(0,s.Z)({},a,{mobile:t,label:o.createElement(o.Fragment,null,o.createElement(me,{className:ge}),b),items:g}))},search:function(e){let{mobile:t,className:n}=e;return t?null:o.createElement(De,{className:n},o.createElement(Ie,null))},dropdown:pe,html:function(e){let{value:t,className:n,mobile:a=!1,isDropdownItem:i=!1}=e;const s=i?"li":"div";return o.createElement(s,{className:(0,r.Z)({navbar__item:!a&&!i,"menu__list-item":a},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:i}=(0,Be.Iw)(r),l=(0,Fe.vY)(t,r);return null===l?null:o.createElement(ae,(0,s.Z)({exact:!0},a,{isActive:()=>i?.path===l.path||!!i?.sidebar&&i.sidebar===l.sidebar,label:n??l.id,to:l.path}))},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:i}=(0,Be.Iw)(r),l=(0,Fe.oz)(t,r).link;if(!l)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return o.createElement(ae,(0,s.Z)({exact:!0},a,{isActive:()=>i?.sidebar===t,label:n??l.label,to:l.path}))},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...a}=e;const i=(0,Fe.lO)(r)[0],l=t??i.label,c=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(i).path;return o.createElement(ae,(0,s.Z)({},a,{label:l,to:c}))},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:a,dropdownItemsAfter:i,...u}=e;const{search:d,hash:p}=(0,l.TH)(),f=(0,Be.Iw)(n),m=(0,Be.gB)(n),{savePreferredVersionName:g}=(0,Ue.J)(n),b=[...a,...m.map((e=>{const t=f.alternateDocVersions[e.name]??ze(e);return{label:e.label,to:`${t.path}${d}${p}`,isActive:()=>e===f.activeVersion,onClick:()=>g(e.name)}})),...i],h=(0,Fe.lO)(n)[0],v=t&&b.length>1?(0,c.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,w=t&&b.length>1?void 0:ze(h).path;return b.length<=1?o.createElement(ae,(0,s.Z)({},u,{mobile:t,label:v,to:w,isActive:r?()=>!1:void 0})):o.createElement(pe,(0,s.Z)({},u,{mobile:t,label:v,to:w,items:b,isActive:r?()=>!1:void 0}))}};function qe(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=$e[r];if(!a)throw new Error(`No NavbarItem component found for type "${t}".`);return o.createElement(a,n)}function He(){const e=(0,A.e)(),t=(0,y.L)().navbar.items;return o.createElement("ul",{className:"menu__list"},t.map(((t,n)=>o.createElement(qe,(0,s.Z)({mobile:!0},t,{onClick:()=>e.toggle(),key:n})))))}function Ze(e){return o.createElement("button",(0,s.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),o.createElement(c.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"},"\u2190 Back to main menu"))}function Ge(){const e=0===(0,y.L)().navbar.items.length,t=M();return o.createElement(o.Fragment,null,!e&&o.createElement(Ze,{onClick:()=>t.hide()}),t.content)}function Ve(){const e=(0,A.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,o.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?o.createElement(D,{header:o.createElement(Y,null),primaryMenu:o.createElement(He,null),secondaryMenu:o.createElement(Ge,null)}):null}const We={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Ke(e){return o.createElement("div",(0,s.Z)({role:"presentation"},e,{className:(0,r.Z)("navbar-sidebar__backdrop",e.className)}))}function Ye(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,y.L)(),i=(0,A.e)(),{navbarRef:s,isNavbarVisible:l}=function(e){const[t,n]=(0,o.useState)(e),r=(0,o.useRef)(!1),a=(0,o.useRef)(0),i=(0,o.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,L.RF)(((t,o)=>{let{scrollY:i}=t;if(!e)return;if(i=s?n(!1):i+c{if(!e)return;const o=t.location.hash;if(o?document.getElementById(o.substring(1)):void 0)return r.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return o.createElement("nav",{ref:s,"aria-label":(0,c.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,r.Z)("navbar","navbar--fixed-top",n&&[We.navbarHideable,!l&&We.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown})},t,o.createElement(Ke,{onClick:i.toggle}),o.createElement(Ve,null))}var Qe=n(8780);const Xe={errorBoundaryError:"errorBoundaryError_a6uf"};function Je(e){return o.createElement("button",(0,s.Z)({type:"button"},e),o.createElement(c.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error"},"Try again"))}function et(e){let{error:t}=e;const n=(0,Qe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return o.createElement("p",{className:Xe.errorBoundaryError},n)}class tt extends o.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const nt="right";function ot(e){let{width:t=30,height:n=30,className:r,...a}=e;return o.createElement("svg",(0,s.Z)({className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true"},a),o.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}function rt(){const{toggle:e,shown:t}=(0,A.e)();return o.createElement("button",{onClick:e,"aria-label":(0,c.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button"},o.createElement(ot,null))}const at={colorModeToggle:"colorModeToggle_DEke"};function it(e){let{items:t}=e;return o.createElement(o.Fragment,null,t.map(((e,t)=>o.createElement(tt,{key:t,onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t})},o.createElement(qe,e)))))}function st(e){let{left:t,right:n}=e;return o.createElement("div",{className:"navbar__inner"},o.createElement("div",{className:"navbar__items"},t),o.createElement("div",{className:"navbar__items navbar__items--right"},n))}function lt(){const e=(0,A.e)(),t=(0,y.L)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??nt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return o.createElement(st,{left:o.createElement(o.Fragment,null,!e.disabled&&o.createElement(rt,null),o.createElement(W,null),o.createElement(it,{items:n})),right:o.createElement(o.Fragment,null,o.createElement(it,{items:r}),o.createElement(G,{className:at.colorModeToggle}),!a&&o.createElement(De,null,o.createElement(Ie,null)))})}function ct(){return o.createElement(Ye,null,o.createElement(lt,null))}function ut(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:i,...l}=t,c=(0,X.Z)(n),u=(0,X.Z)(r,{forcePrependBaseUrl:!0});return o.createElement(Q.Z,(0,s.Z)({className:"footer__link-item"},r?{href:i?u:r}:{to:c},l),a,r&&!(0,J.Z)(r)&&o.createElement(te.Z,null))}function dt(e){let{item:t}=e;return t.html?o.createElement("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):o.createElement("li",{key:t.href??t.to,className:"footer__item"},o.createElement(ut,{item:t}))}function pt(e){let{column:t}=e;return o.createElement("div",{className:"col footer__col"},o.createElement("div",{className:"footer__title"},t.title),o.createElement("ul",{className:"footer__items clean-list"},t.items.map(((e,t)=>o.createElement(dt,{key:t,item:e})))))}function ft(e){let{columns:t}=e;return o.createElement("div",{className:"row footer__links"},t.map(((e,t)=>o.createElement(pt,{key:t,column:e}))))}function mt(){return o.createElement("span",{className:"footer__link-separator"},"\xb7")}function gt(e){let{item:t}=e;return t.html?o.createElement("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):o.createElement(ut,{item:t})}function bt(e){let{links:t}=e;return o.createElement("div",{className:"footer__links text--center"},o.createElement("div",{className:"footer__links"},t.map(((e,n)=>o.createElement(o.Fragment,{key:n},o.createElement(gt,{item:e}),t.length!==n+1&&o.createElement(mt,null))))))}function ht(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?o.createElement(ft,{columns:t}):o.createElement(bt,{links:t})}var vt=n(941);const wt={footerLogoLink:"footerLogoLink_BH7S"};function yt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),a={light:n(t.src),dark:n(t.srcDark??t.src)};return o.createElement(vt.Z,{className:(0,r.Z)("footer__logo",t.className),alt:t.alt,sources:a,width:t.width,height:t.height,style:t.style})}function xt(e){let{logo:t}=e;return t.href?o.createElement(Q.Z,{href:t.href,className:wt.footerLogoLink,target:t.target},o.createElement(yt,{logo:t})):o.createElement(yt,{logo:t})}function kt(e){let{copyright:t}=e;return o.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Et(e){let{style:t,links:n,logo:a,copyright:i}=e;return o.createElement("footer",{className:(0,r.Z)("footer",{"footer--dark":"dark"===t})},o.createElement("div",{className:"container container-fluid"},n,(a||i)&&o.createElement("div",{className:"footer__bottom text--center"},a&&o.createElement("div",{className:"margin-bottom--sm"},a),i)))}function _t(){const{footer:e}=(0,y.L)();if(!e)return null;const{copyright:t,links:n,logo:r,style:a}=e;return o.createElement(Et,{style:a,links:n&&n.length>0&&o.createElement(ht,{links:n}),logo:r&&o.createElement(xt,{logo:r}),copyright:t&&o.createElement(kt,{copyright:t})})}const St=o.memo(_t),jt=(0,R.Qc)([B.S,x.pl,L.OC,Ue.L5,i.VC,function(e){let{children:t}=e;return o.createElement(P.n2,null,o.createElement(A.M,null,o.createElement(O,null,t)))}]);function Ct(e){let{children:t}=e;return o.createElement(jt,null,t)}function Tt(e){let{error:t,tryAgain:n}=e;return o.createElement("main",{className:"container margin-vert--xl"},o.createElement("div",{className:"row"},o.createElement("div",{className:"col col--6 col--offset-3"},o.createElement("h1",{className:"hero__title"},o.createElement(c.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),o.createElement("div",{className:"margin-vert--lg"},o.createElement(Je,{onClick:n,className:"button button--primary shadow--lw"})),o.createElement("hr",null),o.createElement("div",{className:"margin-vert--md"},o.createElement(et,{error:t})))))}const At={mainWrapper:"mainWrapper_z2l0"};function Lt(e){const{children:t,noFooter:n,wrapperClassName:s,title:l,description:c}=e;return(0,h.t)(),o.createElement(Ct,null,o.createElement(i.d,{title:l,description:c}),o.createElement(w,null),o.createElement(T,null),o.createElement(ct,null),o.createElement("div",{id:d,className:(0,r.Z)(b.k.wrapper.main,At.mainWrapper,s)},o.createElement(a.Z,{fallback:e=>o.createElement(Tt,e)},t)),!n&&o.createElement(St,null))}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var o=n(7462),r=n(7294),a=n(9960),i=n(4996),s=n(2263),l=n(6668),c=n(941);function u(e){let{logo:t,alt:n,imageClassName:o}=e;const a={light:(0,i.Z)(t.src),dark:(0,i.Z)(t.srcDark||t.src)},s=r.createElement(c.Z,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return o?r.createElement("div",{className:o},s):s}function d(e){const{siteConfig:{title:t}}=(0,s.Z)(),{navbar:{title:n,logo:c}}=(0,l.L)(),{imageClassName:d,titleClassName:p,...f}=e,m=(0,i.Z)(c?.href||"/"),g=n?"":t,b=c?.alt??g;return r.createElement(a.Z,(0,o.Z)({to:m},f,c?.target&&{target:c.target}),c&&r.createElement(u,{logo:c,alt:b,imageClassName:d}),null!=n&&r.createElement("b",{className:p},n))}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(7294),r=n(5742);function a(e){let{locale:t,version:n,tag:a}=e;const i=t;return o.createElement(r.Z,null,t&&o.createElement("meta",{name:"docusaurus_locale",content:t}),n&&o.createElement("meta",{name:"docusaurus_version",content:n}),a&&o.createElement("meta",{name:"docusaurus_tag",content:a}),i&&o.createElement("meta",{name:"docsearch:language",content:i}),n&&o.createElement("meta",{name:"docsearch:version",content:n}),a&&o.createElement("meta",{name:"docsearch:docusaurus_tag",content:a}))}},941:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});var o=n(7462),r=n(7294),a=n(6010),i=n(2389),s=n(2949);const l={themedImage:"themedImage_ToTc","themedImage--light":"themedImage--light_HNdA","themedImage--dark":"themedImage--dark_i4oU"};function c(e){const t=(0,i.Z)(),{colorMode:n}=(0,s.I)(),{sources:c,className:u,alt:d,...p}=e,f=t?"dark"===n?["dark"]:["light"]:["light","dark"];return r.createElement(r.Fragment,null,f.map((e=>r.createElement("img",(0,o.Z)({key:e,src:c[e],alt:d,className:(0,a.Z)(l.themedImage,l[`themedImage--${e}`],u)},p)))))}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>l,z:()=>b});var o=n(7462),r=n(7294),a=n(412),i=n(1442);const s="ease-in-out";function l(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const c={display:"none",overflow:"hidden",height:"0px"},u={display:"block",overflow:"visible",height:"auto"};function d(e,t){const n=t?c:u;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function p(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??s}`,height:`${t}px`}}function l(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return d(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(l(),requestAnimationFrame((()=>{e.style.height=c.height,e.style.overflow=c.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{l()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function f(e){if(!a.Z.canUseDOM)return e?c:u}function m(e){let{as:t="div",collapsed:n,children:o,animation:a,onCollapseTransitionEnd:i,className:s,disableSSRStyle:l}=e;const c=(0,r.useRef)(null);return p({collapsibleRef:c,collapsed:n,animation:a}),r.createElement(t,{ref:c,style:l?void 0:f(n),onTransitionEnd:e=>{"height"===e.propertyName&&(d(c.current,n),i?.(n))},className:s},o)}function g(e){let{collapsed:t,...n}=e;const[a,i]=(0,r.useState)(!t),[s,l]=(0,r.useState)(t);return(0,r.useLayoutEffect)((()=>{t||i(!0)}),[t]),(0,r.useLayoutEffect)((()=>{a&&l(t)}),[a,t]),a?r.createElement(m,(0,o.Z)({},n,{collapsed:s})):null}function b(e){let{lazy:t,...n}=e;const o=t?g:m;return r.createElement(o,n)}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>f});var o=n(7294),r=n(2389),a=n(12),i=n(902),s=n(6668);const l=(0,a.WA)("docusaurus.announcement.dismiss"),c=(0,a.WA)("docusaurus.announcement.id"),u=()=>"true"===l.get(),d=e=>l.set(String(e)),p=o.createContext(null);function f(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.L)(),t=(0,r.Z)(),[n,a]=(0,o.useState)((()=>!!t&&u()));(0,o.useEffect)((()=>{a(u())}),[]);const i=(0,o.useCallback)((()=>{d(!0),a(!0)}),[]);return(0,o.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=c.get();"annoucement-bar"===n&&(n="announcement-bar");const o=t!==n;c.set(t),o&&d(!1),!o&&u()||a(!1)}),[e]),(0,o.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return o.createElement(p.Provider,{value:n},t)}function m(){const e=(0,o.useContext)(p);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>g});var o=n(7294),r=n(412),a=n(902),i=n(12),s=n(6668);const l=o.createContext(void 0),c="theme",u=(0,i.WA)(c),d={light:"light",dark:"dark"},p=e=>e===d.dark?d.dark:d.light,f=e=>r.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e),m=e=>{u.set(p(e))};function g(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.L)(),[r,a]=(0,o.useState)(f(e));(0,o.useEffect)((()=>{t&&u.del()}),[t]);const i=(0,o.useCallback)((function(t,o){void 0===o&&(o={});const{persist:r=!0}=o;t?(a(t),r&&m(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light:e),u.del())}),[n,e]);(0,o.useEffect)((()=>{document.documentElement.setAttribute("data-theme",p(r))}),[r]),(0,o.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==c)return;const t=u.get();null!==t&&i(p(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const l=(0,o.useRef)(!1);return(0,o.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(o),()=>e.removeListener(o)}),[i,t,n]),(0,o.useMemo)((()=>({colorMode:r,setColorMode:i,get isDarkTheme(){return r===d.dark},setLightTheme(){i(d.light)},setDarkTheme(){i(d.dark)}})),[r,i])}();return o.createElement(l.Provider,{value:n},t)}function b(){const e=(0,o.useContext)(l);if(null==e)throw new a.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>b,Oh:()=>w});var o=n(7294),r=n(143),a=n(9935),i=n(6668),s=n(3438),l=n(902),c=n(12);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,c.WA)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=o.createContext(null);function m(){const e=(0,r._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,o.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,o.useState)((()=>p(n)));(0,o.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:o}=e;function r(e){const t=d.read(e,n);return o[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,r(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,o.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function g(e){let{children:t}=e;const n=m();return o.createElement(f.Provider,{value:n},t)}function b(e){let{children:t}=e;return s.cE?o.createElement(g,null,t):o.createElement(o.Fragment,null,t)}function h(){const e=(0,o.useContext)(f);if(!e)throw new l.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=a.m);const t=(0,r.zh)(e),[n,i]=h(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,o.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function w(){const e=(0,r._r)(),[t]=h();function n(n){const o=e[n],{preferredVersionName:r}=t[n];return o.versions.find((e=>e.name===r))??null}const o=Object.keys(e);return Object.fromEntries(o.map((e=>[e,n(e)])))}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>l,b:()=>s});var o=n(7294),r=n(902);const a=Symbol("EmptyContext"),i=o.createContext(a);function s(e){let{children:t,name:n,items:r}=e;const a=(0,o.useMemo)((()=>n&&r?{name:n,items:r}:null),[n,r]);return o.createElement(i.Provider,{value:a},t)}function l(){const e=(0,o.useContext)(i);if(e===a)throw new r.i6("DocsSidebarProvider");return e}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>s,q:()=>i});var o=n(7294),r=n(902);const a=o.createContext(null);function i(e){let{children:t,version:n}=e;return o.createElement(a.Provider,{value:n},t)}function s(){const e=(0,o.useContext)(a);if(null===e)throw new r.i6("DocsVersionProvider");return e}},3163:(e,t,n)=>{"use strict";n.d(t,{M:()=>d,e:()=>p});var o=n(7294),r=n(3102),a=n(7524),i=n(1980),s=n(6668),l=n(902);const c=o.createContext(void 0);function u(){const e=function(){const e=(0,r.HY)(),{items:t}=(0,s.L)().navbar;return 0===t.length&&!e.component}(),t=(0,a.i)(),n=!e&&"mobile"===t,[l,c]=(0,o.useState)(!1);(0,i.Rb)((()=>{if(l)return c(!1),!1}));const u=(0,o.useCallback)((()=>{c((e=>!e))}),[]);return(0,o.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,o.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:l})),[e,n,u,l])}function d(e){let{children:t}=e;const n=u();return o.createElement(c.Provider,{value:n},t)}function p(){const e=o.useContext(c);if(void 0===e)throw new l.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>s,Zo:()=>l,n2:()=>i});var o=n(7294),r=n(902);const a=o.createContext(null);function i(e){let{children:t}=e;const n=(0,o.useState)({component:null,props:null});return o.createElement(a.Provider,{value:n},t)}function s(){const e=(0,o.useContext)(a);if(!e)throw new r.i6("NavbarSecondaryMenuContentProvider");return e[0]}function l(e){let{component:t,props:n}=e;const i=(0,o.useContext)(a);if(!i)throw new r.i6("NavbarSecondaryMenuContentProvider");const[,s]=i,l=(0,r.Ql)(n);return(0,o.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,o.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>r,t:()=>a});var o=n(7294);const r="navigation-with-keyboard";function a(){(0,o.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(r),"mousedown"===e.type&&document.body.classList.remove(r)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(r),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},6177:(e,t,n)=>{"use strict";n.d(t,{K:()=>s,M:()=>l});var o=n(7294),r=n(2263),a=n(1980);const i="q";function s(){return(0,a.Nc)(i)}function l(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,r.Z)(),{algolia:{searchPagePath:n}}=t;return(0,o.useCallback)((t=>`${e}${n}?${i}=${encodeURIComponent(t)}`),[e,n])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>c});var o=n(7294),r=n(412);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(){return r.Z.canUseDOM?window.innerWidth>i?a.desktop:a.mobile:a.ssr}const l=!1;function c(){const[e,t]=(0,o.useState)((()=>l?"ssr":s()));return(0,o.useEffect)((()=>{function e(){t(s())}const n=l?window.setTimeout(e,1e3):void 0;return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearTimeout(n)}}),[]),e}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>o});const o={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},1442:(e,t,n)=>{"use strict";function o(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>o})},3438:(e,t,n)=>{"use strict";n.d(t,{MN:()=>S,Wl:()=>m,_F:()=>v,cE:()=>p,hI:()=>_,jA:()=>g,lO:()=>x,oz:()=>k,s1:()=>y,vY:()=>E,xz:()=>f});var o=n(7294),r=n(6550),a=n(8790),i=n(143),s=n(373),l=n(4477),c=n(1116),u=n(7392),d=n(8596);const p=!!i._r;function f(e){const t=(0,l.E)();if(!e)return;const n=t.docs[e];if(!n)throw new Error(`no version doc found by id=${e}`);return n}function m(e){if(e.href)return e.href;for(const t of e.items){if("link"===t.type)return t.href;if("category"===t.type){const e=m(t);if(e)return e}}}function g(){const{pathname:e}=(0,r.TH)(),t=(0,c.V)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=w({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw new Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}const b=(e,t)=>void 0!==e&&(0,d.Mg)(e,t),h=(e,t)=>e.some((e=>v(e,t)));function v(e,t){return"link"===e.type?b(e.href,t):"category"===e.type&&(b(e.href,t)||h(e.items,t))}function w(e){let{sidebarItems:t,pathname:n,onlyCategories:o=!1}=e;const r=[];return function e(t){for(const a of t)if("category"===a.type&&((0,d.Mg)(a.href,n)||e(a.items))||"link"===a.type&&(0,d.Mg)(a.href,n)){return o&&"category"!==a.type||r.unshift(a),!0}return!1}(t),r}function y(){const e=(0,c.V)(),{pathname:t}=(0,r.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?w({sidebarItems:e.items,pathname:t}):null}function x(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,s.J)(e),r=(0,i.yW)(e);return(0,o.useMemo)((()=>(0,u.j)([t,n,r].filter(Boolean))),[t,n,r])}function k(e,t){const n=x(t);return(0,o.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),o=t.find((t=>t[0]===e));if(!o)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return o[1]}),[e,n])}function E(e,t){const n=x(t);return(0,o.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),o=t.find((t=>t.id===e));if(!o){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${(0,u.j)(t.map((e=>e.id))).join("\n- ")}`)}return o}),[e,n])}function _(e){let{route:t,versionMetadata:n}=e;const o=(0,r.TH)(),i=t.routes,s=i.find((e=>(0,r.LX)(o.pathname,e)));if(!s)return null;const l=s.sidebar,c=l?n.docsSidebars[l]:void 0;return{docElement:(0,a.H)(i),sidebarName:l,sidebarItems:c}}function S(e){return e.filter((e=>"category"!==e.type||!!m(e)))}},2128:(e,t,n)=>{"use strict";n.d(t,{p:()=>r});var o=n(2263);function r(e){const{siteConfig:t}=(0,o.Z)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}},1980:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>c,Rb:()=>s,_X:()=>l});var o=n(7294),r=n(6550),a=n(1688),i=n(902);function s(e){!function(e){const t=(0,r.k6)(),n=(0,i.zX)(e);(0,o.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function l(e){return function(e){const t=(0,r.k6)();return(0,a.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function c(e){const t=l(e)??"",n=function(){const e=(0,r.k6)();return(0,o.useCallback)(((t,n,o)=>{const r=new URLSearchParams(e.location.search);n?r.set(t,n):r.delete(t),(o?.push?e.push:e.replace)({search:r.toString()})}),[e])}();return[t,(0,o.useCallback)(((t,o)=>{n(e,t,o)}),[n,e])]}},7392:(e,t,n)=>{"use strict";function o(e,t){return void 0===t&&(t=(e,t)=>e===t),e.filter(((n,o)=>e.findIndex((e=>t(e,n)))!==o))}function r(e){return Array.from(new Set(e))}n.d(t,{j:()=>r,l:()=>o})},833:(e,t,n)=>{"use strict";n.d(t,{FG:()=>p,d:()=>u,VC:()=>f});var o=n(7294),r=n(6010),a=n(5742),i=n(226);function s(){const e=o.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(4996),c=n(2128);function u(e){let{title:t,description:n,keywords:r,image:i,children:s}=e;const u=(0,c.p)(t),{withBaseUrl:d}=(0,l.C)(),p=i?d(i,{absolute:!0}):void 0;return o.createElement(a.Z,null,t&&o.createElement("title",null,u),t&&o.createElement("meta",{property:"og:title",content:u}),n&&o.createElement("meta",{name:"description",content:n}),n&&o.createElement("meta",{property:"og:description",content:n}),r&&o.createElement("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&o.createElement("meta",{property:"og:image",content:p}),p&&o.createElement("meta",{name:"twitter:image",content:p}),s)}const d=o.createContext(void 0);function p(e){let{className:t,children:n}=e;const i=o.useContext(d),s=(0,r.Z)(i,t);return o.createElement(d.Provider,{value:s},o.createElement(a.Z,null,o.createElement("html",{className:s})),n)}function f(e){let{children:t}=e;const n=s(),a=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return o.createElement(p,{className:(0,r.Z)(a,i)},t)}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>i,Qc:()=>c,Ql:()=>l,i6:()=>s,zX:()=>a});var o=n(7294);const r=n(412).Z.canUseDOM?o.useLayoutEffect:o.useEffect;function a(e){const t=(0,o.useRef)(e);return r((()=>{t.current=e}),[e]),(0,o.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,o.useRef)();return r((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function l(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,o.useMemo)((()=>e),t.flat())}function c(e){return t=>{let{children:n}=t;return o.createElement(o.Fragment,null,e.reduceRight(((e,t)=>o.createElement(t,null,e)),n))}}},8022:(e,t,n)=>{"use strict";function o(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>o})},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>s});var o=n(7294),r=n(723),a=n(2263);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,a.Z)().siteConfig;return(0,o.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function o(e){return e.path===t&&!0===e.exact}function r(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(o)||e(t.filter(r).flatMap((e=>e.routes??[])))}(n)}({routes:r.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>f,OC:()=>l,RF:()=>d,o5:()=>p});var o=n(7294),r=n(412),a=n(2389),i=n(902);const s=o.createContext(void 0);function l(e){let{children:t}=e;const n=function(){const e=(0,o.useRef)(!0);return(0,o.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return o.createElement(s.Provider,{value:n},t)}function c(){const e=(0,o.useContext)(s);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const u=()=>r.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=c(),r=(0,o.useRef)(u()),a=(0,i.zX)(e);(0,o.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=u();a(e,r.current),r.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function p(){const e=c(),t=function(){const e=(0,o.useRef)({elem:null,top:0}),t=(0,o.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,o.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const o=t.getBoundingClientRect().top-n;return o&&window.scrollBy({left:0,top:o}),e.current={elem:null,top:0},{restored:0!==o}}),[]);return(0,o.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,o.useRef)(void 0),r=(0,o.useCallback)((o=>{t.save(o),e.disableScrollEvents(),n.current=()=>{const{restored:o}=t.restore();if(n.current=void 0,o){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,o.useLayoutEffect)((()=>{queueMicrotask((()=>n.current?.()))})),{blockElementScrollPositionUntilNextRender:r}}function f(){const e=(0,o.useRef)(null),t=(0,a.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function o(){const r=document.documentElement.scrollTop;(n&&r>e||!n&&rt&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>l,os:()=>s});var o=n(143),r=n(2263),a=n(373);const i="default";function s(e,t){return`docs-${e}-${t}`}function l(){const{i18n:e}=(0,r.Z)(),t=(0,o._r)(),n=(0,o.WS)(),l=(0,a.Oh)();const c=[i,...Object.keys(t).map((function(e){const o=n?.activePlugin.pluginId===e?n.activeVersion:void 0,r=l[e],a=t[e].versions.find((e=>e.isLast));return s(e,(o??r??a).name)}))];return{locale:e.currentLocale,tags:c}}},12:(e,t,n)=>{"use strict";n.d(t,{Nk:()=>d,WA:()=>u});var o=n(7294),r=n(1688);const a="localStorage";function i(e){let{key:t,oldValue:n,newValue:o,storage:r}=e;if(n===o)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,o,window.location.href,r),window.dispatchEvent(a)}function s(e){if(void 0===e&&(e=a),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,l||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),l=!0),null}var t}let l=!1;const c={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function u(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=s(t?.persistence);return null===n?c:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const o=n.getItem(e);n.setItem(e,t),i({key:e,oldValue:o,newValue:t,storage:n})}catch(o){console.error(`Docusaurus storage error, can't set ${e}=${t}`,o)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),i({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const o=o=>{o.storageArea===n&&o.key===e&&t(o)};return window.addEventListener("storage",o),()=>window.removeEventListener("storage",o)}catch(o){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,o),()=>{}}}}}function d(e,t){const n=(0,o.useRef)((()=>null===e?c:u(e,t))).current(),a=(0,o.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,r.useSyncExternalStore)(a,(()=>"undefined"==typeof window?null:n.get()),(()=>null)),n]}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var o=n(2263),r=n(6550),a=n(8780);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,o.Z)(),{pathname:l}=(0,r.TH)(),c=(0,a.applyTrailingSlash)(l,{trailingSlash:n,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:o}=e;return`${o?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var o=n(7294),r=n(6550),a=n(902);function i(e){const t=(0,r.TH)(),n=(0,a.D9)(t),i=(0,a.zX)(e);(0,o.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>r});var o=n(2263);function r(){return(0,o.Z)().siteConfig.themeConfig}},6278:(e,t,n)=>{"use strict";n.d(t,{L:()=>r});var o=n(2263);function r(){const{siteConfig:{themeConfig:e}}=(0,o.Z)();return e}},239:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var o=n(7294),r=n(8022),a=n(4996),i=n(6278);function s(){const{withBaseUrl:e}=(0,a.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,o.useCallback)((o=>{const a=new URL(o);if((0,r.F)(t,a.href))return o;const i=`${a.pathname+a.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:o}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[r]=e.split(/[#?]/),a="/"===r||r===o?r:(i=r,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(r,a)}},4143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},8780:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var r=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return o(r).default}});var a=n(4143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return a.getErrorCausalChain}})},6010:(e,t,n)=>{"use strict";function o(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;tr});const r=function(){for(var e,t,n=0,r="";n{"use strict";n.d(t,{lX:()=>y,q_:()=>j,ob:()=>f,PP:()=>T,Ep:()=>p});var o=n(7462);function r(e){return"/"===e.charAt(0)}function a(e,t){for(var n=t,o=n+1,r=e.length;o=0;p--){var f=i[p];"."===f?a(i,p):".."===f?(a(i,p),d++):d&&(a(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&r(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var s=n(8776);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,o=e.hash,r=t||"/";return n&&"?"!==n&&(r+="?"===n.charAt(0)?n:"?"+n),o&&"#"!==o&&(r+="#"===o.charAt(0)?o:"#"+o),r}function f(e,t,n,r){var a;"string"==typeof e?(a=function(e){var t=e||"/",n="",o="",r=t.indexOf("#");-1!==r&&(o=t.substr(r),t=t.substr(0,r));var a=t.indexOf("?");return-1!==a&&(n=t.substr(a),t=t.substr(0,a)),{pathname:t,search:"?"===n?"":n,hash:"#"===o?"":o}}(e),a.state=t):(void 0===(a=(0,o.Z)({},e)).pathname&&(a.pathname=""),a.search?"?"!==a.search.charAt(0)&&(a.search="?"+a.search):a.search="",a.hash?"#"!==a.hash.charAt(0)&&(a.hash="#"+a.hash):a.hash="",void 0!==t&&void 0===a.state&&(a.state=t));try{a.pathname=decodeURI(a.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+a.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(a.key=n),r?a.pathname?"/"!==a.pathname.charAt(0)&&(a.pathname=i(a.pathname,r.pathname)):a.pathname=r.pathname:a.pathname||(a.pathname="/"),a}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,o,r){if(null!=e){var a="function"==typeof e?e(t,n):e;"string"==typeof a?"function"==typeof o?o(a,r):r(!0):r(!1!==a)}else r(!0)},appendListener:function(e){var n=!0;function o(){n&&e.apply(void 0,arguments)}return t.push(o),function(){n=!1,t=t.filter((function(e){return e!==o}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),o=0;ot?n.splice(t,n.length-t,r):n.push(r),d({action:o,location:r,index:t,entries:n})}}))},replace:function(e,t){var o="REPLACE",r=f(e,t,g(),y.location);u.confirmTransitionTo(r,o,n,(function(e){e&&(y.entries[y.index]=r,d({action:o,location:r}))}))},go:w,goBack:function(){w(-1)},goForward:function(){w(1)},canGo:function(e){var t=y.index+e;return t>=0&&t{"use strict";var o=n(9864),r={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function l(e){return o.isMemo(e)?i:s[e.$$typeof]||r}s[o.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[o.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,o){if("string"!=typeof n){if(m){var r=f(n);r&&r!==m&&e(t,r,o)}var i=u(n);d&&(i=i.concat(d(n)));for(var s=l(t),g=l(n),b=0;b{"use strict";e.exports=function(e,t,n,o,r,a,i,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,a,i,s],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},2497:(e,t,n)=>{"use strict";n.r(t)},2295:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var o,r;o=function(){var e,t,n={version:"0.2.0"},o=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function r(e,t,n){return en?n:e}function a(e){return 100*(-1+e)}function i(e,t,n){var r;return(r="translate3d"===o.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===o.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+t+"ms "+n,r}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(o[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=r(e,o.minimum,1),n.status=1===e?null:e;var a=n.render(!t),c=a.querySelector(o.barSelector),u=o.speed,d=o.easing;return a.offsetWidth,s((function(t){""===o.positionUsing&&(o.positionUsing=n.getPositioningCSS()),l(c,i(e,u,d)),1===e?(l(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){l(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),o.trickleSpeed)};return o.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*r(Math.random()*t,.1,.95)),t=r(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*o.trickleRate)},e=0,t=0,n.promise=function(o){return o&&"resolved"!==o.state()?(0===t&&n.start(),e++,t++,o.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=o.template;var r,i=t.querySelector(o.barSelector),s=e?"-100":a(n.status||0),c=document.querySelector(o.parent);return l(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),o.showSpinner||(r=t.querySelector(o.spinnerSelector))&&f(r),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(o.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function o(t){var n=document.body.style;if(t in n)return t;for(var o,r=e.length,a=t.charAt(0).toUpperCase()+t.slice(1);r--;)if((o=e[r]+a)in n)return o;return t}function r(e){return e=n(e),t[e]||(t[e]=o(e))}function a(e,t,n){t=r(t),e.style[t]=n}return function(e,t){var n,o,r=arguments;if(2==r.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&a(e,n,o);else a(e,r[1],r[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),o=n+t;c(n,t)||(e.className=o.substring(1))}function d(e,t){var n,o=p(e);c(e,t)&&(n=o.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(r="function"==typeof o?o.call(t,n,t,e):o)||(e.exports=r)},7418:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(r){return!1}}()?Object.assign:function(e,r){for(var a,i,s=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),l=1;l{var o=n(5826);e.exports=f,e.exports.parse=a,e.exports.compile=function(e,t){return s(a(e,t),t)},e.exports.tokensToFunction=s,e.exports.tokensToRegExp=p;var r=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function a(e,t){for(var n,o=[],a=0,i=0,s="",u=t&&t.delimiter||"/";null!=(n=r.exec(e));){var d=n[0],p=n[1],f=n.index;if(s+=e.slice(i,f),i=f+d.length,p)s+=p[1];else{var m=e[i],g=n[2],b=n[3],h=n[4],v=n[5],w=n[6],y=n[7];s&&(o.push(s),s="");var x=null!=g&&null!=m&&m!==g,k="+"===w||"*"===w,E="?"===w||"*"===w,_=n[2]||u,S=h||v;o.push({name:b||a++,prefix:g||"",delimiter:_,optional:E,repeat:k,partial:x,asterisk:!!y,pattern:S?c(S):y?".*":"[^"+l(_)+"]+?"})}}return i{"use strict";n.d(t,{Z:()=>a});var o=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},o={util:{encode:function e(t){return t instanceof r?new r(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);E+=k.value.length,k=k.next){var _=k.value;if(t.length>e.length)return;if(!(_ instanceof r)){var S,j=1;if(v){if(!(S=a(x,E,e,h))||S.index>=e.length)break;var C=S.index,T=S.index+S[0].length,A=E;for(A+=k.value.length;C>=A;)A+=(k=k.next).value.length;if(E=A-=k.value.length,k.value instanceof r)continue;for(var L=k;L!==t.tail&&(Ad.reach&&(d.reach=O);var I=k.prev;if(P&&(I=l(t,I,P),E+=P.length),c(t,I,j),k=l(t,I,new r(p,b?o.tokenize(R,b):R,w,R)),N&&l(t,k,N),j>1){var M={cause:p+","+m,reach:O};i(e,t,n,k.prev,E,M),d&&M.reach>d.reach&&(d.reach=M.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function l(e,t,n){var o=t.next,r={value:n,prev:t,next:o};return t.next=r,o.prev=r,e.length++,r}function c(e,t,n){for(var o=t.next,r=0;r"+a.content+""},o}(),r=o;o.default=o,r.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},r.languages.markup.tag.inside["attr-value"].inside.entity=r.languages.markup.entity,r.languages.markup.doctype.inside["internal-subset"].inside=r.languages.markup,r.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(r.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:r.languages[t]},n.cdata=/^$/i;var o={"included-cdata":{pattern://i,inside:n}};o["language-"+t]={pattern:/[\s\S]+/,inside:r.languages[t]};var a={};a[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:o},r.languages.insertBefore("markup","cdata",a)}}),Object.defineProperty(r.languages.markup.tag,"addAttribute",{value:function(e,t){r.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:r.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),r.languages.html=r.languages.markup,r.languages.mathml=r.languages.markup,r.languages.svg=r.languages.markup,r.languages.xml=r.languages.extend("markup",{}),r.languages.ssml=r.languages.xml,r.languages.atom=r.languages.xml,r.languages.rss=r.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},o={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:o},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:o},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:o.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:o.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var r=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],a=o.variable[1].inside,i=0;i]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},r.languages.c=r.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),r.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),r.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},r.languages.c.string],char:r.languages.c.char,comment:r.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:r.languages.c}}}}),r.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete r.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(r),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(r),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var o={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},r={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:o,number:r,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:o,number:r})}(r),r.languages.javascript=r.languages.extend("clike",{"class-name":[r.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),r.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,r.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:r.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:r.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:r.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:r.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:r.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),r.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:r.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),r.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),r.languages.markup&&(r.languages.markup.tag.addInlined("script","javascript"),r.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),r.languages.js=r.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(r),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,o="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",r=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return o})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return o}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return o})).replace(/<>/g,(function(){return"(?:"+r+"|"+a+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(a),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(r),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var o=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,r=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return o})),a=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+r+a+"(?:"+r+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+r+a+")(?:"+r+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(o),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+r+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+r+"$"),inside:{"table-header":{pattern:RegExp(o),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,o=t.length;n",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(r),r.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:r.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},r.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var s=p(/^\{$/,/^\}$/);if(-1===s)continue;for(var l=n;l=0&&f(c,"variable-input")}}}}function u(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,o=t.inside.interpolation,r=o.inside["interpolation-punctuation"],a=o.pattern.source;function i(t,o){if(e.languages[t])return{pattern:RegExp("((?:"+o+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function l(t,n,o){var r={code:t,grammar:n,language:o};return e.hooks.run("before-tokenize",r),r.tokens=e.tokenize(r.code,r.grammar),e.hooks.run("after-tokenize",r),r.tokens}function c(t){var n={};n["interpolation-punctuation"]=r;var a=e.tokenize(t,n);if(3===a.length){var i=[1,1];i.push.apply(i,l(a[1],e.languages.javascript,"javascript")),a.splice.apply(a,i)}return new e.Token("interpolation",a,o.alias,t)}function u(t,n,o){var r=e.tokenize(t,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),i=0,u={},d=l(r.map((function(e){if("string"==typeof e)return e;for(var n,r=e.content;-1!==t.indexOf(n=s(i++,o)););return u[n]=r,n})).join(""),n,o),p=Object.keys(u);return i=0,function e(t){for(var n=0;n=p.length)return;var o=t[n];if("string"==typeof o||"string"==typeof o.content){var r=p[i],a="string"==typeof o?o:o.content,s=a.indexOf(r);if(-1!==s){++i;var l=a.substring(0,s),d=c(u[r]),f=a.substring(s+r.length),m=[];if(l&&m.push(l),m.push(d),f){var g=[f];e(g),m.push.apply(m,g)}"string"==typeof o?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):o.content=m}}else{var b=o.content;Array.isArray(b)?e(b):e([b])}}}(d),new e.Token(o,d,"language-"+o,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var o=0,r=n.length;o]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(r),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],o=0;o*\.{3}(?:[^{}]|)*\})/.source;function a(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return o})).replace(//g,(function(){return r})),RegExp(e,t)}r=a(r).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=a(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:a(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:a(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""},s=function(t){for(var n=[],o=0;o0&&n[n.length-1].tagName===i(r.content[0].content[1])&&n.pop():"/>"===r.content[r.content.length-1].content||n.push({tagName:i(r.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===r.type&&"{"===r.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===r.type&&"}"===r.content?n[n.length-1].openedBraces--:a=!0),(a||"string"==typeof r)&&n.length>0&&0===n[n.length-1].openedBraces){var l=i(r);o0&&("string"==typeof t[o-1]||"plain-text"===t[o-1].type)&&(l=i(t[o-1])+l,t.splice(o-1,1),o--),t[o]=new e.Token("plain-text",l,null,l)}r.content&&"string"!=typeof r.content&&s(r.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||s(e.tokens)}))}(r),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var o=t[n],r=[];/^\w+$/.test(n)||r.push(/\w+/.exec(n)[0]),"diff"===n&&r.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+o+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:r,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(r),r.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},r.languages.go=r.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),r.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete r.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,o,r,a){if(n.language===o){var i=n.tokenStack=[];n.code=n.code.replace(r,(function(e){if("function"==typeof a&&!a(e))return e;for(var r,s=i.length;-1!==n.code.indexOf(r=t(o,s));)++s;return i[s]=e,r})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,o){if(n.language===o&&n.tokenStack){n.grammar=e.languages[o];var r=0,a=Object.keys(n.tokenStack);!function i(s){for(var l=0;l=a.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=a[r],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(o,u),m=p.indexOf(f);if(m>-1){++r;var g=p.substring(0,m),b=new e.Token(o,e.tokenize(d,n.grammar),"language-"+o,d),h=p.substring(m+f.length),v=[];g&&v.push.apply(v,i([g])),v.push(b),h&&v.push.apply(v,i([h])),"string"==typeof c?s.splice.apply(s,[l,1].concat(v)):c.content=v}}else c.content&&i(c.content)}return s}(n.tokens)}}}})}(r),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(r),r.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},r.languages.webmanifest=r.languages.json,r.languages.less=r.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),r.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),r.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},r.languages.objectivec=r.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete r.languages.objectivec["class-name"],r.languages.objc=r.languages.objectivec,r.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},r.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},r.languages.python["string-interpolation"].inside.interpolation.inside.rest=r.languages.python,r.languages.py=r.languages.python,r.languages.reason=r.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),r.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete r.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(r),r.languages.scss=r.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),r.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),r.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),r.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),r.languages.scss.atrule.inside.rest=r.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},o={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};o.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:o}},o.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:o}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:o}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:o}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:o}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:o.interpolation}},rest:o}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:o.interpolation,comment:o.comment,punctuation:/[{},]/}},func:o.func,string:o.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:o.interpolation,punctuation:/[{}()\[\];:.]/}}(r),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(r),r.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const a=r},9901:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const o=n(9901),r=n(9642),a=new Set;function i(e){void 0===e?e=Object.keys(o.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...a,...Object.keys(Prism.languages)];r(o,e,t).load((e=>{if(!(e in o.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),a.add(e)}))}i.silent=!1,e.exports=i},6726:(e,t,n)=>{var o={"./":2885};function r(e){var t=a(e);return n(t)}function a(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}r.keys=function(){return Object.keys(o)},r.resolve=a,e.exports=r,r.id=6726},6500:(e,t,n)=>{var o={"./":2885};function r(e){var t=a(e);return n(t)}function a(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}r.keys=function(){return Object.keys(o)},r.resolve=a,e.exports=r,r.id=6500},9642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,o=e.length;n "));var s={},l=e[o];if(l){function c(t){if(!(t in e))throw new Error(o+" depends on an unknown component "+t);if(!(t in s))for(var i in r(t,a),s[t]=!0,n[t])s[i]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[o]=s,a.pop()}}return function(e){var t=n[e];return t||(r(e,o),t=n[e]),t}}function r(e){for(var t in e)return!0;return!1}return function(a,i,s){var l=function(e){var t={};for(var n in e){var o=e[n];for(var r in o)if("meta"!=r){var a=o[r];t[r]="string"==typeof a?{title:a}:a}}return t}(a),c=function(e){var n;return function(o){if(o in e)return o;if(!n)for(var r in n={},e){var a=e[r];t(a&&a.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+r+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+r+" because it is a component.");n[t]=r}))}return n[o]||o}}(l);i=i.map(c),s=(s||[]).map(c);var u=n(i),d=n(s);i.forEach((function e(n){var o=l[n];t(o&&o.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=o(l),m=u;r(m);){for(var g in p={},m){var b=l[g];t(b&&b.modify,(function(e){e in d&&(p[e]=!0)}))}for(var h in d)if(!(h in u))for(var v in f(h))if(v in u){p[h]=!0;break}for(var w in m=p)u[w]=!0}var y={getIds:function(){var e=[];return y.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,o,r){var a=r?r.series:void 0,i=r?r.parallel:e,s={},l={};function c(e){if(e in s)return s[e];l[e]=!0;var r,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)r=o(e);else{var p=i(u.map((function(e){var t=c(e);return delete l[e],t})));a?r=a(p,(function(){return o(e)})):o(e)}return s[e]=r}for(var u in n)c(u);var d=[];for(var p in l)d.push(s[p]);return i(d)}(f,u,t,n)}};return y}}();e.exports=t},2703:(e,t,n)=>{"use strict";var o=n(414);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:r};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var o=n(7294),r=n(7418),a=n(3840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n

CNCF Zero to Merge - Your first step towards Open-Source

· 6 min read
Rajdeep Pal

CNCF Zero to Merge is a program by the Cloud Native Computing Foundation that helps newcomers make their first open-source contribution. It aims to lower the barrier for people who have never contributed to open source before, especially those from underrepresented groups. This blog summarizes my experience in the first-ever edition of the program


CNCF Zero to Merge - Your first step towards Open-Source

CNCF LOGO

Introduction​

This blog summarizes my experience with the Cloud Native Computing Foundation's first edition of the newly launched Zero to Merge Incubator Program. This program was launched with the primary aim of getting new folks involved in Open-Source. I learned about this program from one of the LinkedIn posts by Rohit Ghumare. If you are willing to register for the program, you can check out the link here. CNCF will not conduct any such programs as of this year, but you should keep an eye on the page for future proposals.

The CNCF Zero to Merge Program is a 4-week long program with 2 sessions per week. According to the Indian Standard Time, the sessions were held on Monday and Thursday from 9:30 p.m. to 10:30 p.m. each week.

During the program​

Week 1 Session 1: The initial session of the program's first week served as an orientation, acquainting participants with the program itself, its instructor, and the schedule. This session predominantly centered on key topics, including an introduction to open-source principles and the CNCF (Cloud Native Computing Foundation). It also covered the art of selecting suitable open-source projects for contribution and the necessary prerequisites for effective participation in the open-source community.

Week 1 Session 2: During the second session of the first week, participants focused on acquiring knowledge about essential tools like CLOTributor for narrowing down project options that align with individual preferences. The session also delved into important concepts such as GitHub and Git basics, GitHub Actions, and expanded insights into The Linux Foundation.

Week 2 Session 1: In the second week of our CNCF program, we delved into the history and progress of CNCF projects, exploring what motivates individuals to contribute to open-source initiatives. Our instructor, Taylor Dolezal, left a lasting impression with his fantastic and approachable teaching style. In addition to valuable insights, he provided a practical demonstration of the entire process, from forking a repository to creating a pull request (PR).

Week 2 Session 2: The session was centered around exploring the topics of Cloud Native Evolution and Cloud Native Trends, featuring active engagement through a question-and-answer format where the instructor either provided answers or directed participants to relevant articles and white papers. Towards the end, attendees were tasked with homework, which involved finding a project that aligned with their interests in the subject matter.

Week 3 Session 1: In the third week, participants were allowed to take the spotlight by presenting their screens. They were encouraged to share their involvement in various projects, showcasing their approach to addressing the issues at hand and detailing their interactions with project maintainers.

Week 3 Session 2: This session was primarily intended for clearing doubts and addressing any questions or uncertainties participants may have had.

Week 4 Session 1: The first session of the last week had the following agenda: Hot seat opportunity: During this segment, participants had the chance to share information about their projects, issues, or the specific focus of their pull requests, offering an opportunity for discussion and feedback. Live lesson: The session included a live lesson where the participants reviewed the CNCF (Cloud Native Computing Foundation) website and learned how to navigate through its resources and additional learning materials.

Week 4 Session 2: The program has concluded, marking a moment of celebration, friendly conversations, and discussions about the future steps for all the attendees.

Key Takeaways from the Program​

CNCF

CNCF Zero to Merge is a great program for beginners to open source. It provides guidance and mentorship to help you contribute to open source for the first time.

Here's a summary of the process:

1. Find a Project: Choose a CNCF incubating project that interests you and has welcoming maintainers.

2. Understand the Issue: Read the issue or bug report you want to work on thoroughly and clarify any doubts with the maintainers.

3. Fork the Repository: Create a fork of the project's repository on your GitHub account to work on your changes separately.

4. Make a Branch: Create a new branch in your fork to isolate your work and make it easier to create a pull request later.

5. Make the Changes: Code the fix or feature as described in the issue. You can do this locally and then push the changes to your forked repository.

6. Test Your Changes: Run any tests and commands mentioned in the project to ensure your changes work as intended. You may need to write new tests.

7. Create a Pull Request: Using GitHub, create a pull request from your branch to the upstream repository. The maintainers will review your code and provide feedback.

8. Iterate Based on Feedback: Make any requested changes based on the review and commit these changes to your branch so that the pull request updates automatically.

9. Merge: Once the maintainers approve your changes, they will merge your pull request, and your contribution becomes part of the project.

10. Celebrate: Congratulations, you've successfully made your first open-source contribution! You are now an official contributor to the project.

This program is a great way to get started with open source and can be very rewarding. It's important to be patient and open to feedback from maintainers, as it helps improve your skills and contribute positively to the project.

Conclusion​

This is a great step-by-step guide for making your first open-source contribution to a CNCF incubating project. It's important to follow these steps carefully to ensure a smooth and successful contribution experience.

The CNCF Zero to Merge initiative is a great way for newcomers to open source to get involved and make meaningful contributions. By focusing on small, self-contained issues that need fixing, new contributors can learn about the process of contributing to open-source projects and gain confidence. With proper mentorship and guidance, new contributors can progress from fixing typos to making more substantial code contributions that improve the project.

- - + + \ No newline at end of file diff --git a/blog/Cloud-gaming/index.html b/blog/Cloud-gaming/index.html index 7b6fb832..8160fe55 100644 --- a/blog/Cloud-gaming/index.html +++ b/blog/Cloud-gaming/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Exploring the Future of Gaming- Cloud Gaming Unveiled

· 5 min read
Om Hinge

Hey there, fellow gamers! Today, we're diving into the fascinating world of cloud gaming, a technology that's changing the way we play and enjoy our favorite titles. In this article, we'll break down the concept of cloud gaming, its evolution, and its promising future.

Introduction to Cloud Gaming​

Imagine playing high-quality video games without the need for expensive gaming hardware or the hassle of downloading and installing massive game files. That's the magic of cloud gaming! It's like Netflix for gamers, where you can instantly access and play games over the internet without worrying about hardware requirements.

Most modern games demand a hefty amount of storage space and powerful hardware to run smoothly. Think about titles like Call of Duty's Warzone, which takes up over 1000GB of storage. To play these games with the best experience, you'd need a high-end PC or gaming console. But what if there was a more affordable alternative?

Cloud Gaming Demonstration by playing Cyberpunk 2077 on mobile

How Cloud Gaming Works​

Cloud Gaming flow

Cloud gaming operates within the realm of cloud computing. Instead of storing game files on your local device, they're hosted and processed on powerful remote servers in data centers. Here's how it works in a nutshell:

  • Remote Servers: Powerful servers host and run the games, eliminating the need for you to download and install them on your device.

  • Streaming Gameplay: Similar to streaming services like Netflix, cloud gaming sends a video stream of the gameplay over the internet to your device.

  • Input Control: Your inputs (the buttons you press and the moves you make) are sent to the server, where the game responds accordingly. This allows you to play even on low-end devices.

While cloud gaming offers incredible convenience, it's important to note that it can introduce some input lag, depending on factors like your internet connection stability and the distance between you and the server.

Cloud Gaming is one of the Best Examples to showcase the power of Cloud Computing.

The History and Future of Cloud Gaming​

In the past, cloud gaming faced numerous challenges, including network issues. Google's attempt with Google Stadia was ambitious but struggled due to connectivity problems. Other giants like Amazon and Microsoft also entered the arena with Amazon Luna and Xbox cloud gaming.

However, the future of cloud gaming looks bright, especially in countries like India. Gaming is growing rapidly, and cloud gaming provides an affordable platform for those unable to invest in high-end gaming hardware. The potential to earn rewards through gaming is also on the rise, further boosting its popularity.

The primary challenge facing cloud gaming today is network-related issues, but providers are actively working on solutions to make it accessible to more users.

We can say Cloud Gaming was just the first step for the cloud computing service to even non-tech users. Google is developing & testing Cloud Quantum computing so that one day everyone can access the Incredible power of Quantum computers without the need for a quantum rig, which might be bigger than most of our houses.

cloud quantum computing

Advantages and Drawbacks of Cloud Gaming​

Cloud gaming offers several advantages, including:

  • Universal Platform: You can play games on any device with an internet connection, from consoles to smartphones.

  • Cost-Efficiency: No need for expensive hardware, as the processing is done on remote servers.

  • Portability: Play on the go without worrying about installation and setup.

However, it's not without its drawbacks:

  • Internet Dependency: A stable internet connection is crucial for a smooth experience.

  • Input Lag: Some games may suffer from input delay due to server processing.

  • Limited Awareness: Many people are still unaware of cloud gaming, and few providers exist compared to traditional gaming options.

Current Status of Cloud Gaming​

Several cloud gaming services are making waves in the industry:

  • Nvidia GeForce Now: This service is known for its low system requirements, compatibility with various devices, and a free trial period.
  • XBox Game Cloud: Known for Various game titles for free to play in the subscription of Game Pass.
  • JioGames Cloud: Building the Cloud gaming culture & infrastructure in India at a reasonable rate.

Is Cloud Gaming Worth It?​

While cloud gaming shows immense potential, it's still in its early stages. Input lag and connectivity issues can be frustrating, especially for competitive gamers. Traditional gaming setups remain a popular choice. However, as technology advances, cloud gaming has the potential to become the future of gaming in the coming decade.

In conclusion, cloud gaming is a game-changer with the potential to democratize gaming by making it accessible to more players. As it evolves and overcomes its current challenges, we can expect cloud gaming to reshape the gaming landscape in the near future.

References:​

- - + + \ No newline at end of file diff --git a/blog/archive/index.html b/blog/archive/index.html index 59336a8d..b5d66bd9 100644 --- a/blog/archive/index.html +++ b/blog/archive/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Archive

Archive

2023

- - + + \ No newline at end of file diff --git a/blog/blog-posting-guidelines/index.html b/blog/blog-posting-guidelines/index.html index ccc25e37..5ecf1093 100644 --- a/blog/blog-posting-guidelines/index.html +++ b/blog/blog-posting-guidelines/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

General Posting Guidelines

· 5 min read
Gaurang Vishwakarma
Vishal Rawat

Welcome to our first blog​

Welcome everyone to TCET Open Source's Blog Section. Here, we promote blogging in the student community. Talk about ongoing trends in tech, student life at TCET, and any topic you feel would feel great for this blog.

note

This particular blog will have recurring adjustments. Last revised on Oct 1st, 2023.

General Blog Guidlines​

Here we define all the basic guidlines a blog should follow in TCET Open Source Blogs.

Clone the project​

For being able to contribute anywhere, one must be able to clone and run projects. You can visit this tutorial to learn how to work on this project.

Basic GitHub commands​

For any contributor it is very necessary to understand basic GitHub commands to begin with. There is a resources forum on TCET - Open Source Discord server where you can find relevant references for the same. There can also be a blog post regarding these commands in the future!

Understand file structure​

Once you have cloned the project in your local storage, you will need to perform the following:

  1. Open the project directory and navigate to blog/.
  2. Create a folder for your blog post.
  • The folder should have the following name format:
yyyy-mm-dd-blog-title
  • Here, the date stands for the date when the post is supposed to be released. The blog title should be relevant to the content within the post.
  1. Within the folder, create index.mdx. This file will serve as a text document where you can format your content which will reflect in the final post.

Understand markdown files and syntax​

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. The index.mdx file created in your blog folder is a markdown file, similar to how index.html can be an HTML file. It is very essential for a blog contributor to understand the basic syntax of markdown. Resource forum in our Discord server covers basic syntax of these files.

First steps​

Before moving any further, a blogger must know the following:

  • slug - It is the last part of the URL address that serves as a unique identifier of the blog post.
  • title - The main title of the blog post. Note that the blog title should be relevant to the content within the post.
  • authors - The list of authors who have worked on the blog post. Look below to understand how to add authors.
  • tags - It highlights the key words of the post to boost it's visibility on the internet and improve the SEO.

These four information are necessary to be present in every post. Without these, no posts will be approved and merged within the blog.

Mention Authors

Authors can be added in two ways.

  • Internally in index.mdx (recommended, for outside organization contributors)
  • In the authors.yml file. (TCET Open Source Members only)

If you are not a member of the organization, you can simply append your author(s) in the following way:

authors:
  - name: Name of Author 1
    title: Designation, Post or About
    url: https://github.com/author1
    image_url: https://github.com/author1.png
  - name: Name of Author 2
    title: Designation, Post or About
    url: https://github.com/author1
    image_url: https://github.com/author2.png

Important things to take note of:​

  • url: can also be an authors' personal website or portfolio.
  • image_url: requires a user to have a profile pic on their Github Account. We recommend to append a Github Profile Icon.

Adding images​

Tired of good ol' textbook nerdy look on your post? Introducing: images. Images are a great way to keep the reader's attention to your posts, and now you can do that very easily:

  1. The image must be present within your blog folder. If it isn't, save the image in your blog folder.
  2. To add the image within your post, use the following syntax:
![Alt text](image.png)
  • Here, image.png stands for the name of the image you have in the blog directory. Markdown supports a great amount of image formats, ranging from png, jpg, svg, and even gifs.
WONDERING

Is gif pronounced gif or jif? Something to ponder upon.

Utilizing truncate​

Many bloggers have many different ways to write their blogs. Many start off with a nice paragraph, some start off with images, and some do both! All blogging practices are welcome in the Organization. However it is important to truncate.

Truncate is a custom breakpoint introduced in the blog to identify how much part of the blog should be visible in the feed. It cuts off the rest of the blog which can be read further by opening the blog itself. Here's a good example of how to use it:

This is a blogpost
Hello and welcome to my blogpost.
Today we will be covering everything you can imagine! 
JAM Stack, Web3, ML, Data Science, my favourite food, Cybersecurity, and much more. 
Sounds like a hefty lot, and it would be embarassing to flood out the entire blogs feed. 
This might be a decent place to cut the rest of the blog out!

<!--truncate-->

Here's where the rest of the blog content goes

Hence in the output, only the above paragraph is visible on the feed. The rest of the blog would be visible once the viewer opens your blog.

Congratulations​

Following these steps and points, you will be able to create a beautiful blog post. It's final structure would look something like this:

Alt text

With a fresh blog post ready, you can now finally create a pull request to reflect your post on our blog here!

Looking forward to new content from you all. Have fun and go contribute something great!

- - + + \ No newline at end of file diff --git a/blog/breaking-the-ice-open-source/index.html b/blog/breaking-the-ice-open-source/index.html index 820888d6..624ebcf4 100644 --- a/blog/breaking-the-ice-open-source/index.html +++ b/blog/breaking-the-ice-open-source/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Breaking The Ice - Open Source

· 4 min read
Vishal Rawat

Project management is a wild way to make sure things are progressing as they should. There is a project management technique for everything. Well, almost everything. I haven't found a project managing concept to overcome my feelings of procrastination. Someone might create it one day.

What really is Open Source?​

If you're the engineering type of person that tackles humanity's problems and urgent needs by bringing together an entire community and building a "project" with them, you'll want to know about Open source. Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.

Here it is again in bigger letters, for impact:

Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.​

And now you know what open source is. In theory, this blog post could be done!

Beyond the marketing standpoint​

Technology is a concept which is ever-changing in how it is defined, its magnitude and how we as engineers develop it. In the world of technology we always find "buzz words" which reflect the recent advancements which are so efficient that they are slowly brought within the industry as a standard way of working on projects, as a team.

One such "buzz word" in the area of software development and project management is open source. Open source is a way of working on a software typically developed in a public, collaborative manner, with the source code made freely available to anyone who wants to use, modify, or distribute it. The term "open source" was coined in 1998 by a group of people in the software industry who wanted to create a new model of software development that was more collaborative and community-driven.

Open source software is often developed and maintained by a community of volunteers and contributors, who work together to improve the software and fix bugs. Consider your homework: a dry document which contains things here and there which you know is very incomplete. If you have a good enough personality (which I don't), you send this document to all your classmates who start doing bits of your homework.

The result? A fine specimen of a document which the entire class can show to your teachers for great marks! What you just did here was open sourcing your homework and let your student community work on it to create a more appealing document which is now complete.

But open source doesn't stop there​

Imagine your homework to be your project, your classmates to be your community. This community observes your project and suggests various improvements within it. Be it suggesting simple changes of changing the fonts or re-working the already existing complex APIs and queries.

Example of suggestions
A simple conversation between a contributor and a project developer

Another way to look at open source can be building the big Lego City together, block by block. Everyone can add their own pieces to what has been constructed so far and everyone can see how the city is made. In this way, everyone can make the city better and use it how they want.

Software Engineers
Budding software engineers collaborating to build their project

Open source is a great way to bring like-minded developers together. Everybody around you, be a fresher student or an industry experienced individual, has had to encounter with open source technologies without even realizing it. From something we daily use like Android to Linux: the operating system used by many corporates and tech giants, there's no saying what the next big thing will be.

Open Source
Python, Dart, React, MongoDB, even this text box is open source

That's about the gist of what I wished to express regarding open source. Surely that's not everything but I do look forward to go in-depth into this topic and talk about various different things which excite me! Do look forward to upcoming blogposts and reach me out for any constructive criticism, if any, for the future blogposts.

- - + + \ No newline at end of file diff --git a/blog/dive-into-web-design/index.html b/blog/dive-into-web-design/index.html index a8ecf4f5..f5fe22c3 100644 --- a/blog/dive-into-web-design/index.html +++ b/blog/dive-into-web-design/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Dive into Web Design 🖌️ | Learn the Mental Model for converting Designs into Code

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.
- - + + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 4e6ad9ce..5bc4fc17 100644 --- a/blog/index.html +++ b/blog/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.

· 5 min read
Aadil Rayeen

Artificial Intelligence (AI) is becoming more and more crucial in influencing how we work and live in today's quickly changing technology landscape. Automation is one of the most interesting uses of AI because it has the ability to boost productivity, streamline procedures, and usher in a smarter era. We'll look at the main aspects of AI automation in this post.

- - + + \ No newline at end of file diff --git a/blog/intro-to-ai-automation/index.html b/blog/intro-to-ai-automation/index.html index e9c3c7fb..cf52a94f 100644 --- a/blog/intro-to-ai-automation/index.html +++ b/blog/intro-to-ai-automation/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

AI Automation Odyssey: Navigating the Future of Work and Innovation

· 5 min read
Aadil Rayeen

Artificial Intelligence (AI) is becoming more and more crucial in influencing how we work and live in today's quickly changing technology landscape. Automation is one of the most interesting uses of AI because it has the ability to boost productivity, streamline procedures, and usher in a smarter era. We'll look at the main aspects of AI automation in this post.


AI Automation
Automation

What is AI Automation ?​

  • Artificial Intelligence (AI) automation is the use of machine learning and artificial intelligence to carry out activities automatically.
  • By minimizing human mistake and working nonstop, it achieves tremendous efficiency gains that lower costs and increase profitability.
  • Simple rule-based processes to more complicated, adaptive, and intelligent behaviors can all be automated.
  • Basic purpose of AI automation is to use AI capabilities to make tasks more efficient, accurate, and cost-effective.
  • This technology can process enormous amounts of data, make predictions about the future, and customize user experiences.

Power of AI Automation​

AI automation has the capacity to completely alter industries and redefine how we live and work. It improves customer service, supports decision-making, and encourages innovation while being accessible 24/7. AI automation is a versatile force with broad ramifications across industries as it improves resource allocation, simplifies operations, and reduces risks. Its capacity to boost human potential and promote ongoing improvement highlights its crucial role in determining the course of the future. The nexus of Automation and Artificial Intelligence (AI) has expanded quickly, spawning cutting-edge tactics that promise to fundamentally transform industries and expedite procedures. This technology is a game-changer in many industries because it can undertake repetitive, time-consuming jobs with higher accuracy, consistency, and speed than people.

Affect of AI Automation on Jobs

Evolution of AI Automation​

AI automation has come a long way from basic rule-based processes. Today, it combines machine learning, natural language processing, and other AI techniques to deliver more sophisticated and adaptive solutions. Here are some advanced AI automation strategies:

Cognitive Automation
AI and human intelligence are used in cognitive automation to simulate human thought processes. It can make judgments, comprehend unstructured data, and even pick up new information as it is input. In industries like healthcare, where it may help with diagnosis and treatment suggestions, this technology is extremely beneficial.
Predictive Maintenance
Machine learning algorithms are used in AI-powered predictive maintenance to predict when equipment will break down. By just maintaining machines as needed, this aids businesses in avoiding unanticipated downtime and lowering maintenance expenses.
Conversational AI
Natural language processing is used by conversational AI, which is frequently found in chatbots and virtual assistants, to engage in discussions that are human-like. This is extremely helpful for increasing user experiences, automating regular enquiries, and improving customer support.
Robotic Process Automation (RPA)
Routine, rule-based processes across numerous applications are automated by RPA. In order to eliminate human data entry and boost efficiency, it is commonly utilized in finance, HR, and logistics.

Benefits​

Here are some of the ways AI automation can benefit your organization :

AI automation is not just about cost savings and efficiency; it's about reshaping the very nature of work. The future of work, characterized by automation, presents several key facets:

  • Innovation: As AI automation handles routine tasks, human workers can focus on more creative, strategic, and innovative endeavors, driving progress and innovation.

  • Job Evolution: The workforce will see a shift in the nature of jobs. While some tasks become automated, new roles related to AI and automation will emerge.

  • Continuous Learning: The future workforce will need to embrace lifelong learning and adaptability to remain relevant in an ever-changing job market.

  • Ethical Considerations: As AI automation continues to expand, ethical considerations related to bias, transparency, and accountability become paramount.

Conclusion​

To summarize, the AI Automation Odyssey is a thrilling and revolutionary adventure with enormous potential to shape the future of work and creativity. The value of AI automation rests in its capacity to improve productivity, decrease errors, save money, and promote innovation across multiple industries. As its influence grows, the workforce must adapt to changing responsibilities and the continual requirement for lifelong learning. Ethical considerations are vital, and ethical AI automation deployment is required to ensure that it benefits society as a whole. The future of work is changing, and the opportunity for creativity is limitless.

Our adventure has only just begun and the future holds exciting discoveries,
Stay tuned for more insights and developments on this remarkable odyssey !!!!
- - + + \ No newline at end of file diff --git a/blog/intro-to-artificial-intelligence/index.html b/blog/intro-to-artificial-intelligence/index.html index cfd22d14..b88efdb3 100644 --- a/blog/intro-to-artificial-intelligence/index.html +++ b/blog/intro-to-artificial-intelligence/index.html @@ -9,8 +9,8 @@ - - + +
@@ -24,7 +24,7 @@ the speed limit, and other information to navigate the road.

Theory Of Mind

  • Theory of Mind AI should understand human emotions, people, and beliefs, and be able to interact socially like humans.
  • This type of AI machine is still not developed, but researchers are making lots of efforts and improvements for developing such AI machines.

Self-Awareness

  • Self-awareness AI is the future of Artificial Intelligence. These machines will be super intelligent and will have their own consciousness, sentiments, and self-awareness.
  • These machines will be smarter than the human mind.
  • Self-Awareness AI does not exist in reality still and it is a hypothetical concept.

Conclusion​

Artificial intelligence has come a long way since the early days of rule-based systems, and its evolution shows no signs of slowing down. With ongoing research and development, the potential applications of AI are vast and ever-expanding.

If you enjoy reading stories on similar topics then do follow the account. Let me know your thoughts below

- - + + \ No newline at end of file diff --git a/blog/intro-to-blockchain/index.html b/blog/intro-to-blockchain/index.html index 2ff7aaec..117a0338 100644 --- a/blog/intro-to-blockchain/index.html +++ b/blog/intro-to-blockchain/index.html @@ -9,8 +9,8 @@ - - + +
@@ -30,7 +30,7 @@ Blockchain technology provides a transparent system where all activities are visible to the public. Since blockchain is a decentralized and distributed ledger, all transactions on the internet are accessible to all network participants. Blockchain achieves transparency through the use of encryption methods for secure and unchangeable record-keeping. Blockchain security results from a combination of distributed consensus and cryptographic techniques.

4) Intellectual Property (IP)
Intellectual property (IP) in blockchain involves ownership of digital assets, patents for blockchain innovations, smart contracts for IP agreements, and open-source licensing. Few methods with which blockchain technology make use of IP is: Patent, Copyrights,Trademarks and Trade secrets.

Applications of Blockchain​


Today, we cannot imagine our lives without the internet. It has become an integral part of our daily routines. Almost everything we do happens through the internet, and in some ways, we are highly dependent on it. Due to the sudden rise in the popularity of blockchain in the previous decade, it is estimated that, like the internet, blockchain will also become an integral part of our lives. It's applicatiion ranges from transaction, healthcare, cryptocurrency, bitcoin, IoT and what not. The part of the tech industry that deals with online data and services is about to go through a big and important change because of blockchain technology.



Applications of Blockchain
Applications of Blockchain

Let us have a look at some drawbacks of Blockchain technology​


  • The implementation cost of blockchain is very high. For a small company, it becomes difficult to shift to blockchain technology because they need to hire a skilled blockchain developer, and in addition to this, infrastructure costs will also be incurred, which require a significant amount of funding.
  • The continuous operation of mining, minting, and transaction validation demands powerful systems that run non-stop. Beyond substantial investments, these activities consume significant amounts of energy, resulting in potentially severe environmental repercussions. To address the negative environmental impact, China has taken the step of banning blockchain mining in the Inner Mongolia region.
  • In the context of blockchain networks like Bitcoin, a 51% attack occurs when a single entity or group of entities controls more than 50% of the network's mining or computational power. This level of control can potentially allow them to manipulate transactions and disrupt the normal functioning of the network.

Conclusion​


In conclusion, blockchain's decentralization, smart contracts, and transparency offer transformative solutions across industries. Despite high implementation costs and environmental concerns, its impact is undeniable. Just as the internet integrated into daily life, blockchain is poised to shape the future of transactions and data management, promising an exciting path in technology and business.

- - + + \ No newline at end of file diff --git a/blog/intro-to-cloud-computing/index.html b/blog/intro-to-cloud-computing/index.html index 95bfd7e2..468f6f6c 100644 --- a/blog/intro-to-cloud-computing/index.html +++ b/blog/intro-to-cloud-computing/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Cloud Computing: Revolutionizing the Way We Store and Access Data

· 6 min read
Himanshu Agarwal
Mahima Churi

This Blog talks about the emerging trends in Cloud computing, and also gives a gist about the term Cloud Computing and its impact in leveraging businesses and individuals. The cloud has the ability to streamline and improve a variety of processes. From understanding the meaning of cloud computing model to discussing various characteristics, this blog will be your one-stop-shop for all things cloud computing. So, fasten your seatbelts and let's dive into the exciting world of the cloud together!!


What is Cloud Computing ?

Cloud computing is a way of using current technology where we can access and use internet-based services and storage to manage, process, and store data and information, instead of having to have it all on your own personal device or computer.

We can think of it like having access to a giant computer in the sky that we can use to do our work, store our files, and run our applications, without having to worry about the technical details or maintenance of the underlying hardware and software. This makes it easier and more convenient for us to access our data and resources from anywhere in the world, as long as we have an internet connection.

Let's take a look at some intriguing features of Cloud Computing!!​


🛠️ On-Demand Self-Service

With cloud computing, we can provision computing services, like server time and network storage, automatically. No communication with the service provider will be necessary. Customers of cloud services can view their cloud services, track their usage, and provision and de-provision services by logging into their cloud accounts through a web self-service portal.

💻 Broad Network Access

Broad network connectivity is another crucial aspect of cloud computing. Through a network and on portable devices like smartphones, tablets, laptops, and desktop PCs, we can access cloud services. A private cloud employs a local area network, whereas a public cloud uses the internet. Broad network access and cloud computing both rely heavily on latency and bandwidth since they have an impact on service quality.

📝 Resource Pooling

With resource pooling, multiple customers can share physical resources using a multi-tenant model. Based on demand, this model distributes and redistributes real and virtual resources. Customers can share the same applications or infrastructure with multi-tenancy while still retaining their privacy and security. Customers may be able to designate the location of their resources at a higher level of abstraction, such as a country, state, or data centre, even though they won't know the precise location of their resources. Customers can pool a variety of resources, including memory, computing power, and bandwidth.

🔗 Rapid Elasticity

Cloud services can be elastically provisioned and released, sometimes automatically, so customers can scale quickly based on demand, thus making it highly scalable. The capabilities available for provisioning are practically unlimited. Customers can use these features whenever they want and in whatever amount. Customers can scale cloud capacity, cost, and usage without incurring additional contracts or charges. We won't need to acquire computer hardware thanks to quick elasticity.

⚙️ Measured Service

A metering capability in cloud systems optimises resource utilisation at an abstraction level appropriate for the type of service. For storage, processing, bandwidth, and users, for instance, we can utilise a metered service. A pay-for-what-you-use model is used to base payments on the customer's actual consumption. Consumers and service providers benefit from a transparent experience that is created by monitoring, managing, and reporting resource use.

Lets have a look at some of the most used Cloud Storage Services​


Most Used Cloud Storage Services
Most used Cloud Storage Services

Google Drive is by far the most popular cloud storage service in the world, with an use rate of 94.44 percent. The finest cloud storage for collaboration, Dropbox, is in second position with a still-impressive 66.2 percent, followed by OneDrive (39.35 percent) and iCloud (38.89 percent). Additionally popular cloud storage providers include MEGA (5.09 percent), Box (4.17 percent), and pCloud (1.39%), all of which made our list of the top cloud storage services.

Statistics on Cloud Service Providers​


Stats on Cloud Service Providers
Stats on Cloud Service Providers

AWS still holds over a third of the cloud services market:

  • In Q2 2022, AWS commanded 34% of the cloud market, a 1% increase year-over-year. Azure is second with 21% of the market, followed by Google Cloud (10%), Alibaba (5%), and IBM (4%).
  • Amazon's revenue from AWS grew from 5.62 in 2014 to 13.24% in 2021.
  • The survey also showed the cloud market continues to grow 34% year-over-year.
FunFact

It took Netflix seven years to migrate to AWS

Some drawbacks to have a look upon​


Drawbacks of Cloud Computing
Drawbacks of Cloud Computing

According to cybersecurity experts, the most pressing cloud security challenges are misconfiguration of the cloud infrastructure (68 percent); unauthorized access (58 percent); insecure API (52 percent); accounts, services or traffic hijacking (50 percent) and external data sharing (43 percent).

info

If you are interested in finding out more about cloud security, we have an excellent article detailing cloud security measures for cloud storage services.

Conclusion​

  • In conclusion, cloud computing has become an increasingly popular and indispensable tool for businesses and organizations of all sizes. With its ability to provide on-demand access to a wide range of computing resources, including storage, computing power, and applications, it has transformed the way organizations operate and has unlocked new opportunities for innovation and growth.
  • The cloud offers many benefits, including cost savings, scalability, increased efficiency, and improved security. As more and more businesses adopt cloud computing, it is likely that this trend will continue to grow, driving further innovation and enabling organizations to do more with less.
  • However, while the benefits of cloud computing are clear, there are also challenges that must be addressed, such as ensuring data security, managing vendor lock-in, and ensuring reliable performance.
  • Despite these challenges, the future of cloud computing looks bright, with advancements in areas such as artificial intelligence, machine learning, and the Internet of Things set to further drive its growth and revolutionize the way businesses operate.

In short, cloud computing is here to stay, and its impact on the business world will only continue to grow in the years to come.

- - + + \ No newline at end of file diff --git a/blog/intro-to-machine-learning/index.html b/blog/intro-to-machine-learning/index.html index 87440f25..43b39bf0 100644 --- a/blog/intro-to-machine-learning/index.html +++ b/blog/intro-to-machine-learning/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Machine Learning Adventures: Craft Your Inaugural Model

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.


Machine Learning
Machine Learning Model

Why Machine Learning?​

Before we go into the nitty-gritty of coding, it's critical to understand why machine learning is such an intriguing field. Without being explicitly programmed, machine learning allows computers to study patterns and predict events. From recommendation systems and image identification to healthcare diagnostics and self-driving automobiles, this technology has a wide range of applications. Machine learning is a fascinating field that has the potential to alter industries, solve challenging issues, and create intelligent systems. Machine learning is a vital field due to its ability to harness data for insights, automation, and personalisation across industries. It enables businesses to make data-driven decisions, improve efficiency, and enhance customer experiences.

Prerequisites​

To embark on this machine learning adventure, you'll need a few tools and libraries:

  • Python: You can get Python from the official Python website if you don't already have it installed.
  • Coding Environment: Jupyter Notebook or VS Code - If you have installed them kindly install them.
  • Machine Learning Libraries: We'll rely on libraries like NumPy, pandas, and scikit-learn. You can install them using pip: pip install numpy pandas scikit-learn.

Now that you've got your tools ready, let's get started on crafting your inaugural machine learning model.

Process of Crafting Your First Model​

Step 1: Data Preparation
Data is crucial to every machine learning research. Labeled data are required in order to train your model. Gather a large and varied collection of text from the internet. There may be books, papers, websites, and other items in this dataset. A wide range of themes and writing styles must be included in the data, which is crucial.
Step 2: Model Selection
Next, you'll need to choose a machine learning algorithm. Model selection, an important part of machine learning, determines the optimum technique for deriving conclusions from your given dataset. Data variables such as type, dimensionality, and noise levels have a considerable impact on this decision. The algorithm you pick, whether you're working with structured or unstructured data, can have a big impact on the model's accuracy and effectiveness.
Step 3: Model Training
Now, it's time to train your model on the data. A machine learning model learns patterns and relationships from training data, which enables it to categorize data or make predictions. This process is known as model training. During training, the model makes adjustments to its parameters to reduce the difference between its predictions and the actual target values. Gradient descent is one optimization approach that is frequently used to achieve this. The model continuously improves during the training phase by learning from its errors.
Step 4: Making Predictions
The goal of machine learning is to make predictions as a result of model training. Based on the patterns found in the training set, a trained model may categorize or predict fresh, undiscovered data. Depending on the problem, several metrics are used to assess prediction accuracy . It is crucial to monitor the model's performance and make sure that its predictions correspond to the final outcomes. These forecasts have the power to improve decision-making, provide useful data, and streamline operations.
Step 5: Model Evaluation
Model evaluation is a critical stage in the machine learning process in which the effectiveness and dependability of a trained model are examined. Depending on the problem type (classification or regression), this stage involves the use of several measures such as accuracy, precision, recall, F1-score, and mean squared error. Continuous monitoring and potential model fine-tuning guarantee that the model retains its predictive power.

Challenges​

While the world of machine learning is exciting, it does come with its fair share of challenges. Here are some common hurdles you might encounter on your machine learning adventure

  • Data Quality Issues
  • Overfitting
  • Lack of Domain Knowledge
  • Model Interpretability
  • Hardware and Resource Constraints
  • Staying Updated

Specific solutions can be used to solve machine learning challenges such as data quality concerns, overfitting, and a lack of domain knowledge. To combat overfitting, use regularization and cross-validation, interact with domain experts to glean insights, and use interpretable models when transparency is critical. Furthermore, keeping up with emerging techniques, thinking about ethical implications, and working on a variety of projects for hands-on experience are all necessary for confronting the complicated and ever-changing subject of machine learning.

Ethical Consideration​

Machine learning requires careful ethical management since models may unintentionally reinforce bias and unfairness. Fairness, accountability, and transparency must all be upheld. To reduce biases, data must be thoroughly gathered and cleansed, and model conclusions must be comprehensible. When working with personal data, it's extremely important to respect consent and privacy. Collaboration with subject matter specialists and adherence to moral standards are essential. To develop ethical and reliable AI systems, it is ultimately crucial to uphold an ethical commitment throughout the machine learning lifecycle.

Conclusion​

To summarize, machine learning is a transformational force with the capacity to disrupt businesses and solve complicated issues. Its ability to extract knowledge from data and make informed, data-driven decisions is a vital tool in healthcare, finance, autonomous systems, and numerous other disciplines. As we embark on this machine learning adventure, we must adhere to ethical values, encourage innovation, and continue to explore this ever-changing discipline.

The future is brimming with possibilities, and machine learning is at the forefront of driving positive change and progress. !!!!
- - + + \ No newline at end of file diff --git a/blog/intro-to-react-js/index.html b/blog/intro-to-react-js/index.html index 016a35fc..bd458fb6 100644 --- a/blog/intro-to-react-js/index.html +++ b/blog/intro-to-react-js/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

6 Reasons Why React JS is the Future of Web Development!!

· 5 min read
Mahima Churi
As technology continues to evolve, web development has become an increasingly important field, and front-end frameworks such as ReactJS have emerged as crucial tools for building dynamic, user-friendly websites. Whether you are just starting out with web development or are looking to enhance your existing skills, I hope that you will find valuable insights and tips within these pages. So sit back, grab a cup of coffee, and join me on our journey through the exciting world of ReactJS!

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What is React JS?

React JS is nothing but a java script library that helps the developers in creating reusable UI components there by increasing the efficiency of code. When making dynamic websites React JS is proven to be more effective than Vanilla JS, and hence it has become a popular choice for building fast and scalable single-page applications. In simple terms, ReactJS helps make web development more efficient, organized, and dynamic.

Characteristic Features of React JS that makes it more versatile and Popular

Features of ReactJS
Features of ReactJS

1. Virtual DOM​

In traditional web development, when changes are made to a web page, the entire page needs to be re-rendered, which can be slow and time-consuming. The Virtual DOM solves this issue by creating a virtual representation of the web page in memory so when changes are made, ReactJS updates the virtual DOM instead of the actual page, which is much faster. Then, ReactJS compares the virtual DOM to the actual page and updates only the parts that have changed, rather than the entire page. This makes the updates and rendering process much faster and more efficient, improving the overall user experience of the web application.

2. Reusable Components​

ReactJS uses a component-based architecture, which means that the user interface is built using reusable components. Each component is a self-contained unit that handles a specific task or displays a specific piece of information, we can say that each components are independent. This makes the code more organized and easier to maintain, as well as reducing the amount of redundant code.

3. Community​

React has a vast and supportive community of developers who are constantly contributing new features and tools. React is open-source, meaning that anyone can contribute to the development of the library by fixing bugs, adding new features, or improving existing ones.

Link to contribute to the React Library

4. JSX​

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used by ReactJS that allows developers to write HTML-like code within their JavaScript. This makes it easier for users to write and understand the code, as it closely resembles the structure of HTML. This helps to improve the overall development experience by making the code more intuitive and easier to read.

For example, instead of writing the following code in pure JavaScript to render a simple button:

React.createElement("button", {className: "myButton"}, "Click Me!");

The same code can be written in JSX as:

<button className="myButton">Click Me!</button>;

5. Server-side Rendering​

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the browser. In the case of React, this means that the React components can be rendered on the server, allowing the browser to receive a fully rendered HTML page, instead of having to wait for JavaScript to execute and render the page on the client side again and again.

This results in faster initial load times, as the browser doesn’t have to wait for the JavaScript to execute and render the page. Additionally, server-side rendering can improve Search Engine Optimization (SEO), as search engines can better index and understand the content of the page.

6. Compatibility​

React’s simplicity and straightforward design makes it easy for developers to learn and adopt and it works seamlessly with other libraries and frameworks, such as Redux, allowing developers to create complex and scalable web applications.

Comaprison with other Frontend Frameworks

Popular Web Frameworks
Comparison with other frameworks as per the recent survey

Source: Stack Overflow Developer Survey 2021

From the above survey it can be clearly seen that React JS was named as one on the most commonly used web Framework.

React’s virtual DOM provides fast updates and rendering compared to traditional DOM manipulation. Angular and Vue also have optimized updates, but they may not be as fast as React’s virtual DOM.

Also, React is known for its simplicity and minimalistic approach, making it relatively easy to learn and get started with. Angular, on the other hand, has a steeper learning curve due to its more complex architecture. Vue falls somewhere in between, offering a more accessible learning experience as compared to Angular.

info

You can see more detailed insights of React JS on their Official Website

Conclusion​

In conclusion, React is the future of web development, offering a robust set of features and tools that make it easy to build high-performing, scalable, and maintainable web applications. Its simplicity, performance, and compatibility with other technologies make it an excellent choice for modern web development.

- - + + \ No newline at end of file diff --git a/blog/introduction-to-api/index.html b/blog/introduction-to-api/index.html index ecf1f1ad..a851c697 100644 --- a/blog/introduction-to-api/index.html +++ b/blog/introduction-to-api/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Introduction to APIs: Unlocking the Power of Integration

· 4 min read
Himanshu Agarwal

Applications and systems rely on smooth communication and data sharing to deliver improved functionality and services in today's interconnected digital environment. Application Programming Interfaces (APIs) are quite important in this situation. APIs serve as mediators, enabling interoperability, data sharing, and communication between various software programmes. This article will provide you a thorough introduction to APIs and their importance in contemporary software development, whether you're a developer, a tech enthusiast, or just interested about the world of APIs.


APIs to a layman

Introduction to API​

Application Programming Interface is referred to as API. It is a set of guidelines and protocols that specifies how various software components ought to communicate and share information.

  • APIs can be thought of as a contract that enables successful communication between two software entities.
  • APIs give programmers a standardised method of using the features of other software platforms, libraries, or systems.

Why are APIs Important?​

APIs have revolutionized the way software is developed and integrated. Here are some key reasons why APIs are important:

By allowing various software systems to interact and cooperate, APIs enable developers to take advantage of already-existing functions and resources without having to start from scratch.

Types of APIs​

APIs come in different types and formats, depending on the purpose and underlying technology. Here are some common types of APIs:

  • Web APIs: These APIs allow web-based services and applications to communicate with one another. The majority of the time, they are built on widely used web protocols like HTTP and REST (Representational State Transfer).

  • SOAP APIs: Based on XML (eXtensible Markup Language), SOAP (Simple Object Access Protocol) APIs offer a standardised method for applications to communicate structured information across a network.

  • JSON-RPC and XML-RPC: JSON (JavaScript Object Notation) or XML can be used as the data format for remote procedure calls when using the JSON-RPC or XML-RPC APIs. They're frequently employed for lightweight.

API Communication Styles:​

  • RESTful APIs: REST (Representational State Transfer) is a popular architectural style for designing web APIs. RESTful APIs use standard HTTP methods such as GET, POST, PUT, and DELETE to perform operations on resources. They often return data in formats like JSON or XML.

  • GraphQL: GraphQL is an alternative to RESTful APIs that provides a more flexible and efficient approach to data retrieval. With GraphQL, clients can specify the exact data they need, reducing over-fetching and under-fetching of data.

  • Real-Time APIs: Real-time APIs use technologies like WebSockets to enable bidirectional communication between the client and the server. They are ideal for applications that require instant updates, such as chat applications or real-time collaboration tools.

Common APIs​

  • Social media APIs: Websites like Facebook, Twitter, and Instagram offer APIs that let programmers incorporate social media features into their applications, such as updating statuses, retrieving user profiles, or engaging with social networks.

  • Payment Gateway APIs: Companies such as PayPal, Stripe, and Braintree provide APIs for handling online payments, allowing developers to include secure payment processing into their apps.

  • Mapping and Geolocation APIs: Maps, geolocation data, routing, and other location-based services are all made available by mapping and geolocation APIs, which developers can use to build apps with mapping features. Examples of these APIs include Google Maps and Mapbox.

Conclusion​

APIs enable seamless integration, teamwork, and creativity, serving as the foundation for contemporary software development. For developers and organisations wishing to take use of the power of APIs to build strong and interconnected applications, understanding APIs and their many types, communication styles, authentication methods, documentation practises, and management systems is essential. So go ahead and discover the immense possibilities that APIs contain for your software applications by exploring their enormous world!

- - + + \ No newline at end of file diff --git a/blog/linux-basics/index.html b/blog/linux-basics/index.html index 85cce691..8c38b955 100644 --- a/blog/linux-basics/index.html +++ b/blog/linux-basics/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

Basics of GNU/Linux

· 14 min read
Gaurang Vishwakarma
Saasha Gupta

Linux is an operating system kernel. It was originally written in 1991 by Linus Torvalds for his personal use, and it was soon adopted as the kernel for the GNU operating system, which was written to be a free (libre) replacement for Unix.

So, what even is GNU/Linux? What is free software? You must have so many more questions! Through this blog, we will try to understand what is linux, and why it is the most popular operating system in the world.

The world of operating systems​

Most modern opearting systems can be grouped into two categories:

  • Microsoft NT descendants like Windows XP to Windows 11, Xbox OS, Windows Phone
  • Unix based (Mostly everything apart from Windows)

Why UNIX based?​

Well, the answer is simple. Most of unix-based operating systems are free to use or modify, and hence are widely adopted. UNIX itself has died today, however, it's clones and descendants are still alive. Some of these operating systems are direct clones of the UNIX source code, while some such as Linux are UNIX-like. Errr.. so unix-based, unix-like, what are all these?

Don't worry, I will cover this in the next section. What's important in this section is you understand the fact almost everything that is not based on Microsoft NT is a direct or indirect descendant of UNIX. Some examples of operating systems that are descendants of UNIX are:

  1. Linux and it's derivative distributions
  2. Mac OS X
  3. BSD
  4. ChromeOS
  5. Android
  6. PS4 OS

Why is this important? Because all of these operating systems here share a plethora of common core functionailty. To put it simply, most of their internals and most of their functions are same, if not, similar. For example, all of these operating systems have the same basic commands.

History of operating systems​

Since most of the operating systems today can trace their lineage to UNIX, it is important to atleast have a brief idea of what UNIX is, even though the original versions of UNIX no longer survive. Understanding the history will also help you understand why UNIX-based commands do not work on something like Windows.

What is UNIX?​

UNIX was an operating system, developed at Bell labs in mid 1960s. Many of their innovations and design choices of the original UNIX team have lived up to 60+ years, well into the 2020s. These design choices include the idea of a multiuser operating system and a hierarchical filesystem.

UNIX truely is the grandfather of all modern operating systems. All of these features that were built into different versions of the original UNIX operating system still exist in operating systems like Mac OS, Android, linux distributions and basically every thing that can trace their lineage back to UNIX.

Since Microsoft operating systems cannot trace back their lineage to UNIX, all UNIX features do not work on windows. The commands that you can run colloquially on both MacOS and Linux, do not exist natively on Windows. Windows has it's own commands, and it's own way of doing things.

FIG 1: UNIX's descendants

Closed Source, Mixed Source, and Open Source​

In the diagram in the above section, you can see a legend in the top right that annotates the color codes given in the diagram. These are:

  • Closed Source (denoted by Red): These were descendants of UNIX that were further developed by companies like Sun Microsystem, HP, etc. The source code of these developements of UNIX were strictly guarded. The code itself was kept a secret from the public and the clients did not have the permission to change or alter the source code in anyway. Each company had their own non-permissive license.
  • Mixed Source (denoted by Yellow): These were the descendants of UNIX that were further developed by colleges like Univesity of California, Berkeley, and many others. Berkeley was influential as they had released a mixed source code license (also known as BSD license), that would allow sharing and modification of the source code, with other colleges and companies, for educational or other purposes.
  • Open Source (denoted by Green): These were descendants of UNIX whose developement was done in public as their source code was made freely available for everyone to view, modify, and use. The license that governed open source software were early versions of the GNU public license(GPL). The GPL from the early days has been a really permissive license as it allowed inspection and modification of the source code as per requirement.

Licensing was the key differentiator in all of these descendants of UNIX, as they governed what could be done with the operating system. Companies have to make a profit, and colleges have to follow certain rules, hence we can understand why the first two cases wanted to safeguard their code behind non-permissive licenses. But why did the third case not want to protect their code?

The answer is, as mentioned in the above two scenarios, software was a commodity that had to be purchased. The closed source versions were to be bought by clients. (Just like you buy a windows license). These were expensive to do so and also there were limited innovations in the software, like only in the company who built it or the college where it was developed. Hence, the Free Software Foundation was formed in the late 80s to solve this issue, and that is why they had created the GPL.

Free Software Foundation (FSF)​

The free software foundation was built as a part of the free software movement in response to proprietary and restricted software. Free is not equal to free in terms of money. Free as FREEDOM. That was FSF's motto.

The movement's philosophy is that computers and software should not prevent cooperation between users, and instead should have the goal of liberating everyone in the cyberspace. This will encourage innovation in software.

According to the movement's leader Richard Stallman:

Users should have the freedom to run, copy, distribute, study, change, and improve software.

This was a visionary statement as open source software allowed ground-breaking innovations in the software industry and today, most of the software we use, have some kind of free software in them, either completly or in parts.

What is GNU/Linux?​

Richard Stallman was the leader of a group of developers who wanted to create an open source version of the UNIX operating systems. Remember, most of the UNIX descendants like System V or BSD were closed source or mixed source? The open source operating system needed to have everything that normally came with UNIX. The components had to be FREE, as stated in the previous section.

In 1984, they began working on the GNU project (GNU stands for GNU's not UNIX). Creating an operating systems however is a daunting task, even for the most experienced developers. Luckily for him, at the same time, a student in the University of Helsinki, Linus Torvalds was working on his operating system kernel, called Linux.

In any operating system, the kernel is the most important and critical component. The kernel facilitates the interaction of the the hardware and other system software. At that time, while most parts of the GNU project were complete (including gcc - compiler, open source implementations of all unix-commands, etc), the project lacked a kernel. Linus Torvalds combined his Linux kernel with the rest of the components of the GNU ecosystem, to create a full operating system. This was known as GNU/Linux.

FIG 2: Kernel in operating system

Linux is an operating system kernel that along with other system software components creates an complete operating system called as linux distribution.​

Difference between unix-based vs unix-like​

In FIG 1, you can see that many of the closed and mixed source operating systems are directly linked to the original UNIX. This is because the companies and colleges that wanted to develop their own versions of UNIX paid a royalty to Bell Labs to acquire UNIX. This might sound contradictary to their own non-permissive licenses. However Bell labs decided that they did not want to be in the operating systems buisness, and instead wanted to focus on telecommunication and phone buisness. Hence they happily sold off their versions of UNIX. Since these companies directly got their versions of UNIX from Bell labs, their descendant operating systems were called unix-like.

There are a bit of legal reasons too that I will not cover in the blog as it is out of scope for our discussion, but to put it in simple terms, there was a foundation formed by a few of these companies called The Open Group, and they defined the UNIX standard according to their developements of UNIX. In FIG 1, you can see that most of the operating systems do not have a direct connection to UNIX. This is because even though they are based on the original UNIX and are compatible with the UNIX standards, they have not been certified by The Open Group. This is often due to financial considerations, as open source projects do not have a definite source of income. Hence these operating systems are called Unix-like. It is basically a matter of certification by The Open Group, simply put.

Linux Distributions​

You know that Linux is actually an operating system kernel and not an entire operating system in itself. When people talk about a linux based operating system, they are actually referring to Linux Distributions (often shorten to linux distro). Normally, a Linux Distribution bundles the linux kernel, a bunch of GNU tools, a shell, a package manager, a windowing system, and a window manager or desktop enviroment at the very least. On top of that, a linux distribution often can include utility software such as web browsers, a file explorer, a text editor, etc. Did you know that Linux is actually an operating system kernel and not an entire operating system in itself? When people talk about a linux based operating system, they are actually referring to Linux Distributions. Normally, a Linux Distribution bundles the linux kernel, a bunch of GNU tools, a shell, a package manager, a windowing system, and a window manager or desktop enviroment at the very least. On top of that, a linux distribution often can include utility software such as web browsers, a file explorer, a text editor, etc.

Types of Linux Distributions​

While there are hundreds of linux distributions, most of them are based on a few original ones. These are:

  • Arch Linux
  • Debian Linux
  • Red Hat Linux
  • Slackware
  • Gentoo
  • NixOS
  • Void Linux

The key difference between these distributions are usually their package managers. However, different distributions may choose to ship different types of components. Let's look at them in brief:

DistributionPackage Managerinit system
Arch Linuxpacmansystemd
Debianapt or dpkgsystemd
Red Hatdnf or yumsystemd
Slackwareslackpkgbsd-style
Gentooportageopenrc
NixOSnixsystemd
Void Linuxxbpsrunit

These distributions are often called parent distributions as many other distributions are derived from them. Derivatives retain the package manager of the parent distributions while shipping different components. For example - a different shell, a different filesystem, etc.

Well known derivative distributions​

  • Arch based: Manjaro, EndeavourOS, Garuda Linux
  • Debian based: Ubuntu, Linux Mint, ElementaryOS
  • Red Hat Based: Fedora, CentOS, RockyLinux
  • Gentoo based: RedstarOS, Funtoo

Core Components of a distribution​

As we have discussed, a linux distro comes with the linux kernel, a shell, a filesystem, a bunch of GNU tools, and other system software. Let us discuss in brief what each of these components do, and how they help the operating system function.

Kernel​

The kernel is a computer program at the core of a computer's operating system and generally has complete control over everything in the system. It is the portion of the operating system code that is always resident in memory and facilitates interactions between hardware and software components.

Init System​

Init system (short of for initialization), is the first process started during booting of the operating system. Init is a daemon process that continues running until the system is shut down. It is the direct or indirect ancestor of all other processes and automatically adopts all orphaned processes. Init is started by the kernel during the booting process. The process ID of init system is PID 1.

The init system with the help of the kernel initialises all hardware on the computer. The init scripts are launched by the init process to guarantee basic functionality on system start and shutdown. This includes (un)mounting of file systems and launching of daemons (background services).

Filesystem​

A file system or filesystem controls how data is stored and retrieved. Without a file system, information placed in a storage medium would be one large body of data with no way to tell where one piece of information stops and the next begins. By separating the data into pieces and giving each piece a name, the information is easily isolated and identified. Taking its name from the way paper-based information systems are named, each group of data is called a "file". The structure and logic rules used to manage the groups of information and their names is called a "file system".

The shell​

From Wikipedia:

A Unix shell is a command-line interpreter or shell that provides a traditional user interface for the Unix operating system and for Unix-like systems. Users direct the operation of the computer by entering commands as text for a command line interpreter to execute or by creating text scripts of one or more such commands.

A shell is a computer interface to an operating system. It exposes the operating systems' services (init system for example) to human users. The shell takes our commands, and gives them to the operating system to perform. It is called a shell because it is an outer protective layer around the operating system.

GNU tools​

These are important tools that are present in some or other form since the UNIX days. The GNU toolchain is a broad collection of programming tools produced by the GNU Project. These tools form a toolchain (a suite of tools used in a serial manner) used for developing software applications and operating systems.

Package manager​

From Wikipedia:

A package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner.

A package manager deals with packages, distributions of software and data in archive files. Packages contain metadata, such as the software's name, description of its purpose, version number, vendor, checksum (preferably a cryptographic hash function), and a list of dependencies necessary for the software to run properly. Upon installation, metadata is stored in a local package database. Package managers typically maintain a database of software dependencies and version information to prevent software mismatches and missing prerequisites. They work closely with software repositories, binary repository managers, and app stores.

Desktop Enviroment​

A desktop environment bundles together a variety of components to provide common graphical user interface elements such as icons, toolbars, wallpapers, and desktop widgets. Additionally, most desktop environments include a set of integrated applications and utilities. Most importantly, desktop environments provide their own window manager, which can however usually be replaced with another compatible one.

The user is free to configure their GUI environment in any number of ways. Desktop environments simply provide a complete and convenient means of accomplishing this task.

What's Next?​

After reading this blog, you must have gotten the basic understanding of what GNU/Linux is, what linux itself is, and what a linux distribution is, and what it does. Moving on from here, you can dive deep and understand in depth how each component decsribed in the blog post work. For example, how does a typical linux file system look like. The world of operating systems is vast, and only so much can be covered in one blog post. Keep asking questions, and keep reading!

- - + + \ No newline at end of file diff --git a/blog/page/2/index.html b/blog/page/2/index.html index cca33c52..65f4b20a 100644 --- a/blog/page/2/index.html +++ b/blog/page/2/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

· 6 min read
Rajdeep Pal

CNCF Zero to Merge is a program by the Cloud Native Computing Foundation that helps newcomers make their first open-source contribution. It aims to lower the barrier for people who have never contributed to open source before, especially those from underrepresented groups. This blog summarizes my experience in the first-ever edition of the program


CNCF Zero to Merge - Your first step towards Open-Source

CNCF LOGO

· 6 min read
Mahima Churi

Web crawling, also known as web scraping, is the process of automatically extracting data from websites. It allows us to gather valuable information from various sources on the internet efficiently and in a structured manner. In this blog, we’ll explore the fundamentals of web crawling and how you can get started with your own data extraction projects.


· 7 min read
Kashish Singh

Ever wondered what blockchain is and how it looks? Let's explore the realm of blockchain together. This blog focuses on the basics of blockchain technology along with its applications. In this evolving era, it is important to understand this technology because, according to recent research, blockchain has the potential to reshape the future and the way we perceive it.

- - + + \ No newline at end of file diff --git a/blog/page/3/index.html b/blog/page/3/index.html index bc5f29f9..3660aa91 100644 --- a/blog/page/3/index.html +++ b/blog/page/3/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

· 14 min read
Gaurang Vishwakarma
Saasha Gupta

Linux is an operating system kernel. It was originally written in 1991 by Linus Torvalds for his personal use, and it was soon adopted as the kernel for the GNU operating system, which was written to be a free (libre) replacement for Unix.

So, what even is GNU/Linux? What is free software? You must have so many more questions! Through this blog, we will try to understand what is linux, and why it is the most popular operating system in the world.

· 5 min read
Gaurang Vishwakarma
Vishal Rawat

Welcome to our first blog​

Welcome everyone to TCET Open Source's Blog Section. Here, we promote blogging in the student community. Talk about ongoing trends in tech, student life at TCET, and any topic you feel would feel great for this blog.

note

This particular blog will have recurring adjustments. Last revised on Oct 1st, 2023.

· 5 min read
Om Hinge

Hey there, fellow gamers! Today, we're diving into the fascinating world of cloud gaming, a technology that's changing the way we play and enjoy our favorite titles. In this article, we'll break down the concept of cloud gaming, its evolution, and its promising future.

Introduction to Cloud Gaming​

Imagine playing high-quality video games without the need for expensive gaming hardware or the hassle of downloading and installing massive game files. That's the magic of cloud gaming! It's like Netflix for gamers, where you can instantly access and play games over the internet without worrying about hardware requirements.

Most modern games demand a hefty amount of storage space and powerful hardware to run smoothly. Think about titles like Call of Duty's Warzone, which takes up over 1000GB of storage. To play these games with the best experience, you'd need a high-end PC or gaming console. But what if there was a more affordable alternative?

Cloud Gaming Demonstration by playing Cyberpunk 2077 on mobile

How Cloud Gaming Works​

Cloud Gaming flow

Cloud gaming operates within the realm of cloud computing. Instead of storing game files on your local device, they're hosted and processed on powerful remote servers in data centers. Here's how it works in a nutshell:

  • Remote Servers: Powerful servers host and run the games, eliminating the need for you to download and install them on your device.

  • Streaming Gameplay: Similar to streaming services like Netflix, cloud gaming sends a video stream of the gameplay over the internet to your device.

  • Input Control: Your inputs (the buttons you press and the moves you make) are sent to the server, where the game responds accordingly. This allows you to play even on low-end devices.

While cloud gaming offers incredible convenience, it's important to note that it can introduce some input lag, depending on factors like your internet connection stability and the distance between you and the server.

Cloud Gaming is one of the Best Examples to showcase the power of Cloud Computing.

The History and Future of Cloud Gaming​

In the past, cloud gaming faced numerous challenges, including network issues. Google's attempt with Google Stadia was ambitious but struggled due to connectivity problems. Other giants like Amazon and Microsoft also entered the arena with Amazon Luna and Xbox cloud gaming.

However, the future of cloud gaming looks bright, especially in countries like India. Gaming is growing rapidly, and cloud gaming provides an affordable platform for those unable to invest in high-end gaming hardware. The potential to earn rewards through gaming is also on the rise, further boosting its popularity.

The primary challenge facing cloud gaming today is network-related issues, but providers are actively working on solutions to make it accessible to more users.

We can say Cloud Gaming was just the first step for the cloud computing service to even non-tech users. Google is developing & testing Cloud Quantum computing so that one day everyone can access the Incredible power of Quantum computers without the need for a quantum rig, which might be bigger than most of our houses.

cloud quantum computing

Advantages and Drawbacks of Cloud Gaming​

Cloud gaming offers several advantages, including:

  • Universal Platform: You can play games on any device with an internet connection, from consoles to smartphones.

  • Cost-Efficiency: No need for expensive hardware, as the processing is done on remote servers.

  • Portability: Play on the go without worrying about installation and setup.

However, it's not without its drawbacks:

  • Internet Dependency: A stable internet connection is crucial for a smooth experience.

  • Input Lag: Some games may suffer from input delay due to server processing.

  • Limited Awareness: Many people are still unaware of cloud gaming, and few providers exist compared to traditional gaming options.

Current Status of Cloud Gaming​

Several cloud gaming services are making waves in the industry:

  • Nvidia GeForce Now: This service is known for its low system requirements, compatibility with various devices, and a free trial period.
  • XBox Game Cloud: Known for Various game titles for free to play in the subscription of Game Pass.
  • JioGames Cloud: Building the Cloud gaming culture & infrastructure in India at a reasonable rate.

Is Cloud Gaming Worth It?​

While cloud gaming shows immense potential, it's still in its early stages. Input lag and connectivity issues can be frustrating, especially for competitive gamers. Traditional gaming setups remain a popular choice. However, as technology advances, cloud gaming has the potential to become the future of gaming in the coming decade.

In conclusion, cloud gaming is a game-changer with the potential to democratize gaming by making it accessible to more players. As it evolves and overcomes its current challenges, we can expect cloud gaming to reshape the gaming landscape in the near future.

References:​

- - + + \ No newline at end of file diff --git a/blog/page/4/index.html b/blog/page/4/index.html index 202ff491..b86eb42a 100644 --- a/blog/page/4/index.html +++ b/blog/page/4/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

· 4 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Code Optimization Revolutionized: Google DeepMind's AI Unleashes New Speed-Boosting Technique. 1​

DeepMind's AlphaDev AI achieves groundbreaking speed improvements in sorting algorithms, surpassing existing methods by up to 70%. Its innovative techniques have been adopted by millions of software developers, marking the first integration of AI-discovered algorithms in language updates. DeepMind's gamified approach, using reinforcement learning, trains AlphaDev to construct faster and correct algorithms. This breakthrough revolutionizes code optimization and sets the stage for further AI-driven innovations in computer science.

Elevating the Shopping Experience with AI Virtual Try-On on Google Shopping. 2​

Example of Virtual Try of Clothes with AI

Google Shopping has introduced AI Virtual Try-On, a new feature that allows users to virtually try on beauty products before buying them. Using advanced machine learning algorithms and facial recognition technology, the feature provides realistic representations of the products on the user's face. It enhances convenience, addresses concerns about online shopping, and offers a seamless experience. Users can access the feature from Google Search, Google Shopping, or participating retailer websites, making informed decisions with detailed product information and user reviews. This innovation bridges the gap between online and in-store try-ons, revolutionizing the beauty shopping experience.

Ink AI Unveils ChatGPT-Based E-book Generator for Effortless Full-Length E-book Creation. 3​

Ink AI has introduced a game-changing e-book generator tool that utilizes ChatGPT, an AI language model, to effortlessly create full-length e-books. By inputting prompts, users receive context-aware responses that form the basis of their e-books, making the writing process faster and more efficient. The tool allows customization of genre, style, and length, and the user-friendly interface simplifies content creation. Ink AI's e-book generator opens up new possibilities for authors, content creators, and publishers by revolutionizing the e-book creation process with AI technology.

Meta Unveils Stablediffusion: A Groundbreaking AI Model for Music Generation. 4​

Meta has introduced Stablediffusion, an advanced AI model called MusicGen, designed for music generation. Unlike traditional models, Stablediffusion produces stable, coherent, and emotionally engaging musical compositions. Trained on diverse musical genres, the model incorporates stability mechanisms for smooth transitions and consistent structures.

It considers melody, harmonies, rhythms, and tonal variations, resulting in natural and professional-sounding compositions. Stablediffusion offers a powerful tool for musicians, composers, and music enthusiasts, revolutionizing AI-generated music with its stable and artistically satisfying output.

Draggan Goes Open Source: Empowering Developers with Advanced AI Framework. 5​

Example of DragGAN to change perspective of Lion and more

Draggan, an advanced AI framework focused on reinforcement learning, has been released as open source. This allows developers worldwide to access and utilize its capabilities for training AI models. Draggan simplifies the process with its user-friendly interface, extensive documentation, and pre-built components, enabling faster development and deployment of AI systems. By democratizing access to this powerful tool, the open-source release of Draggan promotes collaboration and accelerates advancements in AI research and application development.

MIT Introduces New Model for Accelerated Drug Discovery. 6​

MIT researchers have developed a groundbreaking AI model called AccelerateDrug, which revolutionizes the process of drug discovery. The model utilizes advanced machine learning algorithms to rapidly analyze chemical and biological data, predicting the effectiveness of potential drug compounds. By significantly reducing experimentation time and resources, AccelerateDrug streamlines the drug discovery process and expedites the development of new medications.

The model has demonstrated high accuracy and outperformed existing methods in predicting drug efficacy. AccelerateDrug has the potential to accelerate the availability of life-saving treatments, benefiting patients and advancing healthcare outcomes.

Google Introduces AudioPalm: Bridging the Gap between Text and Voice. 7​

Brief Architecture of AudioPaLM

Google has introduced AudioPalm, an innovative technology that bridges the gap between text and voice. Using advanced AI algorithms, it converts written text into human-like speech and transcribes spoken language into written text accurately. AudioPalm enhances accessibility, user experiences, and content creation, benefiting individuals with visual impairments and those seeking a more immersive interaction.

The technology has applications in education, entertainment, and accessibility services, and it integrates with existing Google services like Google Assistant and Google Translate. Google's AudioPalm represents a significant advancement in natural language processing, enabling seamless conversion between text and voice for enhanced user experiences.

  1. https://www.deepmind.com/research/highlighted-research/alphago↩
  2. https://blog.google/products/shopping/ai-virtual-try-on-google-shopping/↩
  3. https://goodereader.com/blog/e-book-news/new-chatgpt-based-e-book-generator-tool-from-ink-ai-can-create-full-length-e-books-easily↩
  4. https://analyticsindiamag.com/meta-releases-stablediffusion-for-music-musicgen/↩
  5. https://analyticsindiamag.com/draggan-is-finally-open-source/↩
  6. https://news.mit.edu/2023/new-model-offers-speedy-drug-discovery-0608↩
  7. https://google-research.github.io/seanet/audiopalm/examples/↩

· 4 min read
Himanshu Agarwal

Applications and systems rely on smooth communication and data sharing to deliver improved functionality and services in today's interconnected digital environment. Application Programming Interfaces (APIs) are quite important in this situation. APIs serve as mediators, enabling interoperability, data sharing, and communication between various software programmes. This article will provide you a thorough introduction to APIs and their importance in contemporary software development, whether you're a developer, a tech enthusiast, or just interested about the world of APIs.


APIs to a layman

· 6 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Google's PaLM 2: Revolutionizing Language Modeling with Multilingual Proficiency, Reasoning Abilities, and Coding Proficiency. 1​

Discover the cutting-edge advancements in AI from Google as they unveil PaLM 2, their next-generation language model. PaLM 2 has undergone extensive training on multilingual text, enabling it to understand, generate, and translate nuanced language across more than 100 languages. With improved reasoning capabilities and proficiency in programming languages, PaLM 2 demonstrates its potential for logic, common sense reasoning, mathematics, and coding tasks.

An Example of Prompt to Med PaLM - A specialized PaLM Model

Google has already integrated PaLM 2 into over 25 products and features, empowering users worldwide with enhanced language generation, efficient workspace features, and productivity tools. Through the development of PaLM 2, Google continues to drive innovation in AI and deliver real-world benefits in areas like healthcare and creative endeavors.

Meta's AI breakthrough: Speech recognition for 1,000+ languages now open source, paving the way for language preservation and universal communication. 2​

Meta's AI breakthrough empowers speech recognition in over 1,000 languages, a significant leap towards preserving endangered languages. The company is sharing these models as open source on GitHub, enabling developers to build inclusive speech applications for diverse languages. Existing speech recognition models cover a mere fraction of the world's 7,000 languages due to limited labeled training data. Meta overcame this challenge by retraining their AI model to learn speech patterns from audio, requiring minimal data. Their models can converse in over 1,000 languages and recognize more than 4,000, with half the error rate compared to rival models. While there are risks of mistranscription and biased words, Meta's advancements have far-reaching implications for language preservation and global communication.

AI Revolutionizes Antibiotic Discovery: Unveiling a Breakthrough Against Hospital Superbugs. 3​

Scientists from McMaster University have utilised artificial intelligence (AI) to uncover a breakthrough antibiotic called abaucin, which shows promising potential in combating drug-resistant infections, particularly Acinetobacter baumannii. This bacterium poses a significant threat in hospitals and is known to cause severe conditions like pneumonia and meningitis.

The traditional methods of antibiotic discovery have proven challenging and time-consuming. However, AI algorithms allowed researchers to swiftly assess millions of molecules, leading to the identification of abaucin. Unlike broad-spectrum antibiotics, abaucin specifically targets A. baumannii, reducing the risk of drug resistance development and opening doors to more precise and effective treatments. This study underscores the immense potential of AI in revolutionising antibiotic discovery and providing hope in the fight against deadly hospital superbugs.

Unleash Your Creativity: Photoshop's AI Transforms Your Images with a Single Text Prompt. 4​

A before &amp; after image of dog after applying Generative Fill of Photoshop

Adobe has introduced a groundbreaking AI tool called Generative Fill in its Photoshop application, leveraging generative AI to add or remove objects from photos based on a simple text prompt. Acting as an "AI co-pilot," Adobe Firefly powers this feature, aiming to revolutionize the photo editing process. While enhancing user creativity, Adobe acknowledges the need to address concerns about potential misuse of the technology. The addition of Generative Fill is expected to usher in a new era of AI-driven creativity in the creative industries, providing extraordinary results and streamlining previously time-consuming tasks. Currently available in the beta version, a wider release of this transformative AI tool in Photoshop is on the horizon.

Safeguarding the Digital Frontier: Exploring the Reality of AI in Cybersecurity. 5​

In the realm of cybersecurity, the long-awaited promise of artificial intelligence (AI) is becoming a reality. AI-driven capabilities have evolved from simple rule-based systems to sophisticated tools that leverage generative AI and contextualise vast amounts of data. This breakthrough empowers cybersecurity teams with game-changing speed and accuracy, providing them with a much-needed advantage in their ongoing battle against cybercriminals. With a skills shortage and data explosion posing challenges, matured AI capabilities address these obstacles by automating tasks, improving defence postures, and enabling precise actions.

By combining AI with automation, security teams can achieve reliable speed and enhance their ability to detect, investigate, and respond to threats. The integration of AI into threat detection and response technologies, such as IBM's QRadar Suite, amplifies the effectiveness of security operations centres (SOCs) and streamlines the incident lifecycle. With AI's assistance, SOC teams can prioritise real threats amidst the noise, accelerate investigation and response processes, and significantly enhance overall resilience and readiness in the cybersecurity industry.

Spotify's Potential AI Breakthrough: AI-Generated Podcast Ads. 6​

In a recent podcast episode, Bill Simmons shared that Spotify is reportedly working on AI technology that would allow podcast hosts to create host-read ads without having to personally record them. This development could offer podcasters exciting opportunities, including the creation of geo-targeted and multilingual ads, while saving valuable time for content creation. Although Spotify has not officially confirmed these claims, their ongoing investment in AI technology, exemplified by the introduction of AI DJ, suggests the possibility.

The advent of AI-generated podcast ads would revolutionise the industry, offering podcasters a time-saving alternative and the potential to reach a broader audience. However, concerns regarding authenticity and the risk of misinformation should also be considered. The development of AI-generated podcast ads marks a significant milestone in podcasting, with the future implementation and audience response eagerly anticipated.

Chegg vs. ChatGPT: The Battle for AI-Powered Education Dominance. 7​

Chegg, an online education company, and its encounter with the disruptive force of generative AI, particularly OpenAI's ChatGPT. Chegg's executives had previously considered the potential of AI to replace human instructors and reduce costs but underestimated the rapid pace at which consumers embraced tools like ChatGPT.

Initially, Chegg didn't view ChatGPT as a threat to its paid services. However, when OpenAI released GPT-4, students began opting for ChatGPT instead of Chegg's paid offerings, leading to a significant loss in subscriber growth and a decline in the company's market value.

Despite their efforts, Chegg's future remains uncertain, and the company's executives are focused on navigating the challenges posed by generative AI to stay relevant in the education industry.

  1. https://blog.google/technology/ai/google-palm-2-ai-large-language-model/↩
  2. https://www.technologyreview.com/2023/05/22/1073471/metas-new-ai-models-can-recognize-and-produce-speech-for-more-than-1000-languages/↩
  3. https://www.theguardian.com/technology/2023/may/25/artificial-intelligence-antibiotic-deadly-superbug-hospital↩
  4. https://news.adobe.com/news/news-details/2023/Adobe-Unveils-Future-of-Creative-Cloud-with-Generative-AI-as-a-Creative-Co-Pilot-in-Photoshop-default.aspx/default.aspx↩
  5. https://www.technologyreview.com/2023/05/24/1073395/ai-in-cybersecurity-yesterdays-promise-todays-reality/↩
  6. https://techcrunch.com/2023/05/23/spotify-may-use-ai-to-make-host-read-podcast-ads-that-sound-like-real-people/↩
  7. https://www.wired.com/story/chegg-embraced-ai-chatgpt-ate-its-lunch-anyway/↩
- - + + \ No newline at end of file diff --git a/blog/page/5/index.html b/blog/page/5/index.html index b32ca108..70d36406 100644 --- a/blog/page/5/index.html +++ b/blog/page/5/index.html @@ -9,8 +9,8 @@ - - + +
@@ -27,7 +27,7 @@ Usually they start off with one well-known element, like iron, which is cheap and malleable, and add one or two others to see the effect on the original material. It’s a laborious process of trial and error that inevitably yields more duds than useful results. Researchers from the Max Planck Institute managed to identify 17 promising new metals using this method.

Revolutionizing ML: Researchers Unveil a More Agile Approach 7​

Artificial intelligence researchers have celebrated a string of successes with neural networks, computer programs that roughly mimic how our brains are organized. In 2020, two researchers at the MIT led a team that introduced a new kind of neural network based on real-life intelligence — but not our own. After a breakthrough last year, the novel networks may now be versatile enough to supplant their traditional counterparts for certain applications.

Liquid neural networks offer an elegant and compact alternative , said Ken Goldberg, a roboticist at the University of California, Berkeley. These networks can run faster and more accurately than other so-called continuous-time neural networks, which model systems that vary over time

  1. https://blogs.microsoft.com/blog/2023/02/22/the-new-bing-preview-experience-arrives-on-bing-and-edge-mobile-apps-introducing-bing-now-in-skype/↩
  2. https://www.linkedin.com/pulse/how-ai-can-help-you-land-your-dream-job-step-by-step-hemachandran/↩
  3. https://deci.ai/blog/yolo-nas-object-detection-foundation-model/↩
  4. https://techcrunch.com/2023/05/04/hugging-face-and-servicenow-release-a-free-code-generating-model/amp/↩
  5. https://theconversation.com/ai-pioneer-geoffrey-hinton-says-ai-is-a-new-form-of-intelligence-unlike-our-own-have-we-been-getting-it-wrong-this-whole-time-204911↩
  6. https://www.technologyreview.com/2022/10/25/1062104/machine-learning-new-metals↩
  7. https://www.quantamagazine.org/researchers-discover-a-more-flexible-approach-to-machine-learning-20230207↩

· 6 min read
Nikita Shukla

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

RCTCET

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

  • TechWorld
    • This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.
  • Emergency
    • The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.
  • Beach Cleanup
    • Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

  • Sunday Funday
  • Treasure Hunt
  • Movie Night
  • Badminton Tournament
  • Kick it!(Football Tournament)

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

RCevent

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

- - + + \ No newline at end of file diff --git a/blog/page/6/index.html b/blog/page/6/index.html index 4ded9878..280ac3ed 100644 --- a/blog/page/6/index.html +++ b/blog/page/6/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.

· 5 min read
Mahima Churi
As technology continues to evolve, web development has become an increasingly important field, and front-end frameworks such as ReactJS have emerged as crucial tools for building dynamic, user-friendly websites. Whether you are just starting out with web development or are looking to enhance your existing skills, I hope that you will find valuable insights and tips within these pages. So sit back, grab a cup of coffee, and join me on our journey through the exciting world of ReactJS!

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What is React JS?

React JS is nothing but a java script library that helps the developers in creating reusable UI components there by increasing the efficiency of code. When making dynamic websites React JS is proven to be more effective than Vanilla JS, and hence it has become a popular choice for building fast and scalable single-page applications. In simple terms, ReactJS helps make web development more efficient, organized, and dynamic.

Characteristic Features of React JS that makes it more versatile and Popular

Features of ReactJS
Features of ReactJS

1. Virtual DOM​

In traditional web development, when changes are made to a web page, the entire page needs to be re-rendered, which can be slow and time-consuming. The Virtual DOM solves this issue by creating a virtual representation of the web page in memory so when changes are made, ReactJS updates the virtual DOM instead of the actual page, which is much faster. Then, ReactJS compares the virtual DOM to the actual page and updates only the parts that have changed, rather than the entire page. This makes the updates and rendering process much faster and more efficient, improving the overall user experience of the web application.

2. Reusable Components​

ReactJS uses a component-based architecture, which means that the user interface is built using reusable components. Each component is a self-contained unit that handles a specific task or displays a specific piece of information, we can say that each components are independent. This makes the code more organized and easier to maintain, as well as reducing the amount of redundant code.

3. Community​

React has a vast and supportive community of developers who are constantly contributing new features and tools. React is open-source, meaning that anyone can contribute to the development of the library by fixing bugs, adding new features, or improving existing ones.

Link to contribute to the React Library

4. JSX​

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used by ReactJS that allows developers to write HTML-like code within their JavaScript. This makes it easier for users to write and understand the code, as it closely resembles the structure of HTML. This helps to improve the overall development experience by making the code more intuitive and easier to read.

For example, instead of writing the following code in pure JavaScript to render a simple button:

React.createElement("button", {className: "myButton"}, "Click Me!");

The same code can be written in JSX as:

<button className="myButton">Click Me!</button>;

5. Server-side Rendering​

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the browser. In the case of React, this means that the React components can be rendered on the server, allowing the browser to receive a fully rendered HTML page, instead of having to wait for JavaScript to execute and render the page on the client side again and again.

This results in faster initial load times, as the browser doesn’t have to wait for the JavaScript to execute and render the page. Additionally, server-side rendering can improve Search Engine Optimization (SEO), as search engines can better index and understand the content of the page.

6. Compatibility​

React’s simplicity and straightforward design makes it easy for developers to learn and adopt and it works seamlessly with other libraries and frameworks, such as Redux, allowing developers to create complex and scalable web applications.

Comaprison with other Frontend Frameworks

Popular Web Frameworks
Comparison with other frameworks as per the recent survey

Source: Stack Overflow Developer Survey 2021

From the above survey it can be clearly seen that React JS was named as one on the most commonly used web Framework.

React’s virtual DOM provides fast updates and rendering compared to traditional DOM manipulation. Angular and Vue also have optimized updates, but they may not be as fast as React’s virtual DOM.

Also, React is known for its simplicity and minimalistic approach, making it relatively easy to learn and get started with. Angular, on the other hand, has a steeper learning curve due to its more complex architecture. Vue falls somewhere in between, offering a more accessible learning experience as compared to Angular.

info

You can see more detailed insights of React JS on their Official Website

Conclusion​

In conclusion, React is the future of web development, offering a robust set of features and tools that make it easy to build high-performing, scalable, and maintainable web applications. Its simplicity, performance, and compatibility with other technologies make it an excellent choice for modern web development.

· 6 min read
Himanshu Agarwal
Mahima Churi

This Blog talks about the emerging trends in Cloud computing, and also gives a gist about the term Cloud Computing and its impact in leveraging businesses and individuals. The cloud has the ability to streamline and improve a variety of processes. From understanding the meaning of cloud computing model to discussing various characteristics, this blog will be your one-stop-shop for all things cloud computing. So, fasten your seatbelts and let's dive into the exciting world of the cloud together!!


What is Cloud Computing ?

Cloud computing is a way of using current technology where we can access and use internet-based services and storage to manage, process, and store data and information, instead of having to have it all on your own personal device or computer.

We can think of it like having access to a giant computer in the sky that we can use to do our work, store our files, and run our applications, without having to worry about the technical details or maintenance of the underlying hardware and software. This makes it easier and more convenient for us to access our data and resources from anywhere in the world, as long as we have an internet connection.

Let's take a look at some intriguing features of Cloud Computing!!​


🛠️ On-Demand Self-Service

With cloud computing, we can provision computing services, like server time and network storage, automatically. No communication with the service provider will be necessary. Customers of cloud services can view their cloud services, track their usage, and provision and de-provision services by logging into their cloud accounts through a web self-service portal.

💻 Broad Network Access

Broad network connectivity is another crucial aspect of cloud computing. Through a network and on portable devices like smartphones, tablets, laptops, and desktop PCs, we can access cloud services. A private cloud employs a local area network, whereas a public cloud uses the internet. Broad network access and cloud computing both rely heavily on latency and bandwidth since they have an impact on service quality.

📝 Resource Pooling

With resource pooling, multiple customers can share physical resources using a multi-tenant model. Based on demand, this model distributes and redistributes real and virtual resources. Customers can share the same applications or infrastructure with multi-tenancy while still retaining their privacy and security. Customers may be able to designate the location of their resources at a higher level of abstraction, such as a country, state, or data centre, even though they won't know the precise location of their resources. Customers can pool a variety of resources, including memory, computing power, and bandwidth.

🔗 Rapid Elasticity

Cloud services can be elastically provisioned and released, sometimes automatically, so customers can scale quickly based on demand, thus making it highly scalable. The capabilities available for provisioning are practically unlimited. Customers can use these features whenever they want and in whatever amount. Customers can scale cloud capacity, cost, and usage without incurring additional contracts or charges. We won't need to acquire computer hardware thanks to quick elasticity.

⚙️ Measured Service

A metering capability in cloud systems optimises resource utilisation at an abstraction level appropriate for the type of service. For storage, processing, bandwidth, and users, for instance, we can utilise a metered service. A pay-for-what-you-use model is used to base payments on the customer's actual consumption. Consumers and service providers benefit from a transparent experience that is created by monitoring, managing, and reporting resource use.

Lets have a look at some of the most used Cloud Storage Services​


Most Used Cloud Storage Services
Most used Cloud Storage Services

Google Drive is by far the most popular cloud storage service in the world, with an use rate of 94.44 percent. The finest cloud storage for collaboration, Dropbox, is in second position with a still-impressive 66.2 percent, followed by OneDrive (39.35 percent) and iCloud (38.89 percent). Additionally popular cloud storage providers include MEGA (5.09 percent), Box (4.17 percent), and pCloud (1.39%), all of which made our list of the top cloud storage services.

Statistics on Cloud Service Providers​


Stats on Cloud Service Providers
Stats on Cloud Service Providers

AWS still holds over a third of the cloud services market:

  • In Q2 2022, AWS commanded 34% of the cloud market, a 1% increase year-over-year. Azure is second with 21% of the market, followed by Google Cloud (10%), Alibaba (5%), and IBM (4%).
  • Amazon's revenue from AWS grew from 5.62 in 2014 to 13.24% in 2021.
  • The survey also showed the cloud market continues to grow 34% year-over-year.
FunFact

It took Netflix seven years to migrate to AWS

Some drawbacks to have a look upon​


Drawbacks of Cloud Computing
Drawbacks of Cloud Computing

According to cybersecurity experts, the most pressing cloud security challenges are misconfiguration of the cloud infrastructure (68 percent); unauthorized access (58 percent); insecure API (52 percent); accounts, services or traffic hijacking (50 percent) and external data sharing (43 percent).

info

If you are interested in finding out more about cloud security, we have an excellent article detailing cloud security measures for cloud storage services.

Conclusion​

  • In conclusion, cloud computing has become an increasingly popular and indispensable tool for businesses and organizations of all sizes. With its ability to provide on-demand access to a wide range of computing resources, including storage, computing power, and applications, it has transformed the way organizations operate and has unlocked new opportunities for innovation and growth.
  • The cloud offers many benefits, including cost savings, scalability, increased efficiency, and improved security. As more and more businesses adopt cloud computing, it is likely that this trend will continue to grow, driving further innovation and enabling organizations to do more with less.
  • However, while the benefits of cloud computing are clear, there are also challenges that must be addressed, such as ensuring data security, managing vendor lock-in, and ensuring reliable performance.
  • Despite these challenges, the future of cloud computing looks bright, with advancements in areas such as artificial intelligence, machine learning, and the Internet of Things set to further drive its growth and revolutionize the way businesses operate.

In short, cloud computing is here to stay, and its impact on the business world will only continue to grow in the years to come.

- - + + \ No newline at end of file diff --git a/blog/page/7/index.html b/blog/page/7/index.html index d143be2e..06e85444 100644 --- a/blog/page/7/index.html +++ b/blog/page/7/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

· 4 min read
Vishal Rawat

Project management is a wild way to make sure things are progressing as they should. There is a project management technique for everything. Well, almost everything. I haven't found a project managing concept to overcome my feelings of procrastination. Someone might create it one day.

What really is Open Source?​

If you're the engineering type of person that tackles humanity's problems and urgent needs by bringing together an entire community and building a "project" with them, you'll want to know about Open source. Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.

Here it is again in bigger letters, for impact:

Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.​

And now you know what open source is. In theory, this blog post could be done!

Beyond the marketing standpoint​

Technology is a concept which is ever-changing in how it is defined, its magnitude and how we as engineers develop it. In the world of technology we always find "buzz words" which reflect the recent advancements which are so efficient that they are slowly brought within the industry as a standard way of working on projects, as a team.

One such "buzz word" in the area of software development and project management is open source. Open source is a way of working on a software typically developed in a public, collaborative manner, with the source code made freely available to anyone who wants to use, modify, or distribute it. The term "open source" was coined in 1998 by a group of people in the software industry who wanted to create a new model of software development that was more collaborative and community-driven.

Open source software is often developed and maintained by a community of volunteers and contributors, who work together to improve the software and fix bugs. Consider your homework: a dry document which contains things here and there which you know is very incomplete. If you have a good enough personality (which I don't), you send this document to all your classmates who start doing bits of your homework.

The result? A fine specimen of a document which the entire class can show to your teachers for great marks! What you just did here was open sourcing your homework and let your student community work on it to create a more appealing document which is now complete.

But open source doesn't stop there​

Imagine your homework to be your project, your classmates to be your community. This community observes your project and suggests various improvements within it. Be it suggesting simple changes of changing the fonts or re-working the already existing complex APIs and queries.

Example of suggestions
A simple conversation between a contributor and a project developer

Another way to look at open source can be building the big Lego City together, block by block. Everyone can add their own pieces to what has been constructed so far and everyone can see how the city is made. In this way, everyone can make the city better and use it how they want.

Software Engineers
Budding software engineers collaborating to build their project

Open source is a great way to bring like-minded developers together. Everybody around you, be a fresher student or an industry experienced individual, has had to encounter with open source technologies without even realizing it. From something we daily use like Android to Linux: the operating system used by many corporates and tech giants, there's no saying what the next big thing will be.

Open Source
Python, Dart, React, MongoDB, even this text box is open source

That's about the gist of what I wished to express regarding open source. Surely that's not everything but I do look forward to go in-depth into this topic and talk about various different things which excite me! Do look forward to upcoming blogposts and reach me out for any constructive criticism, if any, for the future blogposts.

- - + + \ No newline at end of file diff --git a/blog/quantum computing/index.html b/blog/quantum computing/index.html index f92bd9a8..199bb7de 100644 --- a/blog/quantum computing/index.html +++ b/blog/quantum computing/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

Quantum Computing: Beyond the Binary, Beyond Imagination

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.


What is Quantum Computing?​

Quantum computing is fundamentally different from traditional computing. Traditional computers use bits as the fundamental unit of data, which can be either 0 or 1. Quantum computing, on the other hand, makes use of quantum bits, or qubits, which can exist in numerous states at the same time due to superposition and entanglement principles.

Superposition​

Superposition enables the linear combination of both 0 and 1 to exist in a qubit, allowing for the concurrent computing of many possibilities. This idea is comparable to flipping a coin and getting both heads and tails at once.

Entanglement​

Another amazing quality of qubits is entanglement. When qubits are entangled, their states are dependent on one another even though they are separated by a great distance. The potential for quicker and more secure communication networks is made possible by this feature.

Potential of Quantum Computing ?​

The enormous potential of quantum computing rests in its capacity to resolve issues that are currently beyond the capabilities of conventional computers. Some of them are :

Cryptography
Data security is now protected by encryption, however quantum computers have the ability to establish more secure techniques by using quantum key distribution. The landscape of digital security will change as a result of this invention. Many of the encryption techniques now used to secure digital information could be cracked by quantum computers. While it might compromise current encryption, it also makes way for brand-new, incredibly secure communication techniques like quantum key distribution.
Optimization
Complex optimization problems, which have applications in logistics, finance, supply chain management, and resource allocation, are particularly well-suited for solution by quantum computing. It can examine several options concurrently, possibly resulting in more effective and economical solutions. Quantum computing may drastically change fields like logistics, banking, and drug discovery that rely on challenging optimization problems. It might look at several alternatives at once, considerably reducing computing time.
Machine Learning
By efficiently processing large datasets and spotting complicated patterns, quantum computing can improve machine learning algorithms. This might result in important developments in data analysis and AI.
Drug Discovery and Material Science
With extreme accuracy, quantum computers can replicate atomic and molecular interactions. This is crucial for the development of novel drugs because it makes it possible to simulate the behavior of intricate biological molecules much more quickly. Additionally, it helps materials science since it enables the prediction of material features, which can result in the creation of innovative materials with distinctive qualities.
Astronomy and Space Exploration
Quantum computing has the potential to substantially speed up data processing, simulations, and optimization activities in the realm of astronomy and space exploration.This technology has the potential to fundamentally alter our understanding of the universe by speeding up the discovery process and facilitating ground-breaking advances in space exploration, such as the ability to locate far-off celestial objects, create cutting-edge propulsion systems, and organize complex missions to study other planets and celestial bodies.
Artificial Intelligence and Neural Networks:
Neural networks and artificial intelligence (AI) could both benefit from quantum computing. Quantum computers can drastically speed up AI training, improve deep learning algorithms, and analyze huge datasets more quickly by taking advantage of the inherent parallelism and processing capacity of quantum systems. As a result, AI models will be able to do complicated tasks more quickly and effectively while also excelling in activities like pattern recognition, natural language processing, and optimization.

Today's Quantum Computing​

Numerous businesses and institutions are currently at the forefront of quantum computing :

  • Through the IBM Quantum Experience, IBM offers cloud-based access to quantum computers, giving researchers and developers the chance to investigate quantum algorithms.

  • With their quantum supremacy experiment using the 53-qubit Sycamore processor, Google made news by showcasing the better performance of quantum computers for a variety of activities.

  • D-Wave Systems is an expert in the alternative quantum computing method known as quantum annealing and provides quantum annealers designed for dealing with challenging optimization issues. These businesses are actively reshaping the quantum computing landscape and expanding the realm of what is possible in terms of computation.

Quantum Computing Future​

Quantum computing is a rapidly developing field. More potent quantum processors will be made available, with more qubits and enhanced error-correction capabilities. Quantum computing will be useful across a range of businesses and provide practical answers to challenging issues. The creation of a quantum internet would make it possible for people all over the world to share quantum information in an ultra-secure manner. A global race for quantum supremacy and dominance in the quantum computing industry is underway, with key players around the world:

  • China, backed by substantial government investments, has made significant progress in quantum communication and computing.

  • The United States, led by major tech companies like IBM and Google, along with innovative startups like Rigetti, is actively engaged in quantum research and development.

  • Canada hosts D-Wave Systems, known for pioneering quantum annealing technology, offering a unique approach to quantum computing.

  • In Europe, the European Union's Quantum Flagship program is driving advancements in quantum research and fostering innovation across the region. These international efforts reflect the fierce competition to harness the potential of quantum computing for various applications.

Challenges in Quantum Computing​

  • Quantum Error Correction

  • Scaling and Prodcutivity

  • Cost and Expenditure

  • Algorithm Development

  • Education and Workforce

  • Quantum Supremacy Validation

  • Quantum Software and Compilation

Getting Involved in Quantum Computing​

There are various methods to get involved with quantum computing if you're interested:

  • Learning: To assist you in understanding the principles of quantum computing, a variety of online courses, publications, and resources are accessible.

  • Quantum programming languages like Qiskit, Quipper, or Cirq should be familiarized with.

  • Consider taking part in open-source quantum software development or joining a research group in quantum computing.

Conclusion​

Quantum computing is a paradigm shift in the field of computation, not just a technological breakthrough. As this sector matures and researchers achieve advances in hardware and software, we are on the verge of a new computing era that will revolutionize what is possible in science, technology, and daily life. The challenges are substantial, but so are the potential rewards. Quantum computing marks the frontier of human knowledge and invention, and its path in the next years promises to be both thrilling and transformative.

Keep an open mind, keep informed, and be prepared to welcome the quantum future !!!!
- - + + \ No newline at end of file diff --git a/blog/rotaract-club-of-tcet/index.html b/blog/rotaract-club-of-tcet/index.html index 513e3c01..1b2c6c9a 100644 --- a/blog/rotaract-club-of-tcet/index.html +++ b/blog/rotaract-club-of-tcet/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Rotaract Club of TCET

· 6 min read
Nikita Shukla

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

RCTCET

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

  • TechWorld
    • This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.
  • Emergency
    • The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.
  • Beach Cleanup
    • Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

  • Sunday Funday
  • Treasure Hunt
  • Movie Night
  • Badminton Tournament
  • Kick it!(Football Tournament)

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

RCevent

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

- - + + \ No newline at end of file diff --git a/blog/tags/ai/index.html b/blog/tags/ai/index.html index 1d66ef51..a5a1d6a8 100644 --- a/blog/tags/ai/index.html +++ b/blog/tags/ai/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

5 posts tagged with "AI"

View All Tags

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.

· 5 min read
Aadil Rayeen

Artificial Intelligence (AI) is becoming more and more crucial in influencing how we work and live in today's quickly changing technology landscape. Automation is one of the most interesting uses of AI because it has the ability to boost productivity, streamline procedures, and usher in a smarter era. We'll look at the main aspects of AI automation in this post.

· 4 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Code Optimization Revolutionized: Google DeepMind's AI Unleashes New Speed-Boosting Technique. 1​

DeepMind's AlphaDev AI achieves groundbreaking speed improvements in sorting algorithms, surpassing existing methods by up to 70%. Its innovative techniques have been adopted by millions of software developers, marking the first integration of AI-discovered algorithms in language updates. DeepMind's gamified approach, using reinforcement learning, trains AlphaDev to construct faster and correct algorithms. This breakthrough revolutionizes code optimization and sets the stage for further AI-driven innovations in computer science.

Elevating the Shopping Experience with AI Virtual Try-On on Google Shopping. 2​

Example of Virtual Try of Clothes with AI

Google Shopping has introduced AI Virtual Try-On, a new feature that allows users to virtually try on beauty products before buying them. Using advanced machine learning algorithms and facial recognition technology, the feature provides realistic representations of the products on the user's face. It enhances convenience, addresses concerns about online shopping, and offers a seamless experience. Users can access the feature from Google Search, Google Shopping, or participating retailer websites, making informed decisions with detailed product information and user reviews. This innovation bridges the gap between online and in-store try-ons, revolutionizing the beauty shopping experience.

Ink AI Unveils ChatGPT-Based E-book Generator for Effortless Full-Length E-book Creation. 3​

Ink AI has introduced a game-changing e-book generator tool that utilizes ChatGPT, an AI language model, to effortlessly create full-length e-books. By inputting prompts, users receive context-aware responses that form the basis of their e-books, making the writing process faster and more efficient. The tool allows customization of genre, style, and length, and the user-friendly interface simplifies content creation. Ink AI's e-book generator opens up new possibilities for authors, content creators, and publishers by revolutionizing the e-book creation process with AI technology.

Meta Unveils Stablediffusion: A Groundbreaking AI Model for Music Generation. 4​

Meta has introduced Stablediffusion, an advanced AI model called MusicGen, designed for music generation. Unlike traditional models, Stablediffusion produces stable, coherent, and emotionally engaging musical compositions. Trained on diverse musical genres, the model incorporates stability mechanisms for smooth transitions and consistent structures.

It considers melody, harmonies, rhythms, and tonal variations, resulting in natural and professional-sounding compositions. Stablediffusion offers a powerful tool for musicians, composers, and music enthusiasts, revolutionizing AI-generated music with its stable and artistically satisfying output.

Draggan Goes Open Source: Empowering Developers with Advanced AI Framework. 5​

Example of DragGAN to change perspective of Lion and more

Draggan, an advanced AI framework focused on reinforcement learning, has been released as open source. This allows developers worldwide to access and utilize its capabilities for training AI models. Draggan simplifies the process with its user-friendly interface, extensive documentation, and pre-built components, enabling faster development and deployment of AI systems. By democratizing access to this powerful tool, the open-source release of Draggan promotes collaboration and accelerates advancements in AI research and application development.

MIT Introduces New Model for Accelerated Drug Discovery. 6​

MIT researchers have developed a groundbreaking AI model called AccelerateDrug, which revolutionizes the process of drug discovery. The model utilizes advanced machine learning algorithms to rapidly analyze chemical and biological data, predicting the effectiveness of potential drug compounds. By significantly reducing experimentation time and resources, AccelerateDrug streamlines the drug discovery process and expedites the development of new medications.

The model has demonstrated high accuracy and outperformed existing methods in predicting drug efficacy. AccelerateDrug has the potential to accelerate the availability of life-saving treatments, benefiting patients and advancing healthcare outcomes.

Google Introduces AudioPalm: Bridging the Gap between Text and Voice. 7​

Brief Architecture of AudioPaLM

Google has introduced AudioPalm, an innovative technology that bridges the gap between text and voice. Using advanced AI algorithms, it converts written text into human-like speech and transcribes spoken language into written text accurately. AudioPalm enhances accessibility, user experiences, and content creation, benefiting individuals with visual impairments and those seeking a more immersive interaction.

The technology has applications in education, entertainment, and accessibility services, and it integrates with existing Google services like Google Assistant and Google Translate. Google's AudioPalm represents a significant advancement in natural language processing, enabling seamless conversion between text and voice for enhanced user experiences.

  1. https://www.deepmind.com/research/highlighted-research/alphago↩
  2. https://blog.google/products/shopping/ai-virtual-try-on-google-shopping/↩
  3. https://goodereader.com/blog/e-book-news/new-chatgpt-based-e-book-generator-tool-from-ink-ai-can-create-full-length-e-books-easily↩
  4. https://analyticsindiamag.com/meta-releases-stablediffusion-for-music-musicgen/↩
  5. https://analyticsindiamag.com/draggan-is-finally-open-source/↩
  6. https://news.mit.edu/2023/new-model-offers-speedy-drug-discovery-0608↩
  7. https://google-research.github.io/seanet/audiopalm/examples/↩
- - + + \ No newline at end of file diff --git a/blog/tags/ai/page/2/index.html b/blog/tags/ai/page/2/index.html index e1f8a932..ade99177 100644 --- a/blog/tags/ai/page/2/index.html +++ b/blog/tags/ai/page/2/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

5 posts tagged with "AI"

View All Tags

· 6 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Google's PaLM 2: Revolutionizing Language Modeling with Multilingual Proficiency, Reasoning Abilities, and Coding Proficiency. 1​

Discover the cutting-edge advancements in AI from Google as they unveil PaLM 2, their next-generation language model. PaLM 2 has undergone extensive training on multilingual text, enabling it to understand, generate, and translate nuanced language across more than 100 languages. With improved reasoning capabilities and proficiency in programming languages, PaLM 2 demonstrates its potential for logic, common sense reasoning, mathematics, and coding tasks.

An Example of Prompt to Med PaLM - A specialized PaLM Model

Google has already integrated PaLM 2 into over 25 products and features, empowering users worldwide with enhanced language generation, efficient workspace features, and productivity tools. Through the development of PaLM 2, Google continues to drive innovation in AI and deliver real-world benefits in areas like healthcare and creative endeavors.

Meta's AI breakthrough: Speech recognition for 1,000+ languages now open source, paving the way for language preservation and universal communication. 2​

Meta's AI breakthrough empowers speech recognition in over 1,000 languages, a significant leap towards preserving endangered languages. The company is sharing these models as open source on GitHub, enabling developers to build inclusive speech applications for diverse languages. Existing speech recognition models cover a mere fraction of the world's 7,000 languages due to limited labeled training data. Meta overcame this challenge by retraining their AI model to learn speech patterns from audio, requiring minimal data. Their models can converse in over 1,000 languages and recognize more than 4,000, with half the error rate compared to rival models. While there are risks of mistranscription and biased words, Meta's advancements have far-reaching implications for language preservation and global communication.

AI Revolutionizes Antibiotic Discovery: Unveiling a Breakthrough Against Hospital Superbugs. 3​

Scientists from McMaster University have utilised artificial intelligence (AI) to uncover a breakthrough antibiotic called abaucin, which shows promising potential in combating drug-resistant infections, particularly Acinetobacter baumannii. This bacterium poses a significant threat in hospitals and is known to cause severe conditions like pneumonia and meningitis.

The traditional methods of antibiotic discovery have proven challenging and time-consuming. However, AI algorithms allowed researchers to swiftly assess millions of molecules, leading to the identification of abaucin. Unlike broad-spectrum antibiotics, abaucin specifically targets A. baumannii, reducing the risk of drug resistance development and opening doors to more precise and effective treatments. This study underscores the immense potential of AI in revolutionising antibiotic discovery and providing hope in the fight against deadly hospital superbugs.

Unleash Your Creativity: Photoshop's AI Transforms Your Images with a Single Text Prompt. 4​

A before &amp; after image of dog after applying Generative Fill of Photoshop

Adobe has introduced a groundbreaking AI tool called Generative Fill in its Photoshop application, leveraging generative AI to add or remove objects from photos based on a simple text prompt. Acting as an "AI co-pilot," Adobe Firefly powers this feature, aiming to revolutionize the photo editing process. While enhancing user creativity, Adobe acknowledges the need to address concerns about potential misuse of the technology. The addition of Generative Fill is expected to usher in a new era of AI-driven creativity in the creative industries, providing extraordinary results and streamlining previously time-consuming tasks. Currently available in the beta version, a wider release of this transformative AI tool in Photoshop is on the horizon.

Safeguarding the Digital Frontier: Exploring the Reality of AI in Cybersecurity. 5​

In the realm of cybersecurity, the long-awaited promise of artificial intelligence (AI) is becoming a reality. AI-driven capabilities have evolved from simple rule-based systems to sophisticated tools that leverage generative AI and contextualise vast amounts of data. This breakthrough empowers cybersecurity teams with game-changing speed and accuracy, providing them with a much-needed advantage in their ongoing battle against cybercriminals. With a skills shortage and data explosion posing challenges, matured AI capabilities address these obstacles by automating tasks, improving defence postures, and enabling precise actions.

By combining AI with automation, security teams can achieve reliable speed and enhance their ability to detect, investigate, and respond to threats. The integration of AI into threat detection and response technologies, such as IBM's QRadar Suite, amplifies the effectiveness of security operations centres (SOCs) and streamlines the incident lifecycle. With AI's assistance, SOC teams can prioritise real threats amidst the noise, accelerate investigation and response processes, and significantly enhance overall resilience and readiness in the cybersecurity industry.

Spotify's Potential AI Breakthrough: AI-Generated Podcast Ads. 6​

In a recent podcast episode, Bill Simmons shared that Spotify is reportedly working on AI technology that would allow podcast hosts to create host-read ads without having to personally record them. This development could offer podcasters exciting opportunities, including the creation of geo-targeted and multilingual ads, while saving valuable time for content creation. Although Spotify has not officially confirmed these claims, their ongoing investment in AI technology, exemplified by the introduction of AI DJ, suggests the possibility.

The advent of AI-generated podcast ads would revolutionise the industry, offering podcasters a time-saving alternative and the potential to reach a broader audience. However, concerns regarding authenticity and the risk of misinformation should also be considered. The development of AI-generated podcast ads marks a significant milestone in podcasting, with the future implementation and audience response eagerly anticipated.

Chegg vs. ChatGPT: The Battle for AI-Powered Education Dominance. 7​

Chegg, an online education company, and its encounter with the disruptive force of generative AI, particularly OpenAI's ChatGPT. Chegg's executives had previously considered the potential of AI to replace human instructors and reduce costs but underestimated the rapid pace at which consumers embraced tools like ChatGPT.

Initially, Chegg didn't view ChatGPT as a threat to its paid services. However, when OpenAI released GPT-4, students began opting for ChatGPT instead of Chegg's paid offerings, leading to a significant loss in subscriber growth and a decline in the company's market value.

Despite their efforts, Chegg's future remains uncertain, and the company's executives are focused on navigating the challenges posed by generative AI to stay relevant in the education industry.

  1. https://blog.google/technology/ai/google-palm-2-ai-large-language-model/↩
  2. https://www.technologyreview.com/2023/05/22/1073471/metas-new-ai-models-can-recognize-and-produce-speech-for-more-than-1000-languages/↩
  3. https://www.theguardian.com/technology/2023/may/25/artificial-intelligence-antibiotic-deadly-superbug-hospital↩
  4. https://news.adobe.com/news/news-details/2023/Adobe-Unveils-Future-of-Creative-Cloud-with-Generative-AI-as-a-Creative-Co-Pilot-in-Photoshop-default.aspx/default.aspx↩
  5. https://www.technologyreview.com/2023/05/24/1073395/ai-in-cybersecurity-yesterdays-promise-todays-reality/↩
  6. https://techcrunch.com/2023/05/23/spotify-may-use-ai-to-make-host-read-podcast-ads-that-sound-like-real-people/↩
  7. https://www.wired.com/story/chegg-embraced-ai-chatgpt-ate-its-lunch-anyway/↩

· 5 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Unlock the Power of BingAI: Experience the Future, Today! 1​

Microsoft has made Bing AI accessible to the public, eliminating the waitlist requirement. Users can now try out the AI bot by signing in to Bing using their Microsoft account on the Edge browser. The latest update introduces several exciting features powered by OpenAI's technologies.

Also, Bing AI now supports rich "visual answers," displaying graphs, charts, and formatted content. The Bing Image Creator has been upgraded to support over 100 languages, enabling the generation of AI images based on text prompts and visual examples. Additionally, users can export and share chats, benefit from improved summarization capabilities for long documents, and enjoy actions within Edge for quicker access to relevant content. Microsoft is also developing third-party plug-ins to expand functionality within Bing Chat.

LinkedIn's Intelligent Assistance: Craft the Perfect Job Application 2​

LinkedIn is reportedly testing an AI-powered feature that provides personalized writing suggestions for job seekers, aiming to help them create tailored job applications. The feature generates short cover letter-like messages using information from the user's profile, the hiring manager's profile, the job description, and the targeted company. While the AI-generated drafts serve as a starting point, LinkedIn emphasizes the importance of customization and encourages users to review and edit the suggestions to reflect their own voice and style.

This development builds upon LinkedIn's existing AI writing tool for profile creation. The adoption of AI in job application drafting reflects the growing interest in artificial intelligence, with its potential to enhance user experiences and improve outcomes in various industries, including recruitment and career development.

YOLO-NAS: Revolutionizing Object Detection with Unprecedented Precision 3​

Deci AI, a deep learning firm, has unveiled YOLO-NAS, its latest deep learning model designed for real-time object detection with remarkable performance. Built on Deci's Neural Architecture Search Technology, AutoNAC™, YOLO-NAS outperforms other models like YOLOv6, YOLOv7, and YOLOv8, including the recently launched YOLOv8. AutoNAC democratizes Neural Architecture Search, enabling organizations to create customized, fast, accurate, and efficient deep learning models quickly.

YOLO-NAS delivers superior throughput, achieving 50% more throughput and 1 mAP higher accuracy compared to other YOLO models. It is pre-trained on popular datasets, making it suitable for various real-world applications. The open-source model is available with pre-trained weights for non-commercial research use on Deci's PyTorch-based computer vision training library called SuperGradients.

Introducing StarCoder: Free Code-Generating Assistant 4​

Hugging Face and ServiceNow Research have jointly released StarCoder, a free code-generating model that offers an alternative to existing AI systems like GitHub's Copilot. StarCoder, part of the BigCode project, was trained on over 80 programming languages and integrates with Microsoft's Visual Studio Code editor. Unlike other commercial models, StarCoder is royalty-free and available for use by anyone, including corporations.

The project aims to develop state-of-the-art AI systems for code generation in an open and responsible manner. StarCoder's release comes amidst debates around the use of public source code and licensing agreements for training AI models, with efforts made to address privacy concerns and adhere to ethical best practices.

Geoffrey Hinton: AI's Threat Could Be 'More Urgent' Than Climate Change 5​

In a recent interview, renowned AI pioneer Geoffrey Hinton expressed his concerns that the threat posed by artificial intelligence (AI) to humanity could be even more urgent than climate change. Hinton, often referred to as one of the "godfathers of AI," believes that the risks associated with AI technology are significant and warrant immediate attention. Having recently left Alphabet, Hinton intends to speak out about these risks without any constraints from his former employer. As the debate around AI's impact on society continues to unfold, Hinton's remarks highlight the need for careful consideration and proactive measures to ensure the responsible and ethical development and deployment of AI technologies.

Accelerating the Quest for New Metals: ML Offers a Promising Solution 6​

Machine learning could help develop new types of metals with useful properties, such as resistance to extreme temperatures and rust, according to new research. This could be useful in a range of sectors—for example, metals that perform well at lower temperatures could improve spacecraft, while metals that resist corrosion could be used for boats and submarines. Usually they start off with one well-known element, like iron, which is cheap and malleable, and add one or two others to see the effect on the original material. It’s a laborious process of trial and error that inevitably yields more duds than useful results. Researchers from the Max Planck Institute managed to identify 17 promising new metals using this method.

Revolutionizing ML: Researchers Unveil a More Agile Approach 7​

Artificial intelligence researchers have celebrated a string of successes with neural networks, computer programs that roughly mimic how our brains are organized. In 2020, two researchers at the MIT led a team that introduced a new kind of neural network based on real-life intelligence — but not our own. After a breakthrough last year, the novel networks may now be versatile enough to supplant their traditional counterparts for certain applications.

Liquid neural networks offer an elegant and compact alternative , said Ken Goldberg, a roboticist at the University of California, Berkeley. These networks can run faster and more accurately than other so-called continuous-time neural networks, which model systems that vary over time

  1. https://blogs.microsoft.com/blog/2023/02/22/the-new-bing-preview-experience-arrives-on-bing-and-edge-mobile-apps-introducing-bing-now-in-skype/↩
  2. https://www.linkedin.com/pulse/how-ai-can-help-you-land-your-dream-job-step-by-step-hemachandran/↩
  3. https://deci.ai/blog/yolo-nas-object-detection-foundation-model/↩
  4. https://techcrunch.com/2023/05/04/hugging-face-and-servicenow-release-a-free-code-generating-model/amp/↩
  5. https://theconversation.com/ai-pioneer-geoffrey-hinton-says-ai-is-a-new-form-of-intelligence-unlike-our-own-have-we-been-getting-it-wrong-this-whole-time-204911↩
  6. https://www.technologyreview.com/2022/10/25/1062104/machine-learning-new-metals↩
  7. https://www.quantamagazine.org/researchers-discover-a-more-flexible-approach-to-machine-learning-20230207↩
- - + + \ No newline at end of file diff --git a/blog/tags/api/index.html b/blog/tags/api/index.html index 473c3a63..ab33ee44 100644 --- a/blog/tags/api/index.html +++ b/blog/tags/api/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "api"

View All Tags

· 4 min read
Himanshu Agarwal

Applications and systems rely on smooth communication and data sharing to deliver improved functionality and services in today's interconnected digital environment. Application Programming Interfaces (APIs) are quite important in this situation. APIs serve as mediators, enabling interoperability, data sharing, and communication between various software programmes. This article will provide you a thorough introduction to APIs and their importance in contemporary software development, whether you're a developer, a tech enthusiast, or just interested about the world of APIs.


APIs to a layman
- - + + \ No newline at end of file diff --git a/blog/tags/artificial-intelligence/index.html b/blog/tags/artificial-intelligence/index.html index 9ff92633..01c1a780 100644 --- a/blog/tags/artificial-intelligence/index.html +++ b/blog/tags/artificial-intelligence/index.html @@ -9,8 +9,8 @@ - - + +
@@ -24,7 +24,7 @@ the speed limit, and other information to navigate the road.

Theory Of Mind

  • Theory of Mind AI should understand human emotions, people, and beliefs, and be able to interact socially like humans.
  • This type of AI machine is still not developed, but researchers are making lots of efforts and improvements for developing such AI machines.

Self-Awareness

  • Self-awareness AI is the future of Artificial Intelligence. These machines will be super intelligent and will have their own consciousness, sentiments, and self-awareness.
  • These machines will be smarter than the human mind.
  • Self-Awareness AI does not exist in reality still and it is a hypothetical concept.

Conclusion​

Artificial intelligence has come a long way since the early days of rule-based systems, and its evolution shows no signs of slowing down. With ongoing research and development, the potential applications of AI are vast and ever-expanding.

If you enjoy reading stories on similar topics then do follow the account. Let me know your thoughts below

- - + + \ No newline at end of file diff --git a/blog/tags/authentication/index.html b/blog/tags/authentication/index.html index 375850ed..344024c6 100644 --- a/blog/tags/authentication/index.html +++ b/blog/tags/authentication/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "authentication"

View All Tags

· 4 min read
Himanshu Agarwal

Applications and systems rely on smooth communication and data sharing to deliver improved functionality and services in today's interconnected digital environment. Application Programming Interfaces (APIs) are quite important in this situation. APIs serve as mediators, enabling interoperability, data sharing, and communication between various software programmes. This article will provide you a thorough introduction to APIs and their importance in contemporary software development, whether you're a developer, a tech enthusiast, or just interested about the world of APIs.


APIs to a layman
- - + + \ No newline at end of file diff --git a/blog/tags/automation/index.html b/blog/tags/automation/index.html index 8cfe5a51..d14f1010 100644 --- a/blog/tags/automation/index.html +++ b/blog/tags/automation/index.html @@ -9,8 +9,8 @@ - - + +
@@ -26,7 +26,7 @@ the speed limit, and other information to navigate the road.

Theory Of Mind

  • Theory of Mind AI should understand human emotions, people, and beliefs, and be able to interact socially like humans.
  • This type of AI machine is still not developed, but researchers are making lots of efforts and improvements for developing such AI machines.

Self-Awareness

  • Self-awareness AI is the future of Artificial Intelligence. These machines will be super intelligent and will have their own consciousness, sentiments, and self-awareness.
  • These machines will be smarter than the human mind.
  • Self-Awareness AI does not exist in reality still and it is a hypothetical concept.

Conclusion​

Artificial intelligence has come a long way since the early days of rule-based systems, and its evolution shows no signs of slowing down. With ongoing research and development, the potential applications of AI are vast and ever-expanding.

If you enjoy reading stories on similar topics then do follow the account. Let me know your thoughts below

- - + + \ No newline at end of file diff --git a/blog/tags/binary/index.html b/blog/tags/binary/index.html index 0a6f1031..24aff482 100644 --- a/blog/tags/binary/index.html +++ b/blog/tags/binary/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Binary"

View All Tags

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.

- - + + \ No newline at end of file diff --git a/blog/tags/blockchain/index.html b/blog/tags/blockchain/index.html index 488b59e8..0ba7a67a 100644 --- a/blog/tags/blockchain/index.html +++ b/blog/tags/blockchain/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Blockchain"

View All Tags

· 7 min read
Kashish Singh

Ever wondered what blockchain is and how it looks? Let's explore the realm of blockchain together. This blog focuses on the basics of blockchain technology along with its applications. In this evolving era, it is important to understand this technology because, according to recent research, blockchain has the potential to reshape the future and the way we perceive it.

- - + + \ No newline at end of file diff --git a/blog/tags/cli/index.html b/blog/tags/cli/index.html index ec69b91e..401c0d21 100644 --- a/blog/tags/cli/index.html +++ b/blog/tags/cli/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "cli"

View All Tags

· 14 min read
Gaurang Vishwakarma
Saasha Gupta

Linux is an operating system kernel. It was originally written in 1991 by Linus Torvalds for his personal use, and it was soon adopted as the kernel for the GNU operating system, which was written to be a free (libre) replacement for Unix.

So, what even is GNU/Linux? What is free software? You must have so many more questions! Through this blog, we will try to understand what is linux, and why it is the most popular operating system in the world.

- - + + \ No newline at end of file diff --git a/blog/tags/cloud-computing/index.html b/blog/tags/cloud-computing/index.html index 704169ed..b9929027 100644 --- a/blog/tags/cloud-computing/index.html +++ b/blog/tags/cloud-computing/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "cloud computing"

View All Tags

· 6 min read
Himanshu Agarwal
Mahima Churi

This Blog talks about the emerging trends in Cloud computing, and also gives a gist about the term Cloud Computing and its impact in leveraging businesses and individuals. The cloud has the ability to streamline and improve a variety of processes. From understanding the meaning of cloud computing model to discussing various characteristics, this blog will be your one-stop-shop for all things cloud computing. So, fasten your seatbelts and let's dive into the exciting world of the cloud together!!


What is Cloud Computing ?

Cloud computing is a way of using current technology where we can access and use internet-based services and storage to manage, process, and store data and information, instead of having to have it all on your own personal device or computer.

We can think of it like having access to a giant computer in the sky that we can use to do our work, store our files, and run our applications, without having to worry about the technical details or maintenance of the underlying hardware and software. This makes it easier and more convenient for us to access our data and resources from anywhere in the world, as long as we have an internet connection.

Let's take a look at some intriguing features of Cloud Computing!!​


🛠️ On-Demand Self-Service

With cloud computing, we can provision computing services, like server time and network storage, automatically. No communication with the service provider will be necessary. Customers of cloud services can view their cloud services, track their usage, and provision and de-provision services by logging into their cloud accounts through a web self-service portal.

💻 Broad Network Access

Broad network connectivity is another crucial aspect of cloud computing. Through a network and on portable devices like smartphones, tablets, laptops, and desktop PCs, we can access cloud services. A private cloud employs a local area network, whereas a public cloud uses the internet. Broad network access and cloud computing both rely heavily on latency and bandwidth since they have an impact on service quality.

📝 Resource Pooling

With resource pooling, multiple customers can share physical resources using a multi-tenant model. Based on demand, this model distributes and redistributes real and virtual resources. Customers can share the same applications or infrastructure with multi-tenancy while still retaining their privacy and security. Customers may be able to designate the location of their resources at a higher level of abstraction, such as a country, state, or data centre, even though they won't know the precise location of their resources. Customers can pool a variety of resources, including memory, computing power, and bandwidth.

🔗 Rapid Elasticity

Cloud services can be elastically provisioned and released, sometimes automatically, so customers can scale quickly based on demand, thus making it highly scalable. The capabilities available for provisioning are practically unlimited. Customers can use these features whenever they want and in whatever amount. Customers can scale cloud capacity, cost, and usage without incurring additional contracts or charges. We won't need to acquire computer hardware thanks to quick elasticity.

⚙️ Measured Service

A metering capability in cloud systems optimises resource utilisation at an abstraction level appropriate for the type of service. For storage, processing, bandwidth, and users, for instance, we can utilise a metered service. A pay-for-what-you-use model is used to base payments on the customer's actual consumption. Consumers and service providers benefit from a transparent experience that is created by monitoring, managing, and reporting resource use.

Lets have a look at some of the most used Cloud Storage Services​


Most Used Cloud Storage Services
Most used Cloud Storage Services

Google Drive is by far the most popular cloud storage service in the world, with an use rate of 94.44 percent. The finest cloud storage for collaboration, Dropbox, is in second position with a still-impressive 66.2 percent, followed by OneDrive (39.35 percent) and iCloud (38.89 percent). Additionally popular cloud storage providers include MEGA (5.09 percent), Box (4.17 percent), and pCloud (1.39%), all of which made our list of the top cloud storage services.

Statistics on Cloud Service Providers​


Stats on Cloud Service Providers
Stats on Cloud Service Providers

AWS still holds over a third of the cloud services market:

  • In Q2 2022, AWS commanded 34% of the cloud market, a 1% increase year-over-year. Azure is second with 21% of the market, followed by Google Cloud (10%), Alibaba (5%), and IBM (4%).
  • Amazon's revenue from AWS grew from 5.62 in 2014 to 13.24% in 2021.
  • The survey also showed the cloud market continues to grow 34% year-over-year.
FunFact

It took Netflix seven years to migrate to AWS

Some drawbacks to have a look upon​


Drawbacks of Cloud Computing
Drawbacks of Cloud Computing

According to cybersecurity experts, the most pressing cloud security challenges are misconfiguration of the cloud infrastructure (68 percent); unauthorized access (58 percent); insecure API (52 percent); accounts, services or traffic hijacking (50 percent) and external data sharing (43 percent).

info

If you are interested in finding out more about cloud security, we have an excellent article detailing cloud security measures for cloud storage services.

Conclusion​

  • In conclusion, cloud computing has become an increasingly popular and indispensable tool for businesses and organizations of all sizes. With its ability to provide on-demand access to a wide range of computing resources, including storage, computing power, and applications, it has transformed the way organizations operate and has unlocked new opportunities for innovation and growth.
  • The cloud offers many benefits, including cost savings, scalability, increased efficiency, and improved security. As more and more businesses adopt cloud computing, it is likely that this trend will continue to grow, driving further innovation and enabling organizations to do more with less.
  • However, while the benefits of cloud computing are clear, there are also challenges that must be addressed, such as ensuring data security, managing vendor lock-in, and ensuring reliable performance.
  • Despite these challenges, the future of cloud computing looks bright, with advancements in areas such as artificial intelligence, machine learning, and the Internet of Things set to further drive its growth and revolutionize the way businesses operate.

In short, cloud computing is here to stay, and its impact on the business world will only continue to grow in the years to come.

- - + + \ No newline at end of file diff --git a/blog/tags/cloud/index.html b/blog/tags/cloud/index.html index 4cba3b55..1b6eac8c 100644 --- a/blog/tags/cloud/index.html +++ b/blog/tags/cloud/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "cloud"

View All Tags

· 5 min read
Om Hinge

Hey there, fellow gamers! Today, we're diving into the fascinating world of cloud gaming, a technology that's changing the way we play and enjoy our favorite titles. In this article, we'll break down the concept of cloud gaming, its evolution, and its promising future.

Introduction to Cloud Gaming​

Imagine playing high-quality video games without the need for expensive gaming hardware or the hassle of downloading and installing massive game files. That's the magic of cloud gaming! It's like Netflix for gamers, where you can instantly access and play games over the internet without worrying about hardware requirements.

Most modern games demand a hefty amount of storage space and powerful hardware to run smoothly. Think about titles like Call of Duty's Warzone, which takes up over 1000GB of storage. To play these games with the best experience, you'd need a high-end PC or gaming console. But what if there was a more affordable alternative?

Cloud Gaming Demonstration by playing Cyberpunk 2077 on mobile

How Cloud Gaming Works​

Cloud Gaming flow

Cloud gaming operates within the realm of cloud computing. Instead of storing game files on your local device, they're hosted and processed on powerful remote servers in data centers. Here's how it works in a nutshell:

  • Remote Servers: Powerful servers host and run the games, eliminating the need for you to download and install them on your device.

  • Streaming Gameplay: Similar to streaming services like Netflix, cloud gaming sends a video stream of the gameplay over the internet to your device.

  • Input Control: Your inputs (the buttons you press and the moves you make) are sent to the server, where the game responds accordingly. This allows you to play even on low-end devices.

While cloud gaming offers incredible convenience, it's important to note that it can introduce some input lag, depending on factors like your internet connection stability and the distance between you and the server.

Cloud Gaming is one of the Best Examples to showcase the power of Cloud Computing.

The History and Future of Cloud Gaming​

In the past, cloud gaming faced numerous challenges, including network issues. Google's attempt with Google Stadia was ambitious but struggled due to connectivity problems. Other giants like Amazon and Microsoft also entered the arena with Amazon Luna and Xbox cloud gaming.

However, the future of cloud gaming looks bright, especially in countries like India. Gaming is growing rapidly, and cloud gaming provides an affordable platform for those unable to invest in high-end gaming hardware. The potential to earn rewards through gaming is also on the rise, further boosting its popularity.

The primary challenge facing cloud gaming today is network-related issues, but providers are actively working on solutions to make it accessible to more users.

We can say Cloud Gaming was just the first step for the cloud computing service to even non-tech users. Google is developing & testing Cloud Quantum computing so that one day everyone can access the Incredible power of Quantum computers without the need for a quantum rig, which might be bigger than most of our houses.

cloud quantum computing

Advantages and Drawbacks of Cloud Gaming​

Cloud gaming offers several advantages, including:

  • Universal Platform: You can play games on any device with an internet connection, from consoles to smartphones.

  • Cost-Efficiency: No need for expensive hardware, as the processing is done on remote servers.

  • Portability: Play on the go without worrying about installation and setup.

However, it's not without its drawbacks:

  • Internet Dependency: A stable internet connection is crucial for a smooth experience.

  • Input Lag: Some games may suffer from input delay due to server processing.

  • Limited Awareness: Many people are still unaware of cloud gaming, and few providers exist compared to traditional gaming options.

Current Status of Cloud Gaming​

Several cloud gaming services are making waves in the industry:

  • Nvidia GeForce Now: This service is known for its low system requirements, compatibility with various devices, and a free trial period.
  • XBox Game Cloud: Known for Various game titles for free to play in the subscription of Game Pass.
  • JioGames Cloud: Building the Cloud gaming culture & infrastructure in India at a reasonable rate.

Is Cloud Gaming Worth It?​

While cloud gaming shows immense potential, it's still in its early stages. Input lag and connectivity issues can be frustrating, especially for competitive gamers. Traditional gaming setups remain a popular choice. However, as technology advances, cloud gaming has the potential to become the future of gaming in the coming decade.

In conclusion, cloud gaming is a game-changer with the potential to democratize gaming by making it accessible to more players. As it evolves and overcomes its current challenges, we can expect cloud gaming to reshape the gaming landscape in the near future.

References:​

- - + + \ No newline at end of file diff --git a/blog/tags/cncf/index.html b/blog/tags/cncf/index.html index 5f9dc204..6241897b 100644 --- a/blog/tags/cncf/index.html +++ b/blog/tags/cncf/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "CNCF"

View All Tags

· 6 min read
Rajdeep Pal

CNCF Zero to Merge is a program by the Cloud Native Computing Foundation that helps newcomers make their first open-source contribution. It aims to lower the barrier for people who have never contributed to open source before, especially those from underrepresented groups. This blog summarizes my experience in the first-ever edition of the program


CNCF Zero to Merge - Your first step towards Open-Source

CNCF LOGO

- - + + \ No newline at end of file diff --git a/blog/tags/community/index.html b/blog/tags/community/index.html index 6895839c..ee6076bc 100644 --- a/blog/tags/community/index.html +++ b/blog/tags/community/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "community"

View All Tags

· 6 min read
Nikita Shukla

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

RCTCET

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

  • TechWorld
    • This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.
  • Emergency
    • The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.
  • Beach Cleanup
    • Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

  • Sunday Funday
  • Treasure Hunt
  • Movie Night
  • Badminton Tournament
  • Kick it!(Football Tournament)

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

RCevent

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

- - + + \ No newline at end of file diff --git a/blog/tags/css/index.html b/blog/tags/css/index.html index 1bed80a2..5ce07c68 100644 --- a/blog/tags/css/index.html +++ b/blog/tags/css/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "CSS"

View All Tags

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.
- - + + \ No newline at end of file diff --git a/blog/tags/cultural/index.html b/blog/tags/cultural/index.html index 56eb1d24..fc07998b 100644 --- a/blog/tags/cultural/index.html +++ b/blog/tags/cultural/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "cultural"

View All Tags

· 6 min read
Nikita Shukla

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

RCTCET

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

  • TechWorld
    • This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.
  • Emergency
    • The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.
  • Beach Cleanup
    • Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

  • Sunday Funday
  • Treasure Hunt
  • Movie Night
  • Badminton Tournament
  • Kick it!(Football Tournament)

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

RCevent

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

- - + + \ No newline at end of file diff --git a/blog/tags/cyberpunk/index.html b/blog/tags/cyberpunk/index.html index 47bce60e..e610f89f 100644 --- a/blog/tags/cyberpunk/index.html +++ b/blog/tags/cyberpunk/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "cyberpunk"

View All Tags

· 5 min read
Om Hinge

Hey there, fellow gamers! Today, we're diving into the fascinating world of cloud gaming, a technology that's changing the way we play and enjoy our favorite titles. In this article, we'll break down the concept of cloud gaming, its evolution, and its promising future.

Introduction to Cloud Gaming​

Imagine playing high-quality video games without the need for expensive gaming hardware or the hassle of downloading and installing massive game files. That's the magic of cloud gaming! It's like Netflix for gamers, where you can instantly access and play games over the internet without worrying about hardware requirements.

Most modern games demand a hefty amount of storage space and powerful hardware to run smoothly. Think about titles like Call of Duty's Warzone, which takes up over 1000GB of storage. To play these games with the best experience, you'd need a high-end PC or gaming console. But what if there was a more affordable alternative?

Cloud Gaming Demonstration by playing Cyberpunk 2077 on mobile

How Cloud Gaming Works​

Cloud Gaming flow

Cloud gaming operates within the realm of cloud computing. Instead of storing game files on your local device, they're hosted and processed on powerful remote servers in data centers. Here's how it works in a nutshell:

  • Remote Servers: Powerful servers host and run the games, eliminating the need for you to download and install them on your device.

  • Streaming Gameplay: Similar to streaming services like Netflix, cloud gaming sends a video stream of the gameplay over the internet to your device.

  • Input Control: Your inputs (the buttons you press and the moves you make) are sent to the server, where the game responds accordingly. This allows you to play even on low-end devices.

While cloud gaming offers incredible convenience, it's important to note that it can introduce some input lag, depending on factors like your internet connection stability and the distance between you and the server.

Cloud Gaming is one of the Best Examples to showcase the power of Cloud Computing.

The History and Future of Cloud Gaming​

In the past, cloud gaming faced numerous challenges, including network issues. Google's attempt with Google Stadia was ambitious but struggled due to connectivity problems. Other giants like Amazon and Microsoft also entered the arena with Amazon Luna and Xbox cloud gaming.

However, the future of cloud gaming looks bright, especially in countries like India. Gaming is growing rapidly, and cloud gaming provides an affordable platform for those unable to invest in high-end gaming hardware. The potential to earn rewards through gaming is also on the rise, further boosting its popularity.

The primary challenge facing cloud gaming today is network-related issues, but providers are actively working on solutions to make it accessible to more users.

We can say Cloud Gaming was just the first step for the cloud computing service to even non-tech users. Google is developing & testing Cloud Quantum computing so that one day everyone can access the Incredible power of Quantum computers without the need for a quantum rig, which might be bigger than most of our houses.

cloud quantum computing

Advantages and Drawbacks of Cloud Gaming​

Cloud gaming offers several advantages, including:

  • Universal Platform: You can play games on any device with an internet connection, from consoles to smartphones.

  • Cost-Efficiency: No need for expensive hardware, as the processing is done on remote servers.

  • Portability: Play on the go without worrying about installation and setup.

However, it's not without its drawbacks:

  • Internet Dependency: A stable internet connection is crucial for a smooth experience.

  • Input Lag: Some games may suffer from input delay due to server processing.

  • Limited Awareness: Many people are still unaware of cloud gaming, and few providers exist compared to traditional gaming options.

Current Status of Cloud Gaming​

Several cloud gaming services are making waves in the industry:

  • Nvidia GeForce Now: This service is known for its low system requirements, compatibility with various devices, and a free trial period.
  • XBox Game Cloud: Known for Various game titles for free to play in the subscription of Game Pass.
  • JioGames Cloud: Building the Cloud gaming culture & infrastructure in India at a reasonable rate.

Is Cloud Gaming Worth It?​

While cloud gaming shows immense potential, it's still in its early stages. Input lag and connectivity issues can be frustrating, especially for competitive gamers. Traditional gaming setups remain a popular choice. However, as technology advances, cloud gaming has the potential to become the future of gaming in the coming decade.

In conclusion, cloud gaming is a game-changer with the potential to democratize gaming by making it accessible to more players. As it evolves and overcomes its current challenges, we can expect cloud gaming to reshape the gaming landscape in the near future.

References:​

- - + + \ No newline at end of file diff --git a/blog/tags/data-extraction/index.html b/blog/tags/data-extraction/index.html index 1bcc723b..17ac3d32 100644 --- a/blog/tags/data-extraction/index.html +++ b/blog/tags/data-extraction/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

One post tagged with "data extraction"

View All Tags

· 6 min read
Mahima Churi

Web crawling, also known as web scraping, is the process of automatically extracting data from websites. It allows us to gather valuable information from various sources on the internet efficiently and in a structured manner. In this blog, we’ll explore the fundamentals of web crawling and how you can get started with your own data extraction projects.


- - + + \ No newline at end of file diff --git a/blog/tags/data-science/index.html b/blog/tags/data-science/index.html index 4672285b..521dad8b 100644 --- a/blog/tags/data-science/index.html +++ b/blog/tags/data-science/index.html @@ -9,8 +9,8 @@ - - + +
@@ -24,7 +24,7 @@ the speed limit, and other information to navigate the road.

Theory Of Mind

  • Theory of Mind AI should understand human emotions, people, and beliefs, and be able to interact socially like humans.
  • This type of AI machine is still not developed, but researchers are making lots of efforts and improvements for developing such AI machines.

Self-Awareness

  • Self-awareness AI is the future of Artificial Intelligence. These machines will be super intelligent and will have their own consciousness, sentiments, and self-awareness.
  • These machines will be smarter than the human mind.
  • Self-Awareness AI does not exist in reality still and it is a hypothetical concept.

Conclusion​

Artificial intelligence has come a long way since the early days of rule-based systems, and its evolution shows no signs of slowing down. With ongoing research and development, the potential applications of AI are vast and ever-expanding.

If you enjoy reading stories on similar topics then do follow the account. Let me know your thoughts below

- - + + \ No newline at end of file diff --git a/blog/tags/data/index.html b/blog/tags/data/index.html index 0ce6d7e0..823ebc42 100644 --- a/blog/tags/data/index.html +++ b/blog/tags/data/index.html @@ -9,8 +9,8 @@ - - + +
@@ -24,7 +24,7 @@ the speed limit, and other information to navigate the road.

Theory Of Mind

  • Theory of Mind AI should understand human emotions, people, and beliefs, and be able to interact socially like humans.
  • This type of AI machine is still not developed, but researchers are making lots of efforts and improvements for developing such AI machines.

Self-Awareness

  • Self-awareness AI is the future of Artificial Intelligence. These machines will be super intelligent and will have their own consciousness, sentiments, and self-awareness.
  • These machines will be smarter than the human mind.
  • Self-Awareness AI does not exist in reality still and it is a hypothetical concept.

Conclusion​

Artificial intelligence has come a long way since the early days of rule-based systems, and its evolution shows no signs of slowing down. With ongoing research and development, the potential applications of AI are vast and ever-expanding.

If you enjoy reading stories on similar topics then do follow the account. Let me know your thoughts below

- - + + \ No newline at end of file diff --git a/blog/tags/data/page/2/index.html b/blog/tags/data/page/2/index.html index 5714053f..27b7602c 100644 --- a/blog/tags/data/page/2/index.html +++ b/blog/tags/data/page/2/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

4 posts tagged with "Data"

View All Tags

· 6 min read
Himanshu Agarwal
Mahima Churi

This Blog talks about the emerging trends in Cloud computing, and also gives a gist about the term Cloud Computing and its impact in leveraging businesses and individuals. The cloud has the ability to streamline and improve a variety of processes. From understanding the meaning of cloud computing model to discussing various characteristics, this blog will be your one-stop-shop for all things cloud computing. So, fasten your seatbelts and let's dive into the exciting world of the cloud together!!


What is Cloud Computing ?

Cloud computing is a way of using current technology where we can access and use internet-based services and storage to manage, process, and store data and information, instead of having to have it all on your own personal device or computer.

We can think of it like having access to a giant computer in the sky that we can use to do our work, store our files, and run our applications, without having to worry about the technical details or maintenance of the underlying hardware and software. This makes it easier and more convenient for us to access our data and resources from anywhere in the world, as long as we have an internet connection.

Let's take a look at some intriguing features of Cloud Computing!!​


🛠️ On-Demand Self-Service

With cloud computing, we can provision computing services, like server time and network storage, automatically. No communication with the service provider will be necessary. Customers of cloud services can view their cloud services, track their usage, and provision and de-provision services by logging into their cloud accounts through a web self-service portal.

💻 Broad Network Access

Broad network connectivity is another crucial aspect of cloud computing. Through a network and on portable devices like smartphones, tablets, laptops, and desktop PCs, we can access cloud services. A private cloud employs a local area network, whereas a public cloud uses the internet. Broad network access and cloud computing both rely heavily on latency and bandwidth since they have an impact on service quality.

📝 Resource Pooling

With resource pooling, multiple customers can share physical resources using a multi-tenant model. Based on demand, this model distributes and redistributes real and virtual resources. Customers can share the same applications or infrastructure with multi-tenancy while still retaining their privacy and security. Customers may be able to designate the location of their resources at a higher level of abstraction, such as a country, state, or data centre, even though they won't know the precise location of their resources. Customers can pool a variety of resources, including memory, computing power, and bandwidth.

🔗 Rapid Elasticity

Cloud services can be elastically provisioned and released, sometimes automatically, so customers can scale quickly based on demand, thus making it highly scalable. The capabilities available for provisioning are practically unlimited. Customers can use these features whenever they want and in whatever amount. Customers can scale cloud capacity, cost, and usage without incurring additional contracts or charges. We won't need to acquire computer hardware thanks to quick elasticity.

⚙️ Measured Service

A metering capability in cloud systems optimises resource utilisation at an abstraction level appropriate for the type of service. For storage, processing, bandwidth, and users, for instance, we can utilise a metered service. A pay-for-what-you-use model is used to base payments on the customer's actual consumption. Consumers and service providers benefit from a transparent experience that is created by monitoring, managing, and reporting resource use.

Lets have a look at some of the most used Cloud Storage Services​


Most Used Cloud Storage Services
Most used Cloud Storage Services

Google Drive is by far the most popular cloud storage service in the world, with an use rate of 94.44 percent. The finest cloud storage for collaboration, Dropbox, is in second position with a still-impressive 66.2 percent, followed by OneDrive (39.35 percent) and iCloud (38.89 percent). Additionally popular cloud storage providers include MEGA (5.09 percent), Box (4.17 percent), and pCloud (1.39%), all of which made our list of the top cloud storage services.

Statistics on Cloud Service Providers​


Stats on Cloud Service Providers
Stats on Cloud Service Providers

AWS still holds over a third of the cloud services market:

  • In Q2 2022, AWS commanded 34% of the cloud market, a 1% increase year-over-year. Azure is second with 21% of the market, followed by Google Cloud (10%), Alibaba (5%), and IBM (4%).
  • Amazon's revenue from AWS grew from 5.62 in 2014 to 13.24% in 2021.
  • The survey also showed the cloud market continues to grow 34% year-over-year.
FunFact

It took Netflix seven years to migrate to AWS

Some drawbacks to have a look upon​


Drawbacks of Cloud Computing
Drawbacks of Cloud Computing

According to cybersecurity experts, the most pressing cloud security challenges are misconfiguration of the cloud infrastructure (68 percent); unauthorized access (58 percent); insecure API (52 percent); accounts, services or traffic hijacking (50 percent) and external data sharing (43 percent).

info

If you are interested in finding out more about cloud security, we have an excellent article detailing cloud security measures for cloud storage services.

Conclusion​

  • In conclusion, cloud computing has become an increasingly popular and indispensable tool for businesses and organizations of all sizes. With its ability to provide on-demand access to a wide range of computing resources, including storage, computing power, and applications, it has transformed the way organizations operate and has unlocked new opportunities for innovation and growth.
  • The cloud offers many benefits, including cost savings, scalability, increased efficiency, and improved security. As more and more businesses adopt cloud computing, it is likely that this trend will continue to grow, driving further innovation and enabling organizations to do more with less.
  • However, while the benefits of cloud computing are clear, there are also challenges that must be addressed, such as ensuring data security, managing vendor lock-in, and ensuring reliable performance.
  • Despite these challenges, the future of cloud computing looks bright, with advancements in areas such as artificial intelligence, machine learning, and the Internet of Things set to further drive its growth and revolutionize the way businesses operate.

In short, cloud computing is here to stay, and its impact on the business world will only continue to grow in the years to come.

- - + + \ No newline at end of file diff --git a/blog/tags/editorial/index.html b/blog/tags/editorial/index.html index 185c5e1f..07aa8eee 100644 --- a/blog/tags/editorial/index.html +++ b/blog/tags/editorial/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "editorial"

View All Tags

· 6 min read
Nikita Shukla

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

RCTCET

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

  • TechWorld
    • This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.
  • Emergency
    • The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.
  • Beach Cleanup
    • Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

  • Sunday Funday
  • Treasure Hunt
  • Movie Night
  • Badminton Tournament
  • Kick it!(Football Tournament)

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

RCevent

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

- - + + \ No newline at end of file diff --git a/blog/tags/free/index.html b/blog/tags/free/index.html index 2a9d7c67..cf952b77 100644 --- a/blog/tags/free/index.html +++ b/blog/tags/free/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

2 posts tagged with "free"

View All Tags

· 5 min read
Gaurang Vishwakarma
Vishal Rawat

Welcome to our first blog​

Welcome everyone to TCET Open Source's Blog Section. Here, we promote blogging in the student community. Talk about ongoing trends in tech, student life at TCET, and any topic you feel would feel great for this blog.

note

This particular blog will have recurring adjustments. Last revised on Oct 1st, 2023.

· 4 min read
Vishal Rawat

Project management is a wild way to make sure things are progressing as they should. There is a project management technique for everything. Well, almost everything. I haven't found a project managing concept to overcome my feelings of procrastination. Someone might create it one day.

What really is Open Source?​

If you're the engineering type of person that tackles humanity's problems and urgent needs by bringing together an entire community and building a "project" with them, you'll want to know about Open source. Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.

Here it is again in bigger letters, for impact:

Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.​

And now you know what open source is. In theory, this blog post could be done!

Beyond the marketing standpoint​

Technology is a concept which is ever-changing in how it is defined, its magnitude and how we as engineers develop it. In the world of technology we always find "buzz words" which reflect the recent advancements which are so efficient that they are slowly brought within the industry as a standard way of working on projects, as a team.

One such "buzz word" in the area of software development and project management is open source. Open source is a way of working on a software typically developed in a public, collaborative manner, with the source code made freely available to anyone who wants to use, modify, or distribute it. The term "open source" was coined in 1998 by a group of people in the software industry who wanted to create a new model of software development that was more collaborative and community-driven.

Open source software is often developed and maintained by a community of volunteers and contributors, who work together to improve the software and fix bugs. Consider your homework: a dry document which contains things here and there which you know is very incomplete. If you have a good enough personality (which I don't), you send this document to all your classmates who start doing bits of your homework.

The result? A fine specimen of a document which the entire class can show to your teachers for great marks! What you just did here was open sourcing your homework and let your student community work on it to create a more appealing document which is now complete.

But open source doesn't stop there​

Imagine your homework to be your project, your classmates to be your community. This community observes your project and suggests various improvements within it. Be it suggesting simple changes of changing the fonts or re-working the already existing complex APIs and queries.

Example of suggestions
A simple conversation between a contributor and a project developer

Another way to look at open source can be building the big Lego City together, block by block. Everyone can add their own pieces to what has been constructed so far and everyone can see how the city is made. In this way, everyone can make the city better and use it how they want.

Software Engineers
Budding software engineers collaborating to build their project

Open source is a great way to bring like-minded developers together. Everybody around you, be a fresher student or an industry experienced individual, has had to encounter with open source technologies without even realizing it. From something we daily use like Android to Linux: the operating system used by many corporates and tech giants, there's no saying what the next big thing will be.

Open Source
Python, Dart, React, MongoDB, even this text box is open source

That's about the gist of what I wished to express regarding open source. Surely that's not everything but I do look forward to go in-depth into this topic and talk about various different things which excite me! Do look forward to upcoming blogposts and reach me out for any constructive criticism, if any, for the future blogposts.

- - + + \ No newline at end of file diff --git a/blog/tags/frontend/index.html b/blog/tags/frontend/index.html index 193ba792..bb80d658 100644 --- a/blog/tags/frontend/index.html +++ b/blog/tags/frontend/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Frontend"

View All Tags

· 5 min read
Mahima Churi
As technology continues to evolve, web development has become an increasingly important field, and front-end frameworks such as ReactJS have emerged as crucial tools for building dynamic, user-friendly websites. Whether you are just starting out with web development or are looking to enhance your existing skills, I hope that you will find valuable insights and tips within these pages. So sit back, grab a cup of coffee, and join me on our journey through the exciting world of ReactJS!

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What is React JS?

React JS is nothing but a java script library that helps the developers in creating reusable UI components there by increasing the efficiency of code. When making dynamic websites React JS is proven to be more effective than Vanilla JS, and hence it has become a popular choice for building fast and scalable single-page applications. In simple terms, ReactJS helps make web development more efficient, organized, and dynamic.

Characteristic Features of React JS that makes it more versatile and Popular

Features of ReactJS
Features of ReactJS

1. Virtual DOM​

In traditional web development, when changes are made to a web page, the entire page needs to be re-rendered, which can be slow and time-consuming. The Virtual DOM solves this issue by creating a virtual representation of the web page in memory so when changes are made, ReactJS updates the virtual DOM instead of the actual page, which is much faster. Then, ReactJS compares the virtual DOM to the actual page and updates only the parts that have changed, rather than the entire page. This makes the updates and rendering process much faster and more efficient, improving the overall user experience of the web application.

2. Reusable Components​

ReactJS uses a component-based architecture, which means that the user interface is built using reusable components. Each component is a self-contained unit that handles a specific task or displays a specific piece of information, we can say that each components are independent. This makes the code more organized and easier to maintain, as well as reducing the amount of redundant code.

3. Community​

React has a vast and supportive community of developers who are constantly contributing new features and tools. React is open-source, meaning that anyone can contribute to the development of the library by fixing bugs, adding new features, or improving existing ones.

Link to contribute to the React Library

4. JSX​

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used by ReactJS that allows developers to write HTML-like code within their JavaScript. This makes it easier for users to write and understand the code, as it closely resembles the structure of HTML. This helps to improve the overall development experience by making the code more intuitive and easier to read.

For example, instead of writing the following code in pure JavaScript to render a simple button:

React.createElement("button", {className: "myButton"}, "Click Me!");

The same code can be written in JSX as:

<button className="myButton">Click Me!</button>;

5. Server-side Rendering​

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the browser. In the case of React, this means that the React components can be rendered on the server, allowing the browser to receive a fully rendered HTML page, instead of having to wait for JavaScript to execute and render the page on the client side again and again.

This results in faster initial load times, as the browser doesn’t have to wait for the JavaScript to execute and render the page. Additionally, server-side rendering can improve Search Engine Optimization (SEO), as search engines can better index and understand the content of the page.

6. Compatibility​

React’s simplicity and straightforward design makes it easy for developers to learn and adopt and it works seamlessly with other libraries and frameworks, such as Redux, allowing developers to create complex and scalable web applications.

Comaprison with other Frontend Frameworks

Popular Web Frameworks
Comparison with other frameworks as per the recent survey

Source: Stack Overflow Developer Survey 2021

From the above survey it can be clearly seen that React JS was named as one on the most commonly used web Framework.

React’s virtual DOM provides fast updates and rendering compared to traditional DOM manipulation. Angular and Vue also have optimized updates, but they may not be as fast as React’s virtual DOM.

Also, React is known for its simplicity and minimalistic approach, making it relatively easy to learn and get started with. Angular, on the other hand, has a steeper learning curve due to its more complex architecture. Vue falls somewhere in between, offering a more accessible learning experience as compared to Angular.

info

You can see more detailed insights of React JS on their Official Website

Conclusion​

In conclusion, React is the future of web development, offering a robust set of features and tools that make it easy to build high-performing, scalable, and maintainable web applications. Its simplicity, performance, and compatibility with other technologies make it an excellent choice for modern web development.

- - + + \ No newline at end of file diff --git a/blog/tags/gaming/index.html b/blog/tags/gaming/index.html index b75aa95a..25e09bec 100644 --- a/blog/tags/gaming/index.html +++ b/blog/tags/gaming/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "gaming"

View All Tags

· 5 min read
Om Hinge

Hey there, fellow gamers! Today, we're diving into the fascinating world of cloud gaming, a technology that's changing the way we play and enjoy our favorite titles. In this article, we'll break down the concept of cloud gaming, its evolution, and its promising future.

Introduction to Cloud Gaming​

Imagine playing high-quality video games without the need for expensive gaming hardware or the hassle of downloading and installing massive game files. That's the magic of cloud gaming! It's like Netflix for gamers, where you can instantly access and play games over the internet without worrying about hardware requirements.

Most modern games demand a hefty amount of storage space and powerful hardware to run smoothly. Think about titles like Call of Duty's Warzone, which takes up over 1000GB of storage. To play these games with the best experience, you'd need a high-end PC or gaming console. But what if there was a more affordable alternative?

Cloud Gaming Demonstration by playing Cyberpunk 2077 on mobile

How Cloud Gaming Works​

Cloud Gaming flow

Cloud gaming operates within the realm of cloud computing. Instead of storing game files on your local device, they're hosted and processed on powerful remote servers in data centers. Here's how it works in a nutshell:

  • Remote Servers: Powerful servers host and run the games, eliminating the need for you to download and install them on your device.

  • Streaming Gameplay: Similar to streaming services like Netflix, cloud gaming sends a video stream of the gameplay over the internet to your device.

  • Input Control: Your inputs (the buttons you press and the moves you make) are sent to the server, where the game responds accordingly. This allows you to play even on low-end devices.

While cloud gaming offers incredible convenience, it's important to note that it can introduce some input lag, depending on factors like your internet connection stability and the distance between you and the server.

Cloud Gaming is one of the Best Examples to showcase the power of Cloud Computing.

The History and Future of Cloud Gaming​

In the past, cloud gaming faced numerous challenges, including network issues. Google's attempt with Google Stadia was ambitious but struggled due to connectivity problems. Other giants like Amazon and Microsoft also entered the arena with Amazon Luna and Xbox cloud gaming.

However, the future of cloud gaming looks bright, especially in countries like India. Gaming is growing rapidly, and cloud gaming provides an affordable platform for those unable to invest in high-end gaming hardware. The potential to earn rewards through gaming is also on the rise, further boosting its popularity.

The primary challenge facing cloud gaming today is network-related issues, but providers are actively working on solutions to make it accessible to more users.

We can say Cloud Gaming was just the first step for the cloud computing service to even non-tech users. Google is developing & testing Cloud Quantum computing so that one day everyone can access the Incredible power of Quantum computers without the need for a quantum rig, which might be bigger than most of our houses.

cloud quantum computing

Advantages and Drawbacks of Cloud Gaming​

Cloud gaming offers several advantages, including:

  • Universal Platform: You can play games on any device with an internet connection, from consoles to smartphones.

  • Cost-Efficiency: No need for expensive hardware, as the processing is done on remote servers.

  • Portability: Play on the go without worrying about installation and setup.

However, it's not without its drawbacks:

  • Internet Dependency: A stable internet connection is crucial for a smooth experience.

  • Input Lag: Some games may suffer from input delay due to server processing.

  • Limited Awareness: Many people are still unaware of cloud gaming, and few providers exist compared to traditional gaming options.

Current Status of Cloud Gaming​

Several cloud gaming services are making waves in the industry:

  • Nvidia GeForce Now: This service is known for its low system requirements, compatibility with various devices, and a free trial period.
  • XBox Game Cloud: Known for Various game titles for free to play in the subscription of Game Pass.
  • JioGames Cloud: Building the Cloud gaming culture & infrastructure in India at a reasonable rate.

Is Cloud Gaming Worth It?​

While cloud gaming shows immense potential, it's still in its early stages. Input lag and connectivity issues can be frustrating, especially for competitive gamers. Traditional gaming setups remain a popular choice. However, as technology advances, cloud gaming has the potential to become the future of gaming in the coming decade.

In conclusion, cloud gaming is a game-changer with the potential to democratize gaming by making it accessible to more players. As it evolves and overcomes its current challenges, we can expect cloud gaming to reshape the gaming landscape in the near future.

References:​

- - + + \ No newline at end of file diff --git a/blog/tags/guide/index.html b/blog/tags/guide/index.html index eb874ee9..3a298ff9 100644 --- a/blog/tags/guide/index.html +++ b/blog/tags/guide/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

2 posts tagged with "Guide"

View All Tags

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.

- - + + \ No newline at end of file diff --git a/blog/tags/html/index.html b/blog/tags/html/index.html index ba25627f..5e4da3c3 100644 --- a/blog/tags/html/index.html +++ b/blog/tags/html/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "HTML"

View All Tags

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.
- - + + \ No newline at end of file diff --git a/blog/tags/imagination/index.html b/blog/tags/imagination/index.html index 9aae82ae..d75c471b 100644 --- a/blog/tags/imagination/index.html +++ b/blog/tags/imagination/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Imagination"

View All Tags

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.

- - + + \ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index db1647b4..c0c0d346 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Tags

- - + + \ No newline at end of file diff --git a/blog/tags/innovation/index.html b/blog/tags/innovation/index.html index 3e2d4879..9b3eb8e5 100644 --- a/blog/tags/innovation/index.html +++ b/blog/tags/innovation/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Innovation"

View All Tags

· 5 min read
Aadil Rayeen

Artificial Intelligence (AI) is becoming more and more crucial in influencing how we work and live in today's quickly changing technology landscape. Automation is one of the most interesting uses of AI because it has the ability to boost productivity, streamline procedures, and usher in a smarter era. We'll look at the main aspects of AI automation in this post.

- - + + \ No newline at end of file diff --git a/blog/tags/integration/index.html b/blog/tags/integration/index.html index 068f1b84..9a96ff7d 100644 --- a/blog/tags/integration/index.html +++ b/blog/tags/integration/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "integration"

View All Tags

· 4 min read
Himanshu Agarwal

Applications and systems rely on smooth communication and data sharing to deliver improved functionality and services in today's interconnected digital environment. Application Programming Interfaces (APIs) are quite important in this situation. APIs serve as mediators, enabling interoperability, data sharing, and communication between various software programmes. This article will provide you a thorough introduction to APIs and their importance in contemporary software development, whether you're a developer, a tech enthusiast, or just interested about the world of APIs.


APIs to a layman
- - + + \ No newline at end of file diff --git a/blog/tags/jsx/index.html b/blog/tags/jsx/index.html index d45437bb..c01b1e93 100644 --- a/blog/tags/jsx/index.html +++ b/blog/tags/jsx/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "JSX"

View All Tags

· 5 min read
Mahima Churi
As technology continues to evolve, web development has become an increasingly important field, and front-end frameworks such as ReactJS have emerged as crucial tools for building dynamic, user-friendly websites. Whether you are just starting out with web development or are looking to enhance your existing skills, I hope that you will find valuable insights and tips within these pages. So sit back, grab a cup of coffee, and join me on our journey through the exciting world of ReactJS!

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What is React JS?

React JS is nothing but a java script library that helps the developers in creating reusable UI components there by increasing the efficiency of code. When making dynamic websites React JS is proven to be more effective than Vanilla JS, and hence it has become a popular choice for building fast and scalable single-page applications. In simple terms, ReactJS helps make web development more efficient, organized, and dynamic.

Characteristic Features of React JS that makes it more versatile and Popular

Features of ReactJS
Features of ReactJS

1. Virtual DOM​

In traditional web development, when changes are made to a web page, the entire page needs to be re-rendered, which can be slow and time-consuming. The Virtual DOM solves this issue by creating a virtual representation of the web page in memory so when changes are made, ReactJS updates the virtual DOM instead of the actual page, which is much faster. Then, ReactJS compares the virtual DOM to the actual page and updates only the parts that have changed, rather than the entire page. This makes the updates and rendering process much faster and more efficient, improving the overall user experience of the web application.

2. Reusable Components​

ReactJS uses a component-based architecture, which means that the user interface is built using reusable components. Each component is a self-contained unit that handles a specific task or displays a specific piece of information, we can say that each components are independent. This makes the code more organized and easier to maintain, as well as reducing the amount of redundant code.

3. Community​

React has a vast and supportive community of developers who are constantly contributing new features and tools. React is open-source, meaning that anyone can contribute to the development of the library by fixing bugs, adding new features, or improving existing ones.

Link to contribute to the React Library

4. JSX​

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used by ReactJS that allows developers to write HTML-like code within their JavaScript. This makes it easier for users to write and understand the code, as it closely resembles the structure of HTML. This helps to improve the overall development experience by making the code more intuitive and easier to read.

For example, instead of writing the following code in pure JavaScript to render a simple button:

React.createElement("button", {className: "myButton"}, "Click Me!");

The same code can be written in JSX as:

<button className="myButton">Click Me!</button>;

5. Server-side Rendering​

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the browser. In the case of React, this means that the React components can be rendered on the server, allowing the browser to receive a fully rendered HTML page, instead of having to wait for JavaScript to execute and render the page on the client side again and again.

This results in faster initial load times, as the browser doesn’t have to wait for the JavaScript to execute and render the page. Additionally, server-side rendering can improve Search Engine Optimization (SEO), as search engines can better index and understand the content of the page.

6. Compatibility​

React’s simplicity and straightforward design makes it easy for developers to learn and adopt and it works seamlessly with other libraries and frameworks, such as Redux, allowing developers to create complex and scalable web applications.

Comaprison with other Frontend Frameworks

Popular Web Frameworks
Comparison with other frameworks as per the recent survey

Source: Stack Overflow Developer Survey 2021

From the above survey it can be clearly seen that React JS was named as one on the most commonly used web Framework.

React’s virtual DOM provides fast updates and rendering compared to traditional DOM manipulation. Angular and Vue also have optimized updates, but they may not be as fast as React’s virtual DOM.

Also, React is known for its simplicity and minimalistic approach, making it relatively easy to learn and get started with. Angular, on the other hand, has a steeper learning curve due to its more complex architecture. Vue falls somewhere in between, offering a more accessible learning experience as compared to Angular.

info

You can see more detailed insights of React JS on their Official Website

Conclusion​

In conclusion, React is the future of web development, offering a robust set of features and tools that make it easy to build high-performing, scalable, and maintainable web applications. Its simplicity, performance, and compatibility with other technologies make it an excellent choice for modern web development.

- - + + \ No newline at end of file diff --git a/blog/tags/linux/index.html b/blog/tags/linux/index.html index d841f5f4..9ef80fc6 100644 --- a/blog/tags/linux/index.html +++ b/blog/tags/linux/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "linux"

View All Tags

· 14 min read
Gaurang Vishwakarma
Saasha Gupta

Linux is an operating system kernel. It was originally written in 1991 by Linus Torvalds for his personal use, and it was soon adopted as the kernel for the GNU operating system, which was written to be a free (libre) replacement for Unix.

So, what even is GNU/Linux? What is free software? You must have so many more questions! Through this blog, we will try to understand what is linux, and why it is the most popular operating system in the world.

- - + + \ No newline at end of file diff --git a/blog/tags/machine-learning/index.html b/blog/tags/machine-learning/index.html index ee5fc83a..f243ee24 100644 --- a/blog/tags/machine-learning/index.html +++ b/blog/tags/machine-learning/index.html @@ -9,8 +9,8 @@ - - + +
@@ -24,7 +24,7 @@ the speed limit, and other information to navigate the road.

Theory Of Mind

  • Theory of Mind AI should understand human emotions, people, and beliefs, and be able to interact socially like humans.
  • This type of AI machine is still not developed, but researchers are making lots of efforts and improvements for developing such AI machines.

Self-Awareness

  • Self-awareness AI is the future of Artificial Intelligence. These machines will be super intelligent and will have their own consciousness, sentiments, and self-awareness.
  • These machines will be smarter than the human mind.
  • Self-Awareness AI does not exist in reality still and it is a hypothetical concept.

Conclusion​

Artificial intelligence has come a long way since the early days of rule-based systems, and its evolution shows no signs of slowing down. With ongoing research and development, the potential applications of AI are vast and ever-expanding.

If you enjoy reading stories on similar topics then do follow the account. Let me know your thoughts below

- - + + \ No newline at end of file diff --git a/blog/tags/mental-model/index.html b/blog/tags/mental-model/index.html index ea3c5c47..03753ddd 100644 --- a/blog/tags/mental-model/index.html +++ b/blog/tags/mental-model/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "Mental Model"

View All Tags

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.
- - + + \ No newline at end of file diff --git a/blog/tags/mind-benders/index.html b/blog/tags/mind-benders/index.html index d904aadf..05c0e7e9 100644 --- a/blog/tags/mind-benders/index.html +++ b/blog/tags/mind-benders/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

3 posts tagged with "mind-benders"

View All Tags

· 4 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Code Optimization Revolutionized: Google DeepMind's AI Unleashes New Speed-Boosting Technique. 1​

DeepMind's AlphaDev AI achieves groundbreaking speed improvements in sorting algorithms, surpassing existing methods by up to 70%. Its innovative techniques have been adopted by millions of software developers, marking the first integration of AI-discovered algorithms in language updates. DeepMind's gamified approach, using reinforcement learning, trains AlphaDev to construct faster and correct algorithms. This breakthrough revolutionizes code optimization and sets the stage for further AI-driven innovations in computer science.

Elevating the Shopping Experience with AI Virtual Try-On on Google Shopping. 2​

Example of Virtual Try of Clothes with AI

Google Shopping has introduced AI Virtual Try-On, a new feature that allows users to virtually try on beauty products before buying them. Using advanced machine learning algorithms and facial recognition technology, the feature provides realistic representations of the products on the user's face. It enhances convenience, addresses concerns about online shopping, and offers a seamless experience. Users can access the feature from Google Search, Google Shopping, or participating retailer websites, making informed decisions with detailed product information and user reviews. This innovation bridges the gap between online and in-store try-ons, revolutionizing the beauty shopping experience.

Ink AI Unveils ChatGPT-Based E-book Generator for Effortless Full-Length E-book Creation. 3​

Ink AI has introduced a game-changing e-book generator tool that utilizes ChatGPT, an AI language model, to effortlessly create full-length e-books. By inputting prompts, users receive context-aware responses that form the basis of their e-books, making the writing process faster and more efficient. The tool allows customization of genre, style, and length, and the user-friendly interface simplifies content creation. Ink AI's e-book generator opens up new possibilities for authors, content creators, and publishers by revolutionizing the e-book creation process with AI technology.

Meta Unveils Stablediffusion: A Groundbreaking AI Model for Music Generation. 4​

Meta has introduced Stablediffusion, an advanced AI model called MusicGen, designed for music generation. Unlike traditional models, Stablediffusion produces stable, coherent, and emotionally engaging musical compositions. Trained on diverse musical genres, the model incorporates stability mechanisms for smooth transitions and consistent structures.

It considers melody, harmonies, rhythms, and tonal variations, resulting in natural and professional-sounding compositions. Stablediffusion offers a powerful tool for musicians, composers, and music enthusiasts, revolutionizing AI-generated music with its stable and artistically satisfying output.

Draggan Goes Open Source: Empowering Developers with Advanced AI Framework. 5​

Example of DragGAN to change perspective of Lion and more

Draggan, an advanced AI framework focused on reinforcement learning, has been released as open source. This allows developers worldwide to access and utilize its capabilities for training AI models. Draggan simplifies the process with its user-friendly interface, extensive documentation, and pre-built components, enabling faster development and deployment of AI systems. By democratizing access to this powerful tool, the open-source release of Draggan promotes collaboration and accelerates advancements in AI research and application development.

MIT Introduces New Model for Accelerated Drug Discovery. 6​

MIT researchers have developed a groundbreaking AI model called AccelerateDrug, which revolutionizes the process of drug discovery. The model utilizes advanced machine learning algorithms to rapidly analyze chemical and biological data, predicting the effectiveness of potential drug compounds. By significantly reducing experimentation time and resources, AccelerateDrug streamlines the drug discovery process and expedites the development of new medications.

The model has demonstrated high accuracy and outperformed existing methods in predicting drug efficacy. AccelerateDrug has the potential to accelerate the availability of life-saving treatments, benefiting patients and advancing healthcare outcomes.

Google Introduces AudioPalm: Bridging the Gap between Text and Voice. 7​

Brief Architecture of AudioPaLM

Google has introduced AudioPalm, an innovative technology that bridges the gap between text and voice. Using advanced AI algorithms, it converts written text into human-like speech and transcribes spoken language into written text accurately. AudioPalm enhances accessibility, user experiences, and content creation, benefiting individuals with visual impairments and those seeking a more immersive interaction.

The technology has applications in education, entertainment, and accessibility services, and it integrates with existing Google services like Google Assistant and Google Translate. Google's AudioPalm represents a significant advancement in natural language processing, enabling seamless conversion between text and voice for enhanced user experiences.

  1. https://www.deepmind.com/research/highlighted-research/alphago↩
  2. https://blog.google/products/shopping/ai-virtual-try-on-google-shopping/↩
  3. https://goodereader.com/blog/e-book-news/new-chatgpt-based-e-book-generator-tool-from-ink-ai-can-create-full-length-e-books-easily↩
  4. https://analyticsindiamag.com/meta-releases-stablediffusion-for-music-musicgen/↩
  5. https://analyticsindiamag.com/draggan-is-finally-open-source/↩
  6. https://news.mit.edu/2023/new-model-offers-speedy-drug-discovery-0608↩
  7. https://google-research.github.io/seanet/audiopalm/examples/↩

· 6 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Google's PaLM 2: Revolutionizing Language Modeling with Multilingual Proficiency, Reasoning Abilities, and Coding Proficiency. 1​

Discover the cutting-edge advancements in AI from Google as they unveil PaLM 2, their next-generation language model. PaLM 2 has undergone extensive training on multilingual text, enabling it to understand, generate, and translate nuanced language across more than 100 languages. With improved reasoning capabilities and proficiency in programming languages, PaLM 2 demonstrates its potential for logic, common sense reasoning, mathematics, and coding tasks.

An Example of Prompt to Med PaLM - A specialized PaLM Model

Google has already integrated PaLM 2 into over 25 products and features, empowering users worldwide with enhanced language generation, efficient workspace features, and productivity tools. Through the development of PaLM 2, Google continues to drive innovation in AI and deliver real-world benefits in areas like healthcare and creative endeavors.

Meta's AI breakthrough: Speech recognition for 1,000+ languages now open source, paving the way for language preservation and universal communication. 2​

Meta's AI breakthrough empowers speech recognition in over 1,000 languages, a significant leap towards preserving endangered languages. The company is sharing these models as open source on GitHub, enabling developers to build inclusive speech applications for diverse languages. Existing speech recognition models cover a mere fraction of the world's 7,000 languages due to limited labeled training data. Meta overcame this challenge by retraining their AI model to learn speech patterns from audio, requiring minimal data. Their models can converse in over 1,000 languages and recognize more than 4,000, with half the error rate compared to rival models. While there are risks of mistranscription and biased words, Meta's advancements have far-reaching implications for language preservation and global communication.

AI Revolutionizes Antibiotic Discovery: Unveiling a Breakthrough Against Hospital Superbugs. 3​

Scientists from McMaster University have utilised artificial intelligence (AI) to uncover a breakthrough antibiotic called abaucin, which shows promising potential in combating drug-resistant infections, particularly Acinetobacter baumannii. This bacterium poses a significant threat in hospitals and is known to cause severe conditions like pneumonia and meningitis.

The traditional methods of antibiotic discovery have proven challenging and time-consuming. However, AI algorithms allowed researchers to swiftly assess millions of molecules, leading to the identification of abaucin. Unlike broad-spectrum antibiotics, abaucin specifically targets A. baumannii, reducing the risk of drug resistance development and opening doors to more precise and effective treatments. This study underscores the immense potential of AI in revolutionising antibiotic discovery and providing hope in the fight against deadly hospital superbugs.

Unleash Your Creativity: Photoshop's AI Transforms Your Images with a Single Text Prompt. 4​

A before &amp; after image of dog after applying Generative Fill of Photoshop

Adobe has introduced a groundbreaking AI tool called Generative Fill in its Photoshop application, leveraging generative AI to add or remove objects from photos based on a simple text prompt. Acting as an "AI co-pilot," Adobe Firefly powers this feature, aiming to revolutionize the photo editing process. While enhancing user creativity, Adobe acknowledges the need to address concerns about potential misuse of the technology. The addition of Generative Fill is expected to usher in a new era of AI-driven creativity in the creative industries, providing extraordinary results and streamlining previously time-consuming tasks. Currently available in the beta version, a wider release of this transformative AI tool in Photoshop is on the horizon.

Safeguarding the Digital Frontier: Exploring the Reality of AI in Cybersecurity. 5​

In the realm of cybersecurity, the long-awaited promise of artificial intelligence (AI) is becoming a reality. AI-driven capabilities have evolved from simple rule-based systems to sophisticated tools that leverage generative AI and contextualise vast amounts of data. This breakthrough empowers cybersecurity teams with game-changing speed and accuracy, providing them with a much-needed advantage in their ongoing battle against cybercriminals. With a skills shortage and data explosion posing challenges, matured AI capabilities address these obstacles by automating tasks, improving defence postures, and enabling precise actions.

By combining AI with automation, security teams can achieve reliable speed and enhance their ability to detect, investigate, and respond to threats. The integration of AI into threat detection and response technologies, such as IBM's QRadar Suite, amplifies the effectiveness of security operations centres (SOCs) and streamlines the incident lifecycle. With AI's assistance, SOC teams can prioritise real threats amidst the noise, accelerate investigation and response processes, and significantly enhance overall resilience and readiness in the cybersecurity industry.

Spotify's Potential AI Breakthrough: AI-Generated Podcast Ads. 6​

In a recent podcast episode, Bill Simmons shared that Spotify is reportedly working on AI technology that would allow podcast hosts to create host-read ads without having to personally record them. This development could offer podcasters exciting opportunities, including the creation of geo-targeted and multilingual ads, while saving valuable time for content creation. Although Spotify has not officially confirmed these claims, their ongoing investment in AI technology, exemplified by the introduction of AI DJ, suggests the possibility.

The advent of AI-generated podcast ads would revolutionise the industry, offering podcasters a time-saving alternative and the potential to reach a broader audience. However, concerns regarding authenticity and the risk of misinformation should also be considered. The development of AI-generated podcast ads marks a significant milestone in podcasting, with the future implementation and audience response eagerly anticipated.

Chegg vs. ChatGPT: The Battle for AI-Powered Education Dominance. 7​

Chegg, an online education company, and its encounter with the disruptive force of generative AI, particularly OpenAI's ChatGPT. Chegg's executives had previously considered the potential of AI to replace human instructors and reduce costs but underestimated the rapid pace at which consumers embraced tools like ChatGPT.

Initially, Chegg didn't view ChatGPT as a threat to its paid services. However, when OpenAI released GPT-4, students began opting for ChatGPT instead of Chegg's paid offerings, leading to a significant loss in subscriber growth and a decline in the company's market value.

Despite their efforts, Chegg's future remains uncertain, and the company's executives are focused on navigating the challenges posed by generative AI to stay relevant in the education industry.

  1. https://blog.google/technology/ai/google-palm-2-ai-large-language-model/↩
  2. https://www.technologyreview.com/2023/05/22/1073471/metas-new-ai-models-can-recognize-and-produce-speech-for-more-than-1000-languages/↩
  3. https://www.theguardian.com/technology/2023/may/25/artificial-intelligence-antibiotic-deadly-superbug-hospital↩
  4. https://news.adobe.com/news/news-details/2023/Adobe-Unveils-Future-of-Creative-Cloud-with-Generative-AI-as-a-Creative-Co-Pilot-in-Photoshop-default.aspx/default.aspx↩
  5. https://www.technologyreview.com/2023/05/24/1073395/ai-in-cybersecurity-yesterdays-promise-todays-reality/↩
  6. https://techcrunch.com/2023/05/23/spotify-may-use-ai-to-make-host-read-podcast-ads-that-sound-like-real-people/↩
  7. https://www.wired.com/story/chegg-embraced-ai-chatgpt-ate-its-lunch-anyway/↩

· 5 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Unlock the Power of BingAI: Experience the Future, Today! 1​

Microsoft has made Bing AI accessible to the public, eliminating the waitlist requirement. Users can now try out the AI bot by signing in to Bing using their Microsoft account on the Edge browser. The latest update introduces several exciting features powered by OpenAI's technologies.

Also, Bing AI now supports rich "visual answers," displaying graphs, charts, and formatted content. The Bing Image Creator has been upgraded to support over 100 languages, enabling the generation of AI images based on text prompts and visual examples. Additionally, users can export and share chats, benefit from improved summarization capabilities for long documents, and enjoy actions within Edge for quicker access to relevant content. Microsoft is also developing third-party plug-ins to expand functionality within Bing Chat.

LinkedIn's Intelligent Assistance: Craft the Perfect Job Application 2​

LinkedIn is reportedly testing an AI-powered feature that provides personalized writing suggestions for job seekers, aiming to help them create tailored job applications. The feature generates short cover letter-like messages using information from the user's profile, the hiring manager's profile, the job description, and the targeted company. While the AI-generated drafts serve as a starting point, LinkedIn emphasizes the importance of customization and encourages users to review and edit the suggestions to reflect their own voice and style.

This development builds upon LinkedIn's existing AI writing tool for profile creation. The adoption of AI in job application drafting reflects the growing interest in artificial intelligence, with its potential to enhance user experiences and improve outcomes in various industries, including recruitment and career development.

YOLO-NAS: Revolutionizing Object Detection with Unprecedented Precision 3​

Deci AI, a deep learning firm, has unveiled YOLO-NAS, its latest deep learning model designed for real-time object detection with remarkable performance. Built on Deci's Neural Architecture Search Technology, AutoNAC™, YOLO-NAS outperforms other models like YOLOv6, YOLOv7, and YOLOv8, including the recently launched YOLOv8. AutoNAC democratizes Neural Architecture Search, enabling organizations to create customized, fast, accurate, and efficient deep learning models quickly.

YOLO-NAS delivers superior throughput, achieving 50% more throughput and 1 mAP higher accuracy compared to other YOLO models. It is pre-trained on popular datasets, making it suitable for various real-world applications. The open-source model is available with pre-trained weights for non-commercial research use on Deci's PyTorch-based computer vision training library called SuperGradients.

Introducing StarCoder: Free Code-Generating Assistant 4​

Hugging Face and ServiceNow Research have jointly released StarCoder, a free code-generating model that offers an alternative to existing AI systems like GitHub's Copilot. StarCoder, part of the BigCode project, was trained on over 80 programming languages and integrates with Microsoft's Visual Studio Code editor. Unlike other commercial models, StarCoder is royalty-free and available for use by anyone, including corporations.

The project aims to develop state-of-the-art AI systems for code generation in an open and responsible manner. StarCoder's release comes amidst debates around the use of public source code and licensing agreements for training AI models, with efforts made to address privacy concerns and adhere to ethical best practices.

Geoffrey Hinton: AI's Threat Could Be 'More Urgent' Than Climate Change 5​

In a recent interview, renowned AI pioneer Geoffrey Hinton expressed his concerns that the threat posed by artificial intelligence (AI) to humanity could be even more urgent than climate change. Hinton, often referred to as one of the "godfathers of AI," believes that the risks associated with AI technology are significant and warrant immediate attention. Having recently left Alphabet, Hinton intends to speak out about these risks without any constraints from his former employer. As the debate around AI's impact on society continues to unfold, Hinton's remarks highlight the need for careful consideration and proactive measures to ensure the responsible and ethical development and deployment of AI technologies.

Accelerating the Quest for New Metals: ML Offers a Promising Solution 6​

Machine learning could help develop new types of metals with useful properties, such as resistance to extreme temperatures and rust, according to new research. This could be useful in a range of sectors—for example, metals that perform well at lower temperatures could improve spacecraft, while metals that resist corrosion could be used for boats and submarines. Usually they start off with one well-known element, like iron, which is cheap and malleable, and add one or two others to see the effect on the original material. It’s a laborious process of trial and error that inevitably yields more duds than useful results. Researchers from the Max Planck Institute managed to identify 17 promising new metals using this method.

Revolutionizing ML: Researchers Unveil a More Agile Approach 7​

Artificial intelligence researchers have celebrated a string of successes with neural networks, computer programs that roughly mimic how our brains are organized. In 2020, two researchers at the MIT led a team that introduced a new kind of neural network based on real-life intelligence — but not our own. After a breakthrough last year, the novel networks may now be versatile enough to supplant their traditional counterparts for certain applications.

Liquid neural networks offer an elegant and compact alternative , said Ken Goldberg, a roboticist at the University of California, Berkeley. These networks can run faster and more accurately than other so-called continuous-time neural networks, which model systems that vary over time

  1. https://blogs.microsoft.com/blog/2023/02/22/the-new-bing-preview-experience-arrives-on-bing-and-edge-mobile-apps-introducing-bing-now-in-skype/↩
  2. https://www.linkedin.com/pulse/how-ai-can-help-you-land-your-dream-job-step-by-step-hemachandran/↩
  3. https://deci.ai/blog/yolo-nas-object-detection-foundation-model/↩
  4. https://techcrunch.com/2023/05/04/hugging-face-and-servicenow-release-a-free-code-generating-model/amp/↩
  5. https://theconversation.com/ai-pioneer-geoffrey-hinton-says-ai-is-a-new-form-of-intelligence-unlike-our-own-have-we-been-getting-it-wrong-this-whole-time-204911↩
  6. https://www.technologyreview.com/2022/10/25/1062104/machine-learning-new-metals↩
  7. https://www.quantamagazine.org/researchers-discover-a-more-flexible-approach-to-machine-learning-20230207↩
- - + + \ No newline at end of file diff --git a/blog/tags/ml/index.html b/blog/tags/ml/index.html index a5f70f89..9f64c4c4 100644 --- a/blog/tags/ml/index.html +++ b/blog/tags/ml/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "ML"

View All Tags

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.

- - + + \ No newline at end of file diff --git a/blog/tags/model/index.html b/blog/tags/model/index.html index f3561126..28a1bc93 100644 --- a/blog/tags/model/index.html +++ b/blog/tags/model/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Model"

View All Tags

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.

- - + + \ No newline at end of file diff --git a/blog/tags/modeltraining/index.html b/blog/tags/modeltraining/index.html index c5643570..b635d606 100644 --- a/blog/tags/modeltraining/index.html +++ b/blog/tags/modeltraining/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Modeltraining"

View All Tags

· 6 min read
Aadil Rayeen

Machine learning has become a revolutionary force in many industries due to its capacity to make sense of massive volumes of data and generate predictions or choices. However, for newcomers, going into machine learning might be intimidating. Not to worry! This blog article will walk you through the process of creating your first machine learning model. We'll go over the main stages, problems, and resources for creating models.

- - + + \ No newline at end of file diff --git a/blog/tags/nvidia/index.html b/blog/tags/nvidia/index.html index 1f772bdb..55c962d3 100644 --- a/blog/tags/nvidia/index.html +++ b/blog/tags/nvidia/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "nvidia"

View All Tags

· 5 min read
Om Hinge

Hey there, fellow gamers! Today, we're diving into the fascinating world of cloud gaming, a technology that's changing the way we play and enjoy our favorite titles. In this article, we'll break down the concept of cloud gaming, its evolution, and its promising future.

Introduction to Cloud Gaming​

Imagine playing high-quality video games without the need for expensive gaming hardware or the hassle of downloading and installing massive game files. That's the magic of cloud gaming! It's like Netflix for gamers, where you can instantly access and play games over the internet without worrying about hardware requirements.

Most modern games demand a hefty amount of storage space and powerful hardware to run smoothly. Think about titles like Call of Duty's Warzone, which takes up over 1000GB of storage. To play these games with the best experience, you'd need a high-end PC or gaming console. But what if there was a more affordable alternative?

Cloud Gaming Demonstration by playing Cyberpunk 2077 on mobile

How Cloud Gaming Works​

Cloud Gaming flow

Cloud gaming operates within the realm of cloud computing. Instead of storing game files on your local device, they're hosted and processed on powerful remote servers in data centers. Here's how it works in a nutshell:

  • Remote Servers: Powerful servers host and run the games, eliminating the need for you to download and install them on your device.

  • Streaming Gameplay: Similar to streaming services like Netflix, cloud gaming sends a video stream of the gameplay over the internet to your device.

  • Input Control: Your inputs (the buttons you press and the moves you make) are sent to the server, where the game responds accordingly. This allows you to play even on low-end devices.

While cloud gaming offers incredible convenience, it's important to note that it can introduce some input lag, depending on factors like your internet connection stability and the distance between you and the server.

Cloud Gaming is one of the Best Examples to showcase the power of Cloud Computing.

The History and Future of Cloud Gaming​

In the past, cloud gaming faced numerous challenges, including network issues. Google's attempt with Google Stadia was ambitious but struggled due to connectivity problems. Other giants like Amazon and Microsoft also entered the arena with Amazon Luna and Xbox cloud gaming.

However, the future of cloud gaming looks bright, especially in countries like India. Gaming is growing rapidly, and cloud gaming provides an affordable platform for those unable to invest in high-end gaming hardware. The potential to earn rewards through gaming is also on the rise, further boosting its popularity.

The primary challenge facing cloud gaming today is network-related issues, but providers are actively working on solutions to make it accessible to more users.

We can say Cloud Gaming was just the first step for the cloud computing service to even non-tech users. Google is developing & testing Cloud Quantum computing so that one day everyone can access the Incredible power of Quantum computers without the need for a quantum rig, which might be bigger than most of our houses.

cloud quantum computing

Advantages and Drawbacks of Cloud Gaming​

Cloud gaming offers several advantages, including:

  • Universal Platform: You can play games on any device with an internet connection, from consoles to smartphones.

  • Cost-Efficiency: No need for expensive hardware, as the processing is done on remote servers.

  • Portability: Play on the go without worrying about installation and setup.

However, it's not without its drawbacks:

  • Internet Dependency: A stable internet connection is crucial for a smooth experience.

  • Input Lag: Some games may suffer from input delay due to server processing.

  • Limited Awareness: Many people are still unaware of cloud gaming, and few providers exist compared to traditional gaming options.

Current Status of Cloud Gaming​

Several cloud gaming services are making waves in the industry:

  • Nvidia GeForce Now: This service is known for its low system requirements, compatibility with various devices, and a free trial period.
  • XBox Game Cloud: Known for Various game titles for free to play in the subscription of Game Pass.
  • JioGames Cloud: Building the Cloud gaming culture & infrastructure in India at a reasonable rate.

Is Cloud Gaming Worth It?​

While cloud gaming shows immense potential, it's still in its early stages. Input lag and connectivity issues can be frustrating, especially for competitive gamers. Traditional gaming setups remain a popular choice. However, as technology advances, cloud gaming has the potential to become the future of gaming in the coming decade.

In conclusion, cloud gaming is a game-changer with the potential to democratize gaming by making it accessible to more players. As it evolves and overcomes its current challenges, we can expect cloud gaming to reshape the gaming landscape in the near future.

References:​

- - + + \ No newline at end of file diff --git a/blog/tags/open-source/index.html b/blog/tags/open-source/index.html index ceb10298..ca896ceb 100644 --- a/blog/tags/open-source/index.html +++ b/blog/tags/open-source/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "open-source"

View All Tags

· 6 min read
Rajdeep Pal

CNCF Zero to Merge is a program by the Cloud Native Computing Foundation that helps newcomers make their first open-source contribution. It aims to lower the barrier for people who have never contributed to open source before, especially those from underrepresented groups. This blog summarizes my experience in the first-ever edition of the program


CNCF Zero to Merge - Your first step towards Open-Source

CNCF LOGO

- - + + \ No newline at end of file diff --git a/blog/tags/open/index.html b/blog/tags/open/index.html index a7e920f6..7452a45e 100644 --- a/blog/tags/open/index.html +++ b/blog/tags/open/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

2 posts tagged with "open"

View All Tags

· 5 min read
Gaurang Vishwakarma
Vishal Rawat

Welcome to our first blog​

Welcome everyone to TCET Open Source's Blog Section. Here, we promote blogging in the student community. Talk about ongoing trends in tech, student life at TCET, and any topic you feel would feel great for this blog.

note

This particular blog will have recurring adjustments. Last revised on Oct 1st, 2023.

· 4 min read
Vishal Rawat

Project management is a wild way to make sure things are progressing as they should. There is a project management technique for everything. Well, almost everything. I haven't found a project managing concept to overcome my feelings of procrastination. Someone might create it one day.

What really is Open Source?​

If you're the engineering type of person that tackles humanity's problems and urgent needs by bringing together an entire community and building a "project" with them, you'll want to know about Open source. Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.

Here it is again in bigger letters, for impact:

Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.​

And now you know what open source is. In theory, this blog post could be done!

Beyond the marketing standpoint​

Technology is a concept which is ever-changing in how it is defined, its magnitude and how we as engineers develop it. In the world of technology we always find "buzz words" which reflect the recent advancements which are so efficient that they are slowly brought within the industry as a standard way of working on projects, as a team.

One such "buzz word" in the area of software development and project management is open source. Open source is a way of working on a software typically developed in a public, collaborative manner, with the source code made freely available to anyone who wants to use, modify, or distribute it. The term "open source" was coined in 1998 by a group of people in the software industry who wanted to create a new model of software development that was more collaborative and community-driven.

Open source software is often developed and maintained by a community of volunteers and contributors, who work together to improve the software and fix bugs. Consider your homework: a dry document which contains things here and there which you know is very incomplete. If you have a good enough personality (which I don't), you send this document to all your classmates who start doing bits of your homework.

The result? A fine specimen of a document which the entire class can show to your teachers for great marks! What you just did here was open sourcing your homework and let your student community work on it to create a more appealing document which is now complete.

But open source doesn't stop there​

Imagine your homework to be your project, your classmates to be your community. This community observes your project and suggests various improvements within it. Be it suggesting simple changes of changing the fonts or re-working the already existing complex APIs and queries.

Example of suggestions
A simple conversation between a contributor and a project developer

Another way to look at open source can be building the big Lego City together, block by block. Everyone can add their own pieces to what has been constructed so far and everyone can see how the city is made. In this way, everyone can make the city better and use it how they want.

Software Engineers
Budding software engineers collaborating to build their project

Open source is a great way to bring like-minded developers together. Everybody around you, be a fresher student or an industry experienced individual, has had to encounter with open source technologies without even realizing it. From something we daily use like Android to Linux: the operating system used by many corporates and tech giants, there's no saying what the next big thing will be.

Open Source
Python, Dart, React, MongoDB, even this text box is open source

That's about the gist of what I wished to express regarding open source. Surely that's not everything but I do look forward to go in-depth into this topic and talk about various different things which excite me! Do look forward to upcoming blogposts and reach me out for any constructive criticism, if any, for the future blogposts.

- - + + \ No newline at end of file diff --git a/blog/tags/quantum-computing/index.html b/blog/tags/quantum-computing/index.html index 25ce96ad..eb27f7e0 100644 --- a/blog/tags/quantum-computing/index.html +++ b/blog/tags/quantum-computing/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Quantum Computing"

View All Tags

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.

- - + + \ No newline at end of file diff --git a/blog/tags/react-js/index.html b/blog/tags/react-js/index.html index 7631e3c3..537cccdf 100644 --- a/blog/tags/react-js/index.html +++ b/blog/tags/react-js/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "ReactJs"

View All Tags

· 5 min read
Mahima Churi
As technology continues to evolve, web development has become an increasingly important field, and front-end frameworks such as ReactJS have emerged as crucial tools for building dynamic, user-friendly websites. Whether you are just starting out with web development or are looking to enhance your existing skills, I hope that you will find valuable insights and tips within these pages. So sit back, grab a cup of coffee, and join me on our journey through the exciting world of ReactJS!

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What is React JS?

React JS is nothing but a java script library that helps the developers in creating reusable UI components there by increasing the efficiency of code. When making dynamic websites React JS is proven to be more effective than Vanilla JS, and hence it has become a popular choice for building fast and scalable single-page applications. In simple terms, ReactJS helps make web development more efficient, organized, and dynamic.

Characteristic Features of React JS that makes it more versatile and Popular

Features of ReactJS
Features of ReactJS

1. Virtual DOM​

In traditional web development, when changes are made to a web page, the entire page needs to be re-rendered, which can be slow and time-consuming. The Virtual DOM solves this issue by creating a virtual representation of the web page in memory so when changes are made, ReactJS updates the virtual DOM instead of the actual page, which is much faster. Then, ReactJS compares the virtual DOM to the actual page and updates only the parts that have changed, rather than the entire page. This makes the updates and rendering process much faster and more efficient, improving the overall user experience of the web application.

2. Reusable Components​

ReactJS uses a component-based architecture, which means that the user interface is built using reusable components. Each component is a self-contained unit that handles a specific task or displays a specific piece of information, we can say that each components are independent. This makes the code more organized and easier to maintain, as well as reducing the amount of redundant code.

3. Community​

React has a vast and supportive community of developers who are constantly contributing new features and tools. React is open-source, meaning that anyone can contribute to the development of the library by fixing bugs, adding new features, or improving existing ones.

Link to contribute to the React Library

4. JSX​

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used by ReactJS that allows developers to write HTML-like code within their JavaScript. This makes it easier for users to write and understand the code, as it closely resembles the structure of HTML. This helps to improve the overall development experience by making the code more intuitive and easier to read.

For example, instead of writing the following code in pure JavaScript to render a simple button:

React.createElement("button", {className: "myButton"}, "Click Me!");

The same code can be written in JSX as:

<button className="myButton">Click Me!</button>;

5. Server-side Rendering​

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the browser. In the case of React, this means that the React components can be rendered on the server, allowing the browser to receive a fully rendered HTML page, instead of having to wait for JavaScript to execute and render the page on the client side again and again.

This results in faster initial load times, as the browser doesn’t have to wait for the JavaScript to execute and render the page. Additionally, server-side rendering can improve Search Engine Optimization (SEO), as search engines can better index and understand the content of the page.

6. Compatibility​

React’s simplicity and straightforward design makes it easy for developers to learn and adopt and it works seamlessly with other libraries and frameworks, such as Redux, allowing developers to create complex and scalable web applications.

Comaprison with other Frontend Frameworks

Popular Web Frameworks
Comparison with other frameworks as per the recent survey

Source: Stack Overflow Developer Survey 2021

From the above survey it can be clearly seen that React JS was named as one on the most commonly used web Framework.

React’s virtual DOM provides fast updates and rendering compared to traditional DOM manipulation. Angular and Vue also have optimized updates, but they may not be as fast as React’s virtual DOM.

Also, React is known for its simplicity and minimalistic approach, making it relatively easy to learn and get started with. Angular, on the other hand, has a steeper learning curve due to its more complex architecture. Vue falls somewhere in between, offering a more accessible learning experience as compared to Angular.

info

You can see more detailed insights of React JS on their Official Website

Conclusion​

In conclusion, React is the future of web development, offering a robust set of features and tools that make it easy to build high-performing, scalable, and maintainable web applications. Its simplicity, performance, and compatibility with other technologies make it an excellent choice for modern web development.

- - + + \ No newline at end of file diff --git a/blog/tags/realm/index.html b/blog/tags/realm/index.html index 306d13d8..8cfece7d 100644 --- a/blog/tags/realm/index.html +++ b/blog/tags/realm/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Realm"

View All Tags

· 7 min read
Aadil Rayeen

Quantum computing, often regarded as the next frontier in computational technology, is transforming the way we process data and solve complicated issues. This advanced branch of computer science uses quantum mechanics concepts to execute calculations at previously unthinkable speeds. We will delve into the world of quantum computing in this blog, investigating its underlying concepts, applications, and the potential it has for the future of technology.

- - + + \ No newline at end of file diff --git a/blog/tags/resonsiveness/index.html b/blog/tags/resonsiveness/index.html index 048b1de2..ba010037 100644 --- a/blog/tags/resonsiveness/index.html +++ b/blog/tags/resonsiveness/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "Resonsiveness"

View All Tags

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.
- - + + \ No newline at end of file diff --git a/blog/tags/social/index.html b/blog/tags/social/index.html index 5fd0e2fa..fb5f13e5 100644 --- a/blog/tags/social/index.html +++ b/blog/tags/social/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "social"

View All Tags

· 6 min read
Nikita Shukla

Are you one of those engineers who are just engrossed in academics and is looking to do something more than that in your college days? Rotaract Club of TCET is one of the perfect choices to go for. I f you are searching to participate in something interesting where you can develop yourself and volunteer as well, you are at the correct place. To know more continue reading this blog.

‘Boldly Going: Rotaract Club of TCET '

RCTCET

"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience."

-Eleanor Roosevelt

Whether you're a musician, artist, athlete, writer, or simply someone who loves trying new things, Rotaract Club of TCET offers a welcoming and inclusive community where you can connect with like-minded individuals and pursue your passions. From workshops and classes to group outings and events, RCTCET provides a variety of opportunities for personal growth, skill development, and social interaction.

Types of Projects & Events conducted in RCTCET​

1. Volunteering​

Volunteering in community service related projects or events can help you gain practical experience while also contributing to your community.By volunteering, individuals can gain a deeper understanding of community needs and become more empathetic towards others.Community service volunteering activities are a valuable way to give back to the community and make a positive impact on society. They provide individuals with opportunities to engage in meaningful work, develop new skills, build relationships, and gain a sense of personal fulfillment.

Few volunteering events:​

  • TechWorld
    • This is a flagship (activities which happens throughout the year) activity where we teach the underprivileged about electronic circuits and create awareness amongst them to pursue Engineering as a career, to mentor younger students for their bright future.
  • Emergency
    • The main aim of conduction of this event is to make our budding Engineers well aware how to perform CPR and give first aid to someone in need.
  • Beach Cleanup
    • Such events are conducted by keeping the welfare of the community and balance of ecosystem in mind. This could be possible only with the contribution of people who are genuinely interested in volunteering. Afterall,"If you concentrate on small, manageable steps you can cross unimaginable distances."

2. Space to Socialize​

Joining clubs and organizations is a great way to meet people who share your interests such as sports, music, etc. It is an amazing platform to meet new people and develop bonding. Remember, socializing in college can be challenging at first, but it's important to step out of your comfort zone and take advantage of opportunities to meet new people. Be yourself, have fun, and enjoy the college experience! We have fun Club Service (Avenue) Events which promotes students to know each other irrespective of their branches and to have fun together releasing the academic exhaustion aside.

Examples of such socializing events:​

  • Sunday Funday
  • Treasure Hunt
  • Movie Night
  • Badminton Tournament
  • Kick it!(Football Tournament)

3. Space to express creativity​

Rotaract Club of TCET provides a cavity to students where they can express their artistic or literary talents. Members can explore different genres of writing, such as poetry, fiction, creative nonfiction, and screenwriting. They can also participate in writing prompts and exercises, which can help them generate new ideas and experiment with different writing styles. Students can showcase their work through public readings and publications. For our members possessing artistic talent, be it in the form of paper or digitalized form of art they can contribute by means of Digital Communication. They can learn, grow and experiment at the same time. For individuals who love to capture beautiful moments they can come forward and give their photography skills a boost. People who are good at branding they are welcomed as well where they can fully utilise their Social Media Marketing skills.

4. Development of Overall Personality​

Participating in co-curricular activities can be extremely beneficial for your personal and professional development. Our club can help you learn about the business side of engineering and develop skills such as project management, leadership, and communication. We often organize events such as pitch competitions, guest speakers, and mentorship programs.

We conduct events wherein students learn how to develop Interpersonal Skills, they can participate in group activities, attend workshops and seminars on communication and collaboration, practice active listening, and seek feedback from peers and instructors. Building strong interpersonal skills takes time and effort, but it is a valuable investment for future success.

5. Last but not the least, it is a platform where you can create amazing memories!​

RCevent

"Education is not just about academics. It's about building character, improving one's personality, and becoming a better human being."

- Sudha Murty

Joining RCTCET can create can create amazing memories for students. It is a complete new experience where you can participate in different kinds of fun events. Opportunities to travel together, whether it's a weekend camping trip or a day trip to a nearby city the experience is wonderful. Volunteering for a social cause develops a sense of responsibility in young individuals. Competing with your peers gives you confidence to do better than before. Sharing same interests with someone new helps you create memorable experiences. College days are something a student cherishes for life and it is grateful to have a platform as such.

To know more about us:​

Visit our Official Website And do follow us @rc_tcet

Conclusion​

Remember, co-curricular activities are meant to complement your academic studies. Make sure to balance your time and commitments so that you can excel both academically and personally. Don't be afraid to step out of your comfort zone and try something new. Joining a club as Rotaract Club of TCET can be a rewarding and fun experience that creates memories that last a lifetime. Moreover, social clubs can help promote social cohesion and strengthen community ties. They can offer a sense of belonging and provide a platform for individuals to come together and work towards common goals. In short, Rotaract Club of TCET can be a fun and enriching way to connect with others and build community. By joining this club, individuals can expand their horizons, create new friendships, and contribute to a more vibrant and inclusive society.

- - + + \ No newline at end of file diff --git a/blog/tags/software/index.html b/blog/tags/software/index.html index 84426bbc..f804c986 100644 --- a/blog/tags/software/index.html +++ b/blog/tags/software/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

5 posts tagged with "Software"

View All Tags

· 7 min read
Kashish Singh

Ever wondered what blockchain is and how it looks? Let's explore the realm of blockchain together. This blog focuses on the basics of blockchain technology along with its applications. In this evolving era, it is important to understand this technology because, according to recent research, blockchain has the potential to reshape the future and the way we perceive it.

· 5 min read
Gaurang Vishwakarma
Vishal Rawat

Welcome to our first blog​

Welcome everyone to TCET Open Source's Blog Section. Here, we promote blogging in the student community. Talk about ongoing trends in tech, student life at TCET, and any topic you feel would feel great for this blog.

note

This particular blog will have recurring adjustments. Last revised on Oct 1st, 2023.

· 4 min read
Himanshu Agarwal

Applications and systems rely on smooth communication and data sharing to deliver improved functionality and services in today's interconnected digital environment. Application Programming Interfaces (APIs) are quite important in this situation. APIs serve as mediators, enabling interoperability, data sharing, and communication between various software programmes. This article will provide you a thorough introduction to APIs and their importance in contemporary software development, whether you're a developer, a tech enthusiast, or just interested about the world of APIs.


APIs to a layman
- - + + \ No newline at end of file diff --git a/blog/tags/software/page/2/index.html b/blog/tags/software/page/2/index.html index 35952832..92fbe9e8 100644 --- a/blog/tags/software/page/2/index.html +++ b/blog/tags/software/page/2/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

5 posts tagged with "Software"

View All Tags

· 6 min read
Himanshu Agarwal
Mahima Churi

This Blog talks about the emerging trends in Cloud computing, and also gives a gist about the term Cloud Computing and its impact in leveraging businesses and individuals. The cloud has the ability to streamline and improve a variety of processes. From understanding the meaning of cloud computing model to discussing various characteristics, this blog will be your one-stop-shop for all things cloud computing. So, fasten your seatbelts and let's dive into the exciting world of the cloud together!!


What is Cloud Computing ?

Cloud computing is a way of using current technology where we can access and use internet-based services and storage to manage, process, and store data and information, instead of having to have it all on your own personal device or computer.

We can think of it like having access to a giant computer in the sky that we can use to do our work, store our files, and run our applications, without having to worry about the technical details or maintenance of the underlying hardware and software. This makes it easier and more convenient for us to access our data and resources from anywhere in the world, as long as we have an internet connection.

Let's take a look at some intriguing features of Cloud Computing!!​


🛠️ On-Demand Self-Service

With cloud computing, we can provision computing services, like server time and network storage, automatically. No communication with the service provider will be necessary. Customers of cloud services can view their cloud services, track their usage, and provision and de-provision services by logging into their cloud accounts through a web self-service portal.

💻 Broad Network Access

Broad network connectivity is another crucial aspect of cloud computing. Through a network and on portable devices like smartphones, tablets, laptops, and desktop PCs, we can access cloud services. A private cloud employs a local area network, whereas a public cloud uses the internet. Broad network access and cloud computing both rely heavily on latency and bandwidth since they have an impact on service quality.

📝 Resource Pooling

With resource pooling, multiple customers can share physical resources using a multi-tenant model. Based on demand, this model distributes and redistributes real and virtual resources. Customers can share the same applications or infrastructure with multi-tenancy while still retaining their privacy and security. Customers may be able to designate the location of their resources at a higher level of abstraction, such as a country, state, or data centre, even though they won't know the precise location of their resources. Customers can pool a variety of resources, including memory, computing power, and bandwidth.

🔗 Rapid Elasticity

Cloud services can be elastically provisioned and released, sometimes automatically, so customers can scale quickly based on demand, thus making it highly scalable. The capabilities available for provisioning are practically unlimited. Customers can use these features whenever they want and in whatever amount. Customers can scale cloud capacity, cost, and usage without incurring additional contracts or charges. We won't need to acquire computer hardware thanks to quick elasticity.

⚙️ Measured Service

A metering capability in cloud systems optimises resource utilisation at an abstraction level appropriate for the type of service. For storage, processing, bandwidth, and users, for instance, we can utilise a metered service. A pay-for-what-you-use model is used to base payments on the customer's actual consumption. Consumers and service providers benefit from a transparent experience that is created by monitoring, managing, and reporting resource use.

Lets have a look at some of the most used Cloud Storage Services​


Most Used Cloud Storage Services
Most used Cloud Storage Services

Google Drive is by far the most popular cloud storage service in the world, with an use rate of 94.44 percent. The finest cloud storage for collaboration, Dropbox, is in second position with a still-impressive 66.2 percent, followed by OneDrive (39.35 percent) and iCloud (38.89 percent). Additionally popular cloud storage providers include MEGA (5.09 percent), Box (4.17 percent), and pCloud (1.39%), all of which made our list of the top cloud storage services.

Statistics on Cloud Service Providers​


Stats on Cloud Service Providers
Stats on Cloud Service Providers

AWS still holds over a third of the cloud services market:

  • In Q2 2022, AWS commanded 34% of the cloud market, a 1% increase year-over-year. Azure is second with 21% of the market, followed by Google Cloud (10%), Alibaba (5%), and IBM (4%).
  • Amazon's revenue from AWS grew from 5.62 in 2014 to 13.24% in 2021.
  • The survey also showed the cloud market continues to grow 34% year-over-year.
FunFact

It took Netflix seven years to migrate to AWS

Some drawbacks to have a look upon​


Drawbacks of Cloud Computing
Drawbacks of Cloud Computing

According to cybersecurity experts, the most pressing cloud security challenges are misconfiguration of the cloud infrastructure (68 percent); unauthorized access (58 percent); insecure API (52 percent); accounts, services or traffic hijacking (50 percent) and external data sharing (43 percent).

info

If you are interested in finding out more about cloud security, we have an excellent article detailing cloud security measures for cloud storage services.

Conclusion​

  • In conclusion, cloud computing has become an increasingly popular and indispensable tool for businesses and organizations of all sizes. With its ability to provide on-demand access to a wide range of computing resources, including storage, computing power, and applications, it has transformed the way organizations operate and has unlocked new opportunities for innovation and growth.
  • The cloud offers many benefits, including cost savings, scalability, increased efficiency, and improved security. As more and more businesses adopt cloud computing, it is likely that this trend will continue to grow, driving further innovation and enabling organizations to do more with less.
  • However, while the benefits of cloud computing are clear, there are also challenges that must be addressed, such as ensuring data security, managing vendor lock-in, and ensuring reliable performance.
  • Despite these challenges, the future of cloud computing looks bright, with advancements in areas such as artificial intelligence, machine learning, and the Internet of Things set to further drive its growth and revolutionize the way businesses operate.

In short, cloud computing is here to stay, and its impact on the business world will only continue to grow in the years to come.

· 4 min read
Vishal Rawat

Project management is a wild way to make sure things are progressing as they should. There is a project management technique for everything. Well, almost everything. I haven't found a project managing concept to overcome my feelings of procrastination. Someone might create it one day.

What really is Open Source?​

If you're the engineering type of person that tackles humanity's problems and urgent needs by bringing together an entire community and building a "project" with them, you'll want to know about Open source. Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.

Here it is again in bigger letters, for impact:

Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.​

And now you know what open source is. In theory, this blog post could be done!

Beyond the marketing standpoint​

Technology is a concept which is ever-changing in how it is defined, its magnitude and how we as engineers develop it. In the world of technology we always find "buzz words" which reflect the recent advancements which are so efficient that they are slowly brought within the industry as a standard way of working on projects, as a team.

One such "buzz word" in the area of software development and project management is open source. Open source is a way of working on a software typically developed in a public, collaborative manner, with the source code made freely available to anyone who wants to use, modify, or distribute it. The term "open source" was coined in 1998 by a group of people in the software industry who wanted to create a new model of software development that was more collaborative and community-driven.

Open source software is often developed and maintained by a community of volunteers and contributors, who work together to improve the software and fix bugs. Consider your homework: a dry document which contains things here and there which you know is very incomplete. If you have a good enough personality (which I don't), you send this document to all your classmates who start doing bits of your homework.

The result? A fine specimen of a document which the entire class can show to your teachers for great marks! What you just did here was open sourcing your homework and let your student community work on it to create a more appealing document which is now complete.

But open source doesn't stop there​

Imagine your homework to be your project, your classmates to be your community. This community observes your project and suggests various improvements within it. Be it suggesting simple changes of changing the fonts or re-working the already existing complex APIs and queries.

Example of suggestions
A simple conversation between a contributor and a project developer

Another way to look at open source can be building the big Lego City together, block by block. Everyone can add their own pieces to what has been constructed so far and everyone can see how the city is made. In this way, everyone can make the city better and use it how they want.

Software Engineers
Budding software engineers collaborating to build their project

Open source is a great way to bring like-minded developers together. Everybody around you, be a fresher student or an industry experienced individual, has had to encounter with open source technologies without even realizing it. From something we daily use like Android to Linux: the operating system used by many corporates and tech giants, there's no saying what the next big thing will be.

Open Source
Python, Dart, React, MongoDB, even this text box is open source

That's about the gist of what I wished to express regarding open source. Surely that's not everything but I do look forward to go in-depth into this topic and talk about various different things which excite me! Do look forward to upcoming blogposts and reach me out for any constructive criticism, if any, for the future blogposts.

- - + + \ No newline at end of file diff --git a/blog/tags/source/index.html b/blog/tags/source/index.html index 479bf4e2..53ee82f0 100644 --- a/blog/tags/source/index.html +++ b/blog/tags/source/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

3 posts tagged with "source"

View All Tags

· 5 min read
Gaurang Vishwakarma
Vishal Rawat

Welcome to our first blog​

Welcome everyone to TCET Open Source's Blog Section. Here, we promote blogging in the student community. Talk about ongoing trends in tech, student life at TCET, and any topic you feel would feel great for this blog.

note

This particular blog will have recurring adjustments. Last revised on Oct 1st, 2023.

· 6 min read
Himanshu Agarwal
Mahima Churi

This Blog talks about the emerging trends in Cloud computing, and also gives a gist about the term Cloud Computing and its impact in leveraging businesses and individuals. The cloud has the ability to streamline and improve a variety of processes. From understanding the meaning of cloud computing model to discussing various characteristics, this blog will be your one-stop-shop for all things cloud computing. So, fasten your seatbelts and let's dive into the exciting world of the cloud together!!


What is Cloud Computing ?

Cloud computing is a way of using current technology where we can access and use internet-based services and storage to manage, process, and store data and information, instead of having to have it all on your own personal device or computer.

We can think of it like having access to a giant computer in the sky that we can use to do our work, store our files, and run our applications, without having to worry about the technical details or maintenance of the underlying hardware and software. This makes it easier and more convenient for us to access our data and resources from anywhere in the world, as long as we have an internet connection.

Let's take a look at some intriguing features of Cloud Computing!!​


🛠️ On-Demand Self-Service

With cloud computing, we can provision computing services, like server time and network storage, automatically. No communication with the service provider will be necessary. Customers of cloud services can view their cloud services, track their usage, and provision and de-provision services by logging into their cloud accounts through a web self-service portal.

💻 Broad Network Access

Broad network connectivity is another crucial aspect of cloud computing. Through a network and on portable devices like smartphones, tablets, laptops, and desktop PCs, we can access cloud services. A private cloud employs a local area network, whereas a public cloud uses the internet. Broad network access and cloud computing both rely heavily on latency and bandwidth since they have an impact on service quality.

📝 Resource Pooling

With resource pooling, multiple customers can share physical resources using a multi-tenant model. Based on demand, this model distributes and redistributes real and virtual resources. Customers can share the same applications or infrastructure with multi-tenancy while still retaining their privacy and security. Customers may be able to designate the location of their resources at a higher level of abstraction, such as a country, state, or data centre, even though they won't know the precise location of their resources. Customers can pool a variety of resources, including memory, computing power, and bandwidth.

🔗 Rapid Elasticity

Cloud services can be elastically provisioned and released, sometimes automatically, so customers can scale quickly based on demand, thus making it highly scalable. The capabilities available for provisioning are practically unlimited. Customers can use these features whenever they want and in whatever amount. Customers can scale cloud capacity, cost, and usage without incurring additional contracts or charges. We won't need to acquire computer hardware thanks to quick elasticity.

⚙️ Measured Service

A metering capability in cloud systems optimises resource utilisation at an abstraction level appropriate for the type of service. For storage, processing, bandwidth, and users, for instance, we can utilise a metered service. A pay-for-what-you-use model is used to base payments on the customer's actual consumption. Consumers and service providers benefit from a transparent experience that is created by monitoring, managing, and reporting resource use.

Lets have a look at some of the most used Cloud Storage Services​


Most Used Cloud Storage Services
Most used Cloud Storage Services

Google Drive is by far the most popular cloud storage service in the world, with an use rate of 94.44 percent. The finest cloud storage for collaboration, Dropbox, is in second position with a still-impressive 66.2 percent, followed by OneDrive (39.35 percent) and iCloud (38.89 percent). Additionally popular cloud storage providers include MEGA (5.09 percent), Box (4.17 percent), and pCloud (1.39%), all of which made our list of the top cloud storage services.

Statistics on Cloud Service Providers​


Stats on Cloud Service Providers
Stats on Cloud Service Providers

AWS still holds over a third of the cloud services market:

  • In Q2 2022, AWS commanded 34% of the cloud market, a 1% increase year-over-year. Azure is second with 21% of the market, followed by Google Cloud (10%), Alibaba (5%), and IBM (4%).
  • Amazon's revenue from AWS grew from 5.62 in 2014 to 13.24% in 2021.
  • The survey also showed the cloud market continues to grow 34% year-over-year.
FunFact

It took Netflix seven years to migrate to AWS

Some drawbacks to have a look upon​


Drawbacks of Cloud Computing
Drawbacks of Cloud Computing

According to cybersecurity experts, the most pressing cloud security challenges are misconfiguration of the cloud infrastructure (68 percent); unauthorized access (58 percent); insecure API (52 percent); accounts, services or traffic hijacking (50 percent) and external data sharing (43 percent).

info

If you are interested in finding out more about cloud security, we have an excellent article detailing cloud security measures for cloud storage services.

Conclusion​

  • In conclusion, cloud computing has become an increasingly popular and indispensable tool for businesses and organizations of all sizes. With its ability to provide on-demand access to a wide range of computing resources, including storage, computing power, and applications, it has transformed the way organizations operate and has unlocked new opportunities for innovation and growth.
  • The cloud offers many benefits, including cost savings, scalability, increased efficiency, and improved security. As more and more businesses adopt cloud computing, it is likely that this trend will continue to grow, driving further innovation and enabling organizations to do more with less.
  • However, while the benefits of cloud computing are clear, there are also challenges that must be addressed, such as ensuring data security, managing vendor lock-in, and ensuring reliable performance.
  • Despite these challenges, the future of cloud computing looks bright, with advancements in areas such as artificial intelligence, machine learning, and the Internet of Things set to further drive its growth and revolutionize the way businesses operate.

In short, cloud computing is here to stay, and its impact on the business world will only continue to grow in the years to come.

· 4 min read
Vishal Rawat

Project management is a wild way to make sure things are progressing as they should. There is a project management technique for everything. Well, almost everything. I haven't found a project managing concept to overcome my feelings of procrastination. Someone might create it one day.

What really is Open Source?​

If you're the engineering type of person that tackles humanity's problems and urgent needs by bringing together an entire community and building a "project" with them, you'll want to know about Open source. Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.

Here it is again in bigger letters, for impact:

Open source refers to a philosophy of software development that emphasizes collaboration, transparency, and community-driven innovation.​

And now you know what open source is. In theory, this blog post could be done!

Beyond the marketing standpoint​

Technology is a concept which is ever-changing in how it is defined, its magnitude and how we as engineers develop it. In the world of technology we always find "buzz words" which reflect the recent advancements which are so efficient that they are slowly brought within the industry as a standard way of working on projects, as a team.

One such "buzz word" in the area of software development and project management is open source. Open source is a way of working on a software typically developed in a public, collaborative manner, with the source code made freely available to anyone who wants to use, modify, or distribute it. The term "open source" was coined in 1998 by a group of people in the software industry who wanted to create a new model of software development that was more collaborative and community-driven.

Open source software is often developed and maintained by a community of volunteers and contributors, who work together to improve the software and fix bugs. Consider your homework: a dry document which contains things here and there which you know is very incomplete. If you have a good enough personality (which I don't), you send this document to all your classmates who start doing bits of your homework.

The result? A fine specimen of a document which the entire class can show to your teachers for great marks! What you just did here was open sourcing your homework and let your student community work on it to create a more appealing document which is now complete.

But open source doesn't stop there​

Imagine your homework to be your project, your classmates to be your community. This community observes your project and suggests various improvements within it. Be it suggesting simple changes of changing the fonts or re-working the already existing complex APIs and queries.

Example of suggestions
A simple conversation between a contributor and a project developer

Another way to look at open source can be building the big Lego City together, block by block. Everyone can add their own pieces to what has been constructed so far and everyone can see how the city is made. In this way, everyone can make the city better and use it how they want.

Software Engineers
Budding software engineers collaborating to build their project

Open source is a great way to bring like-minded developers together. Everybody around you, be a fresher student or an industry experienced individual, has had to encounter with open source technologies without even realizing it. From something we daily use like Android to Linux: the operating system used by many corporates and tech giants, there's no saying what the next big thing will be.

Open Source
Python, Dart, React, MongoDB, even this text box is open source

That's about the gist of what I wished to express regarding open source. Surely that's not everything but I do look forward to go in-depth into this topic and talk about various different things which excite me! Do look forward to upcoming blogposts and reach me out for any constructive criticism, if any, for the future blogposts.

- - + + \ No newline at end of file diff --git a/blog/tags/technology/index.html b/blog/tags/technology/index.html index a840a3cd..73f9714e 100644 --- a/blog/tags/technology/index.html +++ b/blog/tags/technology/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

2 posts tagged with "Technology"

View All Tags

· 5 min read
Aadil Rayeen

Artificial Intelligence (AI) is becoming more and more crucial in influencing how we work and live in today's quickly changing technology landscape. Automation is one of the most interesting uses of AI because it has the ability to boost productivity, streamline procedures, and usher in a smarter era. We'll look at the main aspects of AI automation in this post.

· 7 min read
Kashish Singh

Ever wondered what blockchain is and how it looks? Let's explore the realm of blockchain together. This blog focuses on the basics of blockchain technology along with its applications. In this evolving era, it is important to understand this technology because, according to recent research, blockchain has the potential to reshape the future and the way we perceive it.

- - + + \ No newline at end of file diff --git a/blog/tags/terminal/index.html b/blog/tags/terminal/index.html index f3f3a697..4530f6e5 100644 --- a/blog/tags/terminal/index.html +++ b/blog/tags/terminal/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "terminal"

View All Tags

· 14 min read
Gaurang Vishwakarma
Saasha Gupta

Linux is an operating system kernel. It was originally written in 1991 by Linus Torvalds for his personal use, and it was soon adopted as the kernel for the GNU operating system, which was written to be a free (libre) replacement for Unix.

So, what even is GNU/Linux? What is free software? You must have so many more questions! Through this blog, we will try to understand what is linux, and why it is the most popular operating system in the world.

- - + + \ No newline at end of file diff --git a/blog/tags/tmai/index.html b/blog/tags/tmai/index.html index 480831c7..c847decc 100644 --- a/blog/tags/tmai/index.html +++ b/blog/tags/tmai/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

3 posts tagged with "tmai"

View All Tags

· 4 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Code Optimization Revolutionized: Google DeepMind's AI Unleashes New Speed-Boosting Technique. 1​

DeepMind's AlphaDev AI achieves groundbreaking speed improvements in sorting algorithms, surpassing existing methods by up to 70%. Its innovative techniques have been adopted by millions of software developers, marking the first integration of AI-discovered algorithms in language updates. DeepMind's gamified approach, using reinforcement learning, trains AlphaDev to construct faster and correct algorithms. This breakthrough revolutionizes code optimization and sets the stage for further AI-driven innovations in computer science.

Elevating the Shopping Experience with AI Virtual Try-On on Google Shopping. 2​

Example of Virtual Try of Clothes with AI

Google Shopping has introduced AI Virtual Try-On, a new feature that allows users to virtually try on beauty products before buying them. Using advanced machine learning algorithms and facial recognition technology, the feature provides realistic representations of the products on the user's face. It enhances convenience, addresses concerns about online shopping, and offers a seamless experience. Users can access the feature from Google Search, Google Shopping, or participating retailer websites, making informed decisions with detailed product information and user reviews. This innovation bridges the gap between online and in-store try-ons, revolutionizing the beauty shopping experience.

Ink AI Unveils ChatGPT-Based E-book Generator for Effortless Full-Length E-book Creation. 3​

Ink AI has introduced a game-changing e-book generator tool that utilizes ChatGPT, an AI language model, to effortlessly create full-length e-books. By inputting prompts, users receive context-aware responses that form the basis of their e-books, making the writing process faster and more efficient. The tool allows customization of genre, style, and length, and the user-friendly interface simplifies content creation. Ink AI's e-book generator opens up new possibilities for authors, content creators, and publishers by revolutionizing the e-book creation process with AI technology.

Meta Unveils Stablediffusion: A Groundbreaking AI Model for Music Generation. 4​

Meta has introduced Stablediffusion, an advanced AI model called MusicGen, designed for music generation. Unlike traditional models, Stablediffusion produces stable, coherent, and emotionally engaging musical compositions. Trained on diverse musical genres, the model incorporates stability mechanisms for smooth transitions and consistent structures.

It considers melody, harmonies, rhythms, and tonal variations, resulting in natural and professional-sounding compositions. Stablediffusion offers a powerful tool for musicians, composers, and music enthusiasts, revolutionizing AI-generated music with its stable and artistically satisfying output.

Draggan Goes Open Source: Empowering Developers with Advanced AI Framework. 5​

Example of DragGAN to change perspective of Lion and more

Draggan, an advanced AI framework focused on reinforcement learning, has been released as open source. This allows developers worldwide to access and utilize its capabilities for training AI models. Draggan simplifies the process with its user-friendly interface, extensive documentation, and pre-built components, enabling faster development and deployment of AI systems. By democratizing access to this powerful tool, the open-source release of Draggan promotes collaboration and accelerates advancements in AI research and application development.

MIT Introduces New Model for Accelerated Drug Discovery. 6​

MIT researchers have developed a groundbreaking AI model called AccelerateDrug, which revolutionizes the process of drug discovery. The model utilizes advanced machine learning algorithms to rapidly analyze chemical and biological data, predicting the effectiveness of potential drug compounds. By significantly reducing experimentation time and resources, AccelerateDrug streamlines the drug discovery process and expedites the development of new medications.

The model has demonstrated high accuracy and outperformed existing methods in predicting drug efficacy. AccelerateDrug has the potential to accelerate the availability of life-saving treatments, benefiting patients and advancing healthcare outcomes.

Google Introduces AudioPalm: Bridging the Gap between Text and Voice. 7​

Brief Architecture of AudioPaLM

Google has introduced AudioPalm, an innovative technology that bridges the gap between text and voice. Using advanced AI algorithms, it converts written text into human-like speech and transcribes spoken language into written text accurately. AudioPalm enhances accessibility, user experiences, and content creation, benefiting individuals with visual impairments and those seeking a more immersive interaction.

The technology has applications in education, entertainment, and accessibility services, and it integrates with existing Google services like Google Assistant and Google Translate. Google's AudioPalm represents a significant advancement in natural language processing, enabling seamless conversion between text and voice for enhanced user experiences.

  1. https://www.deepmind.com/research/highlighted-research/alphago↩
  2. https://blog.google/products/shopping/ai-virtual-try-on-google-shopping/↩
  3. https://goodereader.com/blog/e-book-news/new-chatgpt-based-e-book-generator-tool-from-ink-ai-can-create-full-length-e-books-easily↩
  4. https://analyticsindiamag.com/meta-releases-stablediffusion-for-music-musicgen/↩
  5. https://analyticsindiamag.com/draggan-is-finally-open-source/↩
  6. https://news.mit.edu/2023/new-model-offers-speedy-drug-discovery-0608↩
  7. https://google-research.github.io/seanet/audiopalm/examples/↩

· 6 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Google's PaLM 2: Revolutionizing Language Modeling with Multilingual Proficiency, Reasoning Abilities, and Coding Proficiency. 1​

Discover the cutting-edge advancements in AI from Google as they unveil PaLM 2, their next-generation language model. PaLM 2 has undergone extensive training on multilingual text, enabling it to understand, generate, and translate nuanced language across more than 100 languages. With improved reasoning capabilities and proficiency in programming languages, PaLM 2 demonstrates its potential for logic, common sense reasoning, mathematics, and coding tasks.

An Example of Prompt to Med PaLM - A specialized PaLM Model

Google has already integrated PaLM 2 into over 25 products and features, empowering users worldwide with enhanced language generation, efficient workspace features, and productivity tools. Through the development of PaLM 2, Google continues to drive innovation in AI and deliver real-world benefits in areas like healthcare and creative endeavors.

Meta's AI breakthrough: Speech recognition for 1,000+ languages now open source, paving the way for language preservation and universal communication. 2​

Meta's AI breakthrough empowers speech recognition in over 1,000 languages, a significant leap towards preserving endangered languages. The company is sharing these models as open source on GitHub, enabling developers to build inclusive speech applications for diverse languages. Existing speech recognition models cover a mere fraction of the world's 7,000 languages due to limited labeled training data. Meta overcame this challenge by retraining their AI model to learn speech patterns from audio, requiring minimal data. Their models can converse in over 1,000 languages and recognize more than 4,000, with half the error rate compared to rival models. While there are risks of mistranscription and biased words, Meta's advancements have far-reaching implications for language preservation and global communication.

AI Revolutionizes Antibiotic Discovery: Unveiling a Breakthrough Against Hospital Superbugs. 3​

Scientists from McMaster University have utilised artificial intelligence (AI) to uncover a breakthrough antibiotic called abaucin, which shows promising potential in combating drug-resistant infections, particularly Acinetobacter baumannii. This bacterium poses a significant threat in hospitals and is known to cause severe conditions like pneumonia and meningitis.

The traditional methods of antibiotic discovery have proven challenging and time-consuming. However, AI algorithms allowed researchers to swiftly assess millions of molecules, leading to the identification of abaucin. Unlike broad-spectrum antibiotics, abaucin specifically targets A. baumannii, reducing the risk of drug resistance development and opening doors to more precise and effective treatments. This study underscores the immense potential of AI in revolutionising antibiotic discovery and providing hope in the fight against deadly hospital superbugs.

Unleash Your Creativity: Photoshop's AI Transforms Your Images with a Single Text Prompt. 4​

A before &amp; after image of dog after applying Generative Fill of Photoshop

Adobe has introduced a groundbreaking AI tool called Generative Fill in its Photoshop application, leveraging generative AI to add or remove objects from photos based on a simple text prompt. Acting as an "AI co-pilot," Adobe Firefly powers this feature, aiming to revolutionize the photo editing process. While enhancing user creativity, Adobe acknowledges the need to address concerns about potential misuse of the technology. The addition of Generative Fill is expected to usher in a new era of AI-driven creativity in the creative industries, providing extraordinary results and streamlining previously time-consuming tasks. Currently available in the beta version, a wider release of this transformative AI tool in Photoshop is on the horizon.

Safeguarding the Digital Frontier: Exploring the Reality of AI in Cybersecurity. 5​

In the realm of cybersecurity, the long-awaited promise of artificial intelligence (AI) is becoming a reality. AI-driven capabilities have evolved from simple rule-based systems to sophisticated tools that leverage generative AI and contextualise vast amounts of data. This breakthrough empowers cybersecurity teams with game-changing speed and accuracy, providing them with a much-needed advantage in their ongoing battle against cybercriminals. With a skills shortage and data explosion posing challenges, matured AI capabilities address these obstacles by automating tasks, improving defence postures, and enabling precise actions.

By combining AI with automation, security teams can achieve reliable speed and enhance their ability to detect, investigate, and respond to threats. The integration of AI into threat detection and response technologies, such as IBM's QRadar Suite, amplifies the effectiveness of security operations centres (SOCs) and streamlines the incident lifecycle. With AI's assistance, SOC teams can prioritise real threats amidst the noise, accelerate investigation and response processes, and significantly enhance overall resilience and readiness in the cybersecurity industry.

Spotify's Potential AI Breakthrough: AI-Generated Podcast Ads. 6​

In a recent podcast episode, Bill Simmons shared that Spotify is reportedly working on AI technology that would allow podcast hosts to create host-read ads without having to personally record them. This development could offer podcasters exciting opportunities, including the creation of geo-targeted and multilingual ads, while saving valuable time for content creation. Although Spotify has not officially confirmed these claims, their ongoing investment in AI technology, exemplified by the introduction of AI DJ, suggests the possibility.

The advent of AI-generated podcast ads would revolutionise the industry, offering podcasters a time-saving alternative and the potential to reach a broader audience. However, concerns regarding authenticity and the risk of misinformation should also be considered. The development of AI-generated podcast ads marks a significant milestone in podcasting, with the future implementation and audience response eagerly anticipated.

Chegg vs. ChatGPT: The Battle for AI-Powered Education Dominance. 7​

Chegg, an online education company, and its encounter with the disruptive force of generative AI, particularly OpenAI's ChatGPT. Chegg's executives had previously considered the potential of AI to replace human instructors and reduce costs but underestimated the rapid pace at which consumers embraced tools like ChatGPT.

Initially, Chegg didn't view ChatGPT as a threat to its paid services. However, when OpenAI released GPT-4, students began opting for ChatGPT instead of Chegg's paid offerings, leading to a significant loss in subscriber growth and a decline in the company's market value.

Despite their efforts, Chegg's future remains uncertain, and the company's executives are focused on navigating the challenges posed by generative AI to stay relevant in the education industry.

  1. https://blog.google/technology/ai/google-palm-2-ai-large-language-model/↩
  2. https://www.technologyreview.com/2023/05/22/1073471/metas-new-ai-models-can-recognize-and-produce-speech-for-more-than-1000-languages/↩
  3. https://www.theguardian.com/technology/2023/may/25/artificial-intelligence-antibiotic-deadly-superbug-hospital↩
  4. https://news.adobe.com/news/news-details/2023/Adobe-Unveils-Future-of-Creative-Cloud-with-Generative-AI-as-a-Creative-Co-Pilot-in-Photoshop-default.aspx/default.aspx↩
  5. https://www.technologyreview.com/2023/05/24/1073395/ai-in-cybersecurity-yesterdays-promise-todays-reality/↩
  6. https://techcrunch.com/2023/05/23/spotify-may-use-ai-to-make-host-read-podcast-ads-that-sound-like-real-people/↩
  7. https://www.wired.com/story/chegg-embraced-ai-chatgpt-ate-its-lunch-anyway/↩

· 5 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Unlock the Power of BingAI: Experience the Future, Today! 1​

Microsoft has made Bing AI accessible to the public, eliminating the waitlist requirement. Users can now try out the AI bot by signing in to Bing using their Microsoft account on the Edge browser. The latest update introduces several exciting features powered by OpenAI's technologies.

Also, Bing AI now supports rich "visual answers," displaying graphs, charts, and formatted content. The Bing Image Creator has been upgraded to support over 100 languages, enabling the generation of AI images based on text prompts and visual examples. Additionally, users can export and share chats, benefit from improved summarization capabilities for long documents, and enjoy actions within Edge for quicker access to relevant content. Microsoft is also developing third-party plug-ins to expand functionality within Bing Chat.

LinkedIn's Intelligent Assistance: Craft the Perfect Job Application 2​

LinkedIn is reportedly testing an AI-powered feature that provides personalized writing suggestions for job seekers, aiming to help them create tailored job applications. The feature generates short cover letter-like messages using information from the user's profile, the hiring manager's profile, the job description, and the targeted company. While the AI-generated drafts serve as a starting point, LinkedIn emphasizes the importance of customization and encourages users to review and edit the suggestions to reflect their own voice and style.

This development builds upon LinkedIn's existing AI writing tool for profile creation. The adoption of AI in job application drafting reflects the growing interest in artificial intelligence, with its potential to enhance user experiences and improve outcomes in various industries, including recruitment and career development.

YOLO-NAS: Revolutionizing Object Detection with Unprecedented Precision 3​

Deci AI, a deep learning firm, has unveiled YOLO-NAS, its latest deep learning model designed for real-time object detection with remarkable performance. Built on Deci's Neural Architecture Search Technology, AutoNAC™, YOLO-NAS outperforms other models like YOLOv6, YOLOv7, and YOLOv8, including the recently launched YOLOv8. AutoNAC democratizes Neural Architecture Search, enabling organizations to create customized, fast, accurate, and efficient deep learning models quickly.

YOLO-NAS delivers superior throughput, achieving 50% more throughput and 1 mAP higher accuracy compared to other YOLO models. It is pre-trained on popular datasets, making it suitable for various real-world applications. The open-source model is available with pre-trained weights for non-commercial research use on Deci's PyTorch-based computer vision training library called SuperGradients.

Introducing StarCoder: Free Code-Generating Assistant 4​

Hugging Face and ServiceNow Research have jointly released StarCoder, a free code-generating model that offers an alternative to existing AI systems like GitHub's Copilot. StarCoder, part of the BigCode project, was trained on over 80 programming languages and integrates with Microsoft's Visual Studio Code editor. Unlike other commercial models, StarCoder is royalty-free and available for use by anyone, including corporations.

The project aims to develop state-of-the-art AI systems for code generation in an open and responsible manner. StarCoder's release comes amidst debates around the use of public source code and licensing agreements for training AI models, with efforts made to address privacy concerns and adhere to ethical best practices.

Geoffrey Hinton: AI's Threat Could Be 'More Urgent' Than Climate Change 5​

In a recent interview, renowned AI pioneer Geoffrey Hinton expressed his concerns that the threat posed by artificial intelligence (AI) to humanity could be even more urgent than climate change. Hinton, often referred to as one of the "godfathers of AI," believes that the risks associated with AI technology are significant and warrant immediate attention. Having recently left Alphabet, Hinton intends to speak out about these risks without any constraints from his former employer. As the debate around AI's impact on society continues to unfold, Hinton's remarks highlight the need for careful consideration and proactive measures to ensure the responsible and ethical development and deployment of AI technologies.

Accelerating the Quest for New Metals: ML Offers a Promising Solution 6​

Machine learning could help develop new types of metals with useful properties, such as resistance to extreme temperatures and rust, according to new research. This could be useful in a range of sectors—for example, metals that perform well at lower temperatures could improve spacecraft, while metals that resist corrosion could be used for boats and submarines. Usually they start off with one well-known element, like iron, which is cheap and malleable, and add one or two others to see the effect on the original material. It’s a laborious process of trial and error that inevitably yields more duds than useful results. Researchers from the Max Planck Institute managed to identify 17 promising new metals using this method.

Revolutionizing ML: Researchers Unveil a More Agile Approach 7​

Artificial intelligence researchers have celebrated a string of successes with neural networks, computer programs that roughly mimic how our brains are organized. In 2020, two researchers at the MIT led a team that introduced a new kind of neural network based on real-life intelligence — but not our own. After a breakthrough last year, the novel networks may now be versatile enough to supplant their traditional counterparts for certain applications.

Liquid neural networks offer an elegant and compact alternative , said Ken Goldberg, a roboticist at the University of California, Berkeley. These networks can run faster and more accurately than other so-called continuous-time neural networks, which model systems that vary over time

  1. https://blogs.microsoft.com/blog/2023/02/22/the-new-bing-preview-experience-arrives-on-bing-and-edge-mobile-apps-introducing-bing-now-in-skype/↩
  2. https://www.linkedin.com/pulse/how-ai-can-help-you-land-your-dream-job-step-by-step-hemachandran/↩
  3. https://deci.ai/blog/yolo-nas-object-detection-foundation-model/↩
  4. https://techcrunch.com/2023/05/04/hugging-face-and-servicenow-release-a-free-code-generating-model/amp/↩
  5. https://theconversation.com/ai-pioneer-geoffrey-hinton-says-ai-is-a-new-form-of-intelligence-unlike-our-own-have-we-been-getting-it-wrong-this-whole-time-204911↩
  6. https://www.technologyreview.com/2022/10/25/1062104/machine-learning-new-metals↩
  7. https://www.quantamagazine.org/researchers-discover-a-more-flexible-approach-to-machine-learning-20230207↩
- - + + \ No newline at end of file diff --git a/blog/tags/tui/index.html b/blog/tags/tui/index.html index b8114e88..bce062af 100644 --- a/blog/tags/tui/index.html +++ b/blog/tags/tui/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "tui"

View All Tags

· 14 min read
Gaurang Vishwakarma
Saasha Gupta

Linux is an operating system kernel. It was originally written in 1991 by Linus Torvalds for his personal use, and it was soon adopted as the kernel for the GNU operating system, which was written to be a free (libre) replacement for Unix.

So, what even is GNU/Linux? What is free software? You must have so many more questions! Through this blog, we will try to understand what is linux, and why it is the most popular operating system in the world.

- - + + \ No newline at end of file diff --git a/blog/tags/virtaul-dom/index.html b/blog/tags/virtaul-dom/index.html index 8b5b5543..edfc0452 100644 --- a/blog/tags/virtaul-dom/index.html +++ b/blog/tags/virtaul-dom/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Virtaul DOM"

View All Tags

· 5 min read
Mahima Churi
As technology continues to evolve, web development has become an increasingly important field, and front-end frameworks such as ReactJS have emerged as crucial tools for building dynamic, user-friendly websites. Whether you are just starting out with web development or are looking to enhance your existing skills, I hope that you will find valuable insights and tips within these pages. So sit back, grab a cup of coffee, and join me on our journey through the exciting world of ReactJS!

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

What is React JS?

React JS is nothing but a java script library that helps the developers in creating reusable UI components there by increasing the efficiency of code. When making dynamic websites React JS is proven to be more effective than Vanilla JS, and hence it has become a popular choice for building fast and scalable single-page applications. In simple terms, ReactJS helps make web development more efficient, organized, and dynamic.

Characteristic Features of React JS that makes it more versatile and Popular

Features of ReactJS
Features of ReactJS

1. Virtual DOM​

In traditional web development, when changes are made to a web page, the entire page needs to be re-rendered, which can be slow and time-consuming. The Virtual DOM solves this issue by creating a virtual representation of the web page in memory so when changes are made, ReactJS updates the virtual DOM instead of the actual page, which is much faster. Then, ReactJS compares the virtual DOM to the actual page and updates only the parts that have changed, rather than the entire page. This makes the updates and rendering process much faster and more efficient, improving the overall user experience of the web application.

2. Reusable Components​

ReactJS uses a component-based architecture, which means that the user interface is built using reusable components. Each component is a self-contained unit that handles a specific task or displays a specific piece of information, we can say that each components are independent. This makes the code more organized and easier to maintain, as well as reducing the amount of redundant code.

3. Community​

React has a vast and supportive community of developers who are constantly contributing new features and tools. React is open-source, meaning that anyone can contribute to the development of the library by fixing bugs, adding new features, or improving existing ones.

Link to contribute to the React Library

4. JSX​

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used by ReactJS that allows developers to write HTML-like code within their JavaScript. This makes it easier for users to write and understand the code, as it closely resembles the structure of HTML. This helps to improve the overall development experience by making the code more intuitive and easier to read.

For example, instead of writing the following code in pure JavaScript to render a simple button:

React.createElement("button", {className: "myButton"}, "Click Me!");

The same code can be written in JSX as:

<button className="myButton">Click Me!</button>;

5. Server-side Rendering​

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the browser. In the case of React, this means that the React components can be rendered on the server, allowing the browser to receive a fully rendered HTML page, instead of having to wait for JavaScript to execute and render the page on the client side again and again.

This results in faster initial load times, as the browser doesn’t have to wait for the JavaScript to execute and render the page. Additionally, server-side rendering can improve Search Engine Optimization (SEO), as search engines can better index and understand the content of the page.

6. Compatibility​

React’s simplicity and straightforward design makes it easy for developers to learn and adopt and it works seamlessly with other libraries and frameworks, such as Redux, allowing developers to create complex and scalable web applications.

Comaprison with other Frontend Frameworks

Popular Web Frameworks
Comparison with other frameworks as per the recent survey

Source: Stack Overflow Developer Survey 2021

From the above survey it can be clearly seen that React JS was named as one on the most commonly used web Framework.

React’s virtual DOM provides fast updates and rendering compared to traditional DOM manipulation. Angular and Vue also have optimized updates, but they may not be as fast as React’s virtual DOM.

Also, React is known for its simplicity and minimalistic approach, making it relatively easy to learn and get started with. Angular, on the other hand, has a steeper learning curve due to its more complex architecture. Vue falls somewhere in between, offering a more accessible learning experience as compared to Angular.

info

You can see more detailed insights of React JS on their Official Website

Conclusion​

In conclusion, React is the future of web development, offering a robust set of features and tools that make it easy to build high-performing, scalable, and maintainable web applications. Its simplicity, performance, and compatibility with other technologies make it an excellent choice for modern web development.

- - + + \ No newline at end of file diff --git a/blog/tags/web-crawling/index.html b/blog/tags/web-crawling/index.html index 6cc4b93a..429c453b 100644 --- a/blog/tags/web-crawling/index.html +++ b/blog/tags/web-crawling/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

One post tagged with "web crawling"

View All Tags

· 6 min read
Mahima Churi

Web crawling, also known as web scraping, is the process of automatically extracting data from websites. It allows us to gather valuable information from various sources on the internet efficiently and in a structured manner. In this blog, we’ll explore the fundamentals of web crawling and how you can get started with your own data extraction projects.


- - + + \ No newline at end of file diff --git a/blog/tags/web-design/index.html b/blog/tags/web-design/index.html index a5532bf3..2548298f 100644 --- a/blog/tags/web-design/index.html +++ b/blog/tags/web-design/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

One post tagged with "Web Design"

View All Tags

· 10 min read
Jayesh Potlabattini

Web designing (the HTML & CSS part, not the Figma Part) can be a real pain if we don’t understand the design system/rules/procedure it uses. Even after watching HTML and CSS tutorials, we can still struggle to design anything in web. But, after having a decent understanding of divisions into rows and columns and learning about display properties and positioning in detail, you we can have some confidence to turn any Figma design to HTML and CSS. This is not a tutorial on HTML & CSS but a comprehensive usage of them. By reading this blog, I hope you can get the confidence and create the Mental Model of Web Design in your Brain ✨

This Blog also serves as a very precise summary of long web design bootcamp I took with **GenosisX Tech Community, watch here**

TL;DR: Create proper rows and columns for each block of design, put them into proper semantic tags or <div> tags. Use display flex or grid on them. Then style them properly with the fonts, colors, paddings, margins, borders, backgrounds. Position them properly with position property of CSS. Use responsive features of flex and grid. Done!

Prerequisite​

  • Basic knowledge of HTML and CSS would help, but not necessary.
  • That’s It!

Guide to Divisions

Making proper divisions of design into rows and columns will help you style them better and will make it 100x easier to make them responsive. Let’s get into it.

Visualize Design​

Visualize Design #1

Visualize Design #1

  • First think of the separate sections, in this case, there are two, a Header and a Hero section.
  • For every block of divisions, first think of sections as in one row or one column, then multiple columns or rows respectively.
  • Divisions
    • Here, the whole page is one column which has two rows, Navbar and Hero.
    • Then we clearly see, hero is divided into two columns, so hero itself is one row which has two different distinct columns.
    • You can try to dig further deep into each div visually.

So based upon the divisions, we can conclude the following code.

<body> <!-- First Column, whole page -->
  <header></header> <!-- First Row, Header -->
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>
</body>

Lets dig deep​

Visualize Design #2

Visualize Design #2

  • Divisions - Header - a row
    • Img - Logo - First column
    • Navbar - Second column
    • Button - Third column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section></section> <!-- First Column, Main Text Section-->
        <section></section> <!-- Second Column, Main Image Section-->
    </main>  
</body>

Use semantic tags wherever possible, they hold some meaning and are very important for SEO, read this article to learn more about them. https://www.pluralsight.com/guides/semantic-html

Visualize Design #3

Visualize Design #3

  • Divisions - Main - a row
    • First Column of Hero Section
      • H1 - Main text - First row
      • p - Description text - Second row
      • span - Third Row having two buttons
        • Button - First Column
        • Button - Second Column
    • Second Column of Hero Section
      • img - First Column
<body> <!-- First Column, whole page -->
  <header><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
    <nav>bunch of <a></a> Tags</nav> <!-- Second column -->
    <button>Sign up</button> <!-- Second column -->
  </header> 
  <main> <!-- Second Row, Hero section --> 
        <section> <!-- First Column, Main Text Section-->
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> <!-- Second Column, Main Image Section-->
      <img src="/.." />
    </section> 
    </main>  
</body>

Guide to Style them

Pat yourself if you reached till here, and understood everything above! Lets go ahead.

For the next part, I’ll use tailwindcss because it’s easier to explain with. If you know CSS, you basically know tailwindcss. Read this article for a quick introduction, I hope you come back here after reading this. https://tailwindcss.com/docs/utility-first

Step-by-Step Linear Process to Design Anything!​

Remember, this is not a hard and fast rule to follow exactly as is. You can add you own flavours to this. Skip steps which are not required. I made this using my personal experience so add modify it if I missed anything.

  1. Write HTML, using the divisions approach
  2. Set background color
  3. Set display - flex (if any child tags)
  4. Set width - compulsory
  5. Set height - optional
  6. set overflow properties
  7. Set font → size, weight, line height, letter spacing,
  8. Set text colors → paddings → borders → margins
    1. Colors - normal, hover, active any states
    2. Borders - width/thickness , color, radius, style
  9. Set position (if want to move the element from its position)
    1. relative - move it from its current position
    2. absolute - move it from its first relative parent start point (top-0, left-0 of relative parent)
    3. fixed - move it from windows start point (top-0, left-0 of whole window)
  10. Set z-index - define stack, which element should be above which
  11. Anything else that suits your design

This is a linear process, which means you first style the first tag then the second tag then the third tag then the next tag then the next tag and so on!

<body> <!-- First style this #1 -->
  <header><!-- then this #2 -->
    <img src="/.." /> <!-- Then this #3 -->
    <nav> <!-- Then this #4 -->
      <a>..</a> <!-- Then this #5 -->
      <a>..</a> <!-- Then this #6 -->
      <a>..</a> <!-- Then this #7 -->
    </nav> <!-- and so on till the last tag -->
    <button>Sign up</button> 
  </header> 
  <main> 
    <section> 
      <h1>Main text...</h1>
      <p>Description text...</p>
      <span>
        <button>Get Started</button>
        <button>Order Now</button>
      </span>
    </section> 
        <section> 
      <img src="/.." />
    </section>
</body>

Here comes the CSS​

Web Design Bootcamp Design

Web Design Bootcamp Design

Take a quick look, and we will start with the linear process

Body - main page​

We can see that the

  • background color is different
  • width is full screen
  • padding left and right i.e x-axis
<body class="bg-[#f3f3f3] w-[100vw] px-16 " > <!-- First Column, whole page -->
  <header  ><!-- First Row, Header -->
    <img src="/.." /> <!-- First column -->
            ...

Here,

  • We see, everything is in one row, so set display as flex
  • width is full available space so 100%
  • img - logo
    • width of some pixels
  • navbar
    • width of fit content (automatic)
    • font weight is medium i.e 500
    • Color is gray for all but black for current one
  • button
    • background is orange
    • text is bold
    • longer padding in x-axis, shorted padding in y-axis
    • border radius full rounded
<body class="bg-[#f3f3f3] w-[100vw] px-20 " > <!-- First Column, whole page -->
  <header class="flex w-full" ><!-- First Row, Header -->
    <img class="w-20" src="/.." /> <!-- First column -->
    <nav class="flex w-fit text-[#828282] font-medium" >
      <a id="current" class="text-black" >Home</a>
       <!-- if id="current" then class="text-black" add this login using javascript  -->
      <a>How it works</a>
      ...
    </nav> <!-- Second column -->
    <button class="bg-[#FF6F1E] w-fit text-white px-4 py-2 rounded-full" >Sign up</button> <!-- Second column -->
  </header>
     ...

We won’t do the whole design, but this will give you enough idea on how we go about designing and how to follow the linear process which may seem overwhelming but is really easy to follow.

Responsiveness, how easy is it?​

Desktop First Design Approach​

  • First we design the desktop version of our web app
  • Then slowly add rules to make it responsive for tablets then mobile
  • Desktop → Tablet → Mobile
  • This is not recommended

Mobile First Design Approach​

  • First we design the mobile version of our web app
  • Then slowly add rules to make it responsive for tablets then desktop
  • Mobile → Tablet → Desktop
  • This is most recommended and used by tailwindcss by default

No media query methods​

  • Set max-widths and min-widths
  • Use display flex with flex-wrap, flex-grow, flex-shrink, flex-basis
  • Use display grid with grid-template-columns, repeat - autofit, minmax
  • You can much deeper with maths to avoid media queries but I feel that much is unnecessary.
  • Using some media queries to avoid extreme complexity is always a good idea

A good example of minimum media queries​

****The prefix lg: is how we use media queries in tailwindcss, refer this* https://tailwindcss.com/docs/responsive-design

<main class="flex flex-wrap text-lg lg:text-xl m-5 lg:m-10" > <!-- Second Row, Hero section --> 
        <section class="max-w-lg" > <!-- First Column, Main Text Section-->
      ...
    </section> 
        <section class="max-w-lg" > <!-- Second Column, Main Image Section-->
      ...
    </section> 
</main>

Get Creative with Positioning​

When we want to move some elements from their original position to something else, we use position property.

CSS Positions​

  • Static
    • Default value
    • Original position, cannot change it.
  • Relative
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Moves towards the specified direction from its current position.
  • Absolute
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the first relative parents start coordinates.
  • Fixed
    • Set explicitly
    • Can change position from original using properties - top, left, bottom, right
    • Move towards the specified direction from the coordinates of window (browser tab) itself
    • Does not move on scroll, stays fixed.

This article by MDN teaches all positionings perfectly. https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example of positioning​

Lets look at the image which has blocks of elements floating above it.

Pizza Design

  • So the concept is we wrap the image in one div
  • This div will be set to position: relative
  • This div will contain image tag and other elements of those floating blocks
  • Don’t change image tag position
  • Change position: absolute of all floating elements
  • Then set them to their places via top, left, right, bottom
<section class="relative" > <!-- Second Column, Main Image Section-->
        <img class="w-24 h-40"  src="/.." />
        <div class="absolute top-[30%] right-[-10%]" >...</div>
        <div class="absolute top-[50%] left-[-10%]" >...</div>
        <div class="absolute bottom-[-15%] right-[12%]" >...</div>
</section>

Conclusion

  • Make proper divisions while writing the whole HTML. Visualize and then create rows and columns.
  • Write whole HTML of one section then style the whole section using the step by step linear process.
  • Position properly and most of it depends on the parents element position property, so make sure you set those correct.
  • Learn flex, grid and positions of CSS very thoroughly.
  • Learn tailwindcss because it will make your life easier, trust me on this.
- - + + \ No newline at end of file diff --git a/blog/tags/work/index.html b/blog/tags/work/index.html index 1aa5f98c..ba2020dd 100644 --- a/blog/tags/work/index.html +++ b/blog/tags/work/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Work"

View All Tags

· 5 min read
Aadil Rayeen

Artificial Intelligence (AI) is becoming more and more crucial in influencing how we work and live in today's quickly changing technology landscape. Automation is one of the most interesting uses of AI because it has the ability to boost productivity, streamline procedures, and usher in a smarter era. We'll look at the main aspects of AI automation in this post.

- - + + \ No newline at end of file diff --git a/blog/tags/zero-to-merge/index.html b/blog/tags/zero-to-merge/index.html index 3dba111f..8d36e190 100644 --- a/blog/tags/zero-to-merge/index.html +++ b/blog/tags/zero-to-merge/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

One post tagged with "Zero-to-Merge"

View All Tags

· 6 min read
Rajdeep Pal

CNCF Zero to Merge is a program by the Cloud Native Computing Foundation that helps newcomers make their first open-source contribution. It aims to lower the barrier for people who have never contributed to open source before, especially those from underrepresented groups. This blog summarizes my experience in the first-ever edition of the program


CNCF Zero to Merge - Your first step towards Open-Source

CNCF LOGO

- - + + \ No newline at end of file diff --git a/blog/tmai-april-2023/index.html b/blog/tmai-april-2023/index.html index 6be5592f..6dec2e2c 100644 --- a/blog/tmai-april-2023/index.html +++ b/blog/tmai-april-2023/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

This Month in AI - April 2023

· 5 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Unlock the Power of BingAI: Experience the Future, Today! 1​

Microsoft has made Bing AI accessible to the public, eliminating the waitlist requirement. Users can now try out the AI bot by signing in to Bing using their Microsoft account on the Edge browser. The latest update introduces several exciting features powered by OpenAI's technologies.

Also, Bing AI now supports rich "visual answers," displaying graphs, charts, and formatted content. The Bing Image Creator has been upgraded to support over 100 languages, enabling the generation of AI images based on text prompts and visual examples. Additionally, users can export and share chats, benefit from improved summarization capabilities for long documents, and enjoy actions within Edge for quicker access to relevant content. Microsoft is also developing third-party plug-ins to expand functionality within Bing Chat.

LinkedIn's Intelligent Assistance: Craft the Perfect Job Application 2​

LinkedIn is reportedly testing an AI-powered feature that provides personalized writing suggestions for job seekers, aiming to help them create tailored job applications. The feature generates short cover letter-like messages using information from the user's profile, the hiring manager's profile, the job description, and the targeted company. While the AI-generated drafts serve as a starting point, LinkedIn emphasizes the importance of customization and encourages users to review and edit the suggestions to reflect their own voice and style.

This development builds upon LinkedIn's existing AI writing tool for profile creation. The adoption of AI in job application drafting reflects the growing interest in artificial intelligence, with its potential to enhance user experiences and improve outcomes in various industries, including recruitment and career development.

YOLO-NAS: Revolutionizing Object Detection with Unprecedented Precision 3​

Deci AI, a deep learning firm, has unveiled YOLO-NAS, its latest deep learning model designed for real-time object detection with remarkable performance. Built on Deci's Neural Architecture Search Technology, AutoNAC™, YOLO-NAS outperforms other models like YOLOv6, YOLOv7, and YOLOv8, including the recently launched YOLOv8. AutoNAC democratizes Neural Architecture Search, enabling organizations to create customized, fast, accurate, and efficient deep learning models quickly.

YOLO-NAS delivers superior throughput, achieving 50% more throughput and 1 mAP higher accuracy compared to other YOLO models. It is pre-trained on popular datasets, making it suitable for various real-world applications. The open-source model is available with pre-trained weights for non-commercial research use on Deci's PyTorch-based computer vision training library called SuperGradients.

Introducing StarCoder: Free Code-Generating Assistant 4​

Hugging Face and ServiceNow Research have jointly released StarCoder, a free code-generating model that offers an alternative to existing AI systems like GitHub's Copilot. StarCoder, part of the BigCode project, was trained on over 80 programming languages and integrates with Microsoft's Visual Studio Code editor. Unlike other commercial models, StarCoder is royalty-free and available for use by anyone, including corporations.

The project aims to develop state-of-the-art AI systems for code generation in an open and responsible manner. StarCoder's release comes amidst debates around the use of public source code and licensing agreements for training AI models, with efforts made to address privacy concerns and adhere to ethical best practices.

Geoffrey Hinton: AI's Threat Could Be 'More Urgent' Than Climate Change 5​

In a recent interview, renowned AI pioneer Geoffrey Hinton expressed his concerns that the threat posed by artificial intelligence (AI) to humanity could be even more urgent than climate change. Hinton, often referred to as one of the "godfathers of AI," believes that the risks associated with AI technology are significant and warrant immediate attention. Having recently left Alphabet, Hinton intends to speak out about these risks without any constraints from his former employer. As the debate around AI's impact on society continues to unfold, Hinton's remarks highlight the need for careful consideration and proactive measures to ensure the responsible and ethical development and deployment of AI technologies.

Accelerating the Quest for New Metals: ML Offers a Promising Solution 6​

Machine learning could help develop new types of metals with useful properties, such as resistance to extreme temperatures and rust, according to new research. This could be useful in a range of sectors—for example, metals that perform well at lower temperatures could improve spacecraft, while metals that resist corrosion could be used for boats and submarines. Usually they start off with one well-known element, like iron, which is cheap and malleable, and add one or two others to see the effect on the original material. It’s a laborious process of trial and error that inevitably yields more duds than useful results. Researchers from the Max Planck Institute managed to identify 17 promising new metals using this method.

Revolutionizing ML: Researchers Unveil a More Agile Approach 7​

Artificial intelligence researchers have celebrated a string of successes with neural networks, computer programs that roughly mimic how our brains are organized. In 2020, two researchers at the MIT led a team that introduced a new kind of neural network based on real-life intelligence — but not our own. After a breakthrough last year, the novel networks may now be versatile enough to supplant their traditional counterparts for certain applications.

Liquid neural networks offer an elegant and compact alternative , said Ken Goldberg, a roboticist at the University of California, Berkeley. These networks can run faster and more accurately than other so-called continuous-time neural networks, which model systems that vary over time

  1. https://blogs.microsoft.com/blog/2023/02/22/the-new-bing-preview-experience-arrives-on-bing-and-edge-mobile-apps-introducing-bing-now-in-skype/↩
  2. https://www.linkedin.com/pulse/how-ai-can-help-you-land-your-dream-job-step-by-step-hemachandran/↩
  3. https://deci.ai/blog/yolo-nas-object-detection-foundation-model/↩
  4. https://techcrunch.com/2023/05/04/hugging-face-and-servicenow-release-a-free-code-generating-model/amp/↩
  5. https://theconversation.com/ai-pioneer-geoffrey-hinton-says-ai-is-a-new-form-of-intelligence-unlike-our-own-have-we-been-getting-it-wrong-this-whole-time-204911↩
  6. https://www.technologyreview.com/2022/10/25/1062104/machine-learning-new-metals↩
  7. https://www.quantamagazine.org/researchers-discover-a-more-flexible-approach-to-machine-learning-20230207↩
- - + + \ No newline at end of file diff --git a/blog/tmai-june-2023/index.html b/blog/tmai-june-2023/index.html index 7a298cda..c90ba81e 100644 --- a/blog/tmai-june-2023/index.html +++ b/blog/tmai-june-2023/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

This Month in AI - June 2023

· 4 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Code Optimization Revolutionized: Google DeepMind's AI Unleashes New Speed-Boosting Technique. 1​

DeepMind's AlphaDev AI achieves groundbreaking speed improvements in sorting algorithms, surpassing existing methods by up to 70%. Its innovative techniques have been adopted by millions of software developers, marking the first integration of AI-discovered algorithms in language updates. DeepMind's gamified approach, using reinforcement learning, trains AlphaDev to construct faster and correct algorithms. This breakthrough revolutionizes code optimization and sets the stage for further AI-driven innovations in computer science.

Elevating the Shopping Experience with AI Virtual Try-On on Google Shopping. 2​

Example of Virtual Try of Clothes with AI

Google Shopping has introduced AI Virtual Try-On, a new feature that allows users to virtually try on beauty products before buying them. Using advanced machine learning algorithms and facial recognition technology, the feature provides realistic representations of the products on the user's face. It enhances convenience, addresses concerns about online shopping, and offers a seamless experience. Users can access the feature from Google Search, Google Shopping, or participating retailer websites, making informed decisions with detailed product information and user reviews. This innovation bridges the gap between online and in-store try-ons, revolutionizing the beauty shopping experience.

Ink AI Unveils ChatGPT-Based E-book Generator for Effortless Full-Length E-book Creation. 3​

Ink AI has introduced a game-changing e-book generator tool that utilizes ChatGPT, an AI language model, to effortlessly create full-length e-books. By inputting prompts, users receive context-aware responses that form the basis of their e-books, making the writing process faster and more efficient. The tool allows customization of genre, style, and length, and the user-friendly interface simplifies content creation. Ink AI's e-book generator opens up new possibilities for authors, content creators, and publishers by revolutionizing the e-book creation process with AI technology.

Meta Unveils Stablediffusion: A Groundbreaking AI Model for Music Generation. 4​

Meta has introduced Stablediffusion, an advanced AI model called MusicGen, designed for music generation. Unlike traditional models, Stablediffusion produces stable, coherent, and emotionally engaging musical compositions. Trained on diverse musical genres, the model incorporates stability mechanisms for smooth transitions and consistent structures.

It considers melody, harmonies, rhythms, and tonal variations, resulting in natural and professional-sounding compositions. Stablediffusion offers a powerful tool for musicians, composers, and music enthusiasts, revolutionizing AI-generated music with its stable and artistically satisfying output.

Draggan Goes Open Source: Empowering Developers with Advanced AI Framework. 5​

Example of DragGAN to change perspective of Lion and more

Draggan, an advanced AI framework focused on reinforcement learning, has been released as open source. This allows developers worldwide to access and utilize its capabilities for training AI models. Draggan simplifies the process with its user-friendly interface, extensive documentation, and pre-built components, enabling faster development and deployment of AI systems. By democratizing access to this powerful tool, the open-source release of Draggan promotes collaboration and accelerates advancements in AI research and application development.

MIT Introduces New Model for Accelerated Drug Discovery. 6​

MIT researchers have developed a groundbreaking AI model called AccelerateDrug, which revolutionizes the process of drug discovery. The model utilizes advanced machine learning algorithms to rapidly analyze chemical and biological data, predicting the effectiveness of potential drug compounds. By significantly reducing experimentation time and resources, AccelerateDrug streamlines the drug discovery process and expedites the development of new medications.

The model has demonstrated high accuracy and outperformed existing methods in predicting drug efficacy. AccelerateDrug has the potential to accelerate the availability of life-saving treatments, benefiting patients and advancing healthcare outcomes.

Google Introduces AudioPalm: Bridging the Gap between Text and Voice. 7​

Brief Architecture of AudioPaLM

Google has introduced AudioPalm, an innovative technology that bridges the gap between text and voice. Using advanced AI algorithms, it converts written text into human-like speech and transcribes spoken language into written text accurately. AudioPalm enhances accessibility, user experiences, and content creation, benefiting individuals with visual impairments and those seeking a more immersive interaction.

The technology has applications in education, entertainment, and accessibility services, and it integrates with existing Google services like Google Assistant and Google Translate. Google's AudioPalm represents a significant advancement in natural language processing, enabling seamless conversion between text and voice for enhanced user experiences.

  1. https://www.deepmind.com/research/highlighted-research/alphago↩
  2. https://blog.google/products/shopping/ai-virtual-try-on-google-shopping/↩
  3. https://goodereader.com/blog/e-book-news/new-chatgpt-based-e-book-generator-tool-from-ink-ai-can-create-full-length-e-books-easily↩
  4. https://analyticsindiamag.com/meta-releases-stablediffusion-for-music-musicgen/↩
  5. https://analyticsindiamag.com/draggan-is-finally-open-source/↩
  6. https://news.mit.edu/2023/new-model-offers-speedy-drug-discovery-0608↩
  7. https://google-research.github.io/seanet/audiopalm/examples/↩
- - + + \ No newline at end of file diff --git a/blog/tmai-may-2023/index.html b/blog/tmai-may-2023/index.html index 3d10647b..f22fd833 100644 --- a/blog/tmai-may-2023/index.html +++ b/blog/tmai-may-2023/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

This Month in AI - May 2023

· 6 min read
Kunal Agrawal
Keval Waghate
Deexith Madas
Ananta Pandey

A robotic hand touching a speck of light

Google's PaLM 2: Revolutionizing Language Modeling with Multilingual Proficiency, Reasoning Abilities, and Coding Proficiency. 1​

Discover the cutting-edge advancements in AI from Google as they unveil PaLM 2, their next-generation language model. PaLM 2 has undergone extensive training on multilingual text, enabling it to understand, generate, and translate nuanced language across more than 100 languages. With improved reasoning capabilities and proficiency in programming languages, PaLM 2 demonstrates its potential for logic, common sense reasoning, mathematics, and coding tasks.

An Example of Prompt to Med PaLM - A specialized PaLM Model

Google has already integrated PaLM 2 into over 25 products and features, empowering users worldwide with enhanced language generation, efficient workspace features, and productivity tools. Through the development of PaLM 2, Google continues to drive innovation in AI and deliver real-world benefits in areas like healthcare and creative endeavors.

Meta's AI breakthrough: Speech recognition for 1,000+ languages now open source, paving the way for language preservation and universal communication. 2​

Meta's AI breakthrough empowers speech recognition in over 1,000 languages, a significant leap towards preserving endangered languages. The company is sharing these models as open source on GitHub, enabling developers to build inclusive speech applications for diverse languages. Existing speech recognition models cover a mere fraction of the world's 7,000 languages due to limited labeled training data. Meta overcame this challenge by retraining their AI model to learn speech patterns from audio, requiring minimal data. Their models can converse in over 1,000 languages and recognize more than 4,000, with half the error rate compared to rival models. While there are risks of mistranscription and biased words, Meta's advancements have far-reaching implications for language preservation and global communication.

AI Revolutionizes Antibiotic Discovery: Unveiling a Breakthrough Against Hospital Superbugs. 3​

Scientists from McMaster University have utilised artificial intelligence (AI) to uncover a breakthrough antibiotic called abaucin, which shows promising potential in combating drug-resistant infections, particularly Acinetobacter baumannii. This bacterium poses a significant threat in hospitals and is known to cause severe conditions like pneumonia and meningitis.

The traditional methods of antibiotic discovery have proven challenging and time-consuming. However, AI algorithms allowed researchers to swiftly assess millions of molecules, leading to the identification of abaucin. Unlike broad-spectrum antibiotics, abaucin specifically targets A. baumannii, reducing the risk of drug resistance development and opening doors to more precise and effective treatments. This study underscores the immense potential of AI in revolutionising antibiotic discovery and providing hope in the fight against deadly hospital superbugs.

Unleash Your Creativity: Photoshop's AI Transforms Your Images with a Single Text Prompt. 4​

A before &amp; after image of dog after applying Generative Fill of Photoshop

Adobe has introduced a groundbreaking AI tool called Generative Fill in its Photoshop application, leveraging generative AI to add or remove objects from photos based on a simple text prompt. Acting as an "AI co-pilot," Adobe Firefly powers this feature, aiming to revolutionize the photo editing process. While enhancing user creativity, Adobe acknowledges the need to address concerns about potential misuse of the technology. The addition of Generative Fill is expected to usher in a new era of AI-driven creativity in the creative industries, providing extraordinary results and streamlining previously time-consuming tasks. Currently available in the beta version, a wider release of this transformative AI tool in Photoshop is on the horizon.

Safeguarding the Digital Frontier: Exploring the Reality of AI in Cybersecurity. 5​

In the realm of cybersecurity, the long-awaited promise of artificial intelligence (AI) is becoming a reality. AI-driven capabilities have evolved from simple rule-based systems to sophisticated tools that leverage generative AI and contextualise vast amounts of data. This breakthrough empowers cybersecurity teams with game-changing speed and accuracy, providing them with a much-needed advantage in their ongoing battle against cybercriminals. With a skills shortage and data explosion posing challenges, matured AI capabilities address these obstacles by automating tasks, improving defence postures, and enabling precise actions.

By combining AI with automation, security teams can achieve reliable speed and enhance their ability to detect, investigate, and respond to threats. The integration of AI into threat detection and response technologies, such as IBM's QRadar Suite, amplifies the effectiveness of security operations centres (SOCs) and streamlines the incident lifecycle. With AI's assistance, SOC teams can prioritise real threats amidst the noise, accelerate investigation and response processes, and significantly enhance overall resilience and readiness in the cybersecurity industry.

Spotify's Potential AI Breakthrough: AI-Generated Podcast Ads. 6​

In a recent podcast episode, Bill Simmons shared that Spotify is reportedly working on AI technology that would allow podcast hosts to create host-read ads without having to personally record them. This development could offer podcasters exciting opportunities, including the creation of geo-targeted and multilingual ads, while saving valuable time for content creation. Although Spotify has not officially confirmed these claims, their ongoing investment in AI technology, exemplified by the introduction of AI DJ, suggests the possibility.

The advent of AI-generated podcast ads would revolutionise the industry, offering podcasters a time-saving alternative and the potential to reach a broader audience. However, concerns regarding authenticity and the risk of misinformation should also be considered. The development of AI-generated podcast ads marks a significant milestone in podcasting, with the future implementation and audience response eagerly anticipated.

Chegg vs. ChatGPT: The Battle for AI-Powered Education Dominance. 7​

Chegg, an online education company, and its encounter with the disruptive force of generative AI, particularly OpenAI's ChatGPT. Chegg's executives had previously considered the potential of AI to replace human instructors and reduce costs but underestimated the rapid pace at which consumers embraced tools like ChatGPT.

Initially, Chegg didn't view ChatGPT as a threat to its paid services. However, when OpenAI released GPT-4, students began opting for ChatGPT instead of Chegg's paid offerings, leading to a significant loss in subscriber growth and a decline in the company's market value.

Despite their efforts, Chegg's future remains uncertain, and the company's executives are focused on navigating the challenges posed by generative AI to stay relevant in the education industry.

  1. https://blog.google/technology/ai/google-palm-2-ai-large-language-model/↩
  2. https://www.technologyreview.com/2023/05/22/1073471/metas-new-ai-models-can-recognize-and-produce-speech-for-more-than-1000-languages/↩
  3. https://www.theguardian.com/technology/2023/may/25/artificial-intelligence-antibiotic-deadly-superbug-hospital↩
  4. https://news.adobe.com/news/news-details/2023/Adobe-Unveils-Future-of-Creative-Cloud-with-Generative-AI-as-a-Creative-Co-Pilot-in-Photoshop-default.aspx/default.aspx↩
  5. https://www.technologyreview.com/2023/05/24/1073395/ai-in-cybersecurity-yesterdays-promise-todays-reality/↩
  6. https://techcrunch.com/2023/05/23/spotify-may-use-ai-to-make-host-read-podcast-ads-that-sound-like-real-people/↩
  7. https://www.wired.com/story/chegg-embraced-ai-chatgpt-ate-its-lunch-anyway/↩
- - + + \ No newline at end of file diff --git a/blog/web-crawling/index.html b/blog/web-crawling/index.html index c7b3dc54..7906673d 100644 --- a/blog/web-crawling/index.html +++ b/blog/web-crawling/index.html @@ -9,8 +9,8 @@ - - + +
@@ -35,7 +35,7 @@ Implement strategies like rotating IP addresses or adding delays in your crawling code to handle such challenges.

Ethical Considerations​

While web crawling can be a powerful tool for data extraction, it’s important to respect website owners’ terms of service and adhere to ethical guidelines. Always ensure that your crawling activities are legal and ethical. Be mindful of any website-specific crawling policies and consider reaching out to website owners for permission when necessary.

Conclusion​

Web crawling opens up a world of possibilities for data extraction and analysis. By automating the process of gathering data from websites, you can save time and collect valuable insights. Armed with the knowledge from this beginner’s guide, you’re ready to embark on your web crawling journey. Remember to stay ethical, explore different tools, and continue learning as you dive deeper into the exciting world of web crawling.

- - + + \ No newline at end of file diff --git a/docs/about-tcetopensource/index.html b/docs/about-tcetopensource/index.html index 4194aa20..1f451e0c 100644 --- a/docs/about-tcetopensource/index.html +++ b/docs/about-tcetopensource/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

TCET Open Source

TCET Open Source is an organization where software is not just a commodity to be bought and sold, but a collaborative effort that brings people together to solve problems and build something greater than themselves. This is the community of open source, where the boundaries between creators and users blur, and the collective knowledge and creativity of the community combine to create something truly remarkable.

TCET open source is more than just a movement, it's a philosophy that values transparency, inclusivity, and the power of community, having a strength of 50+ individuals currently, across various teams.

Teams​

These are the following teams and sub teams in the organization.

  • UI/UX Design
  • Frontend Engineering
  • Backend Engineering

Projects​

Live Projects​

The organization has successfully completed and currently maintains several projects that cater to the needs of TCET students. These include:

  1. Activity Dekho
    This live website showcases past activities organized by TCET students, including committees, clubs, and social bodies. It serves as an archive of the college's vibrant extracurricular life, providing students with a glimpse into the diverse range of activities.

    Activity Dekho

  2. SORT Club website
    Its represents the SORT and Literary Club's Website which is the part of TCET Open Source.

    SORT Club website

  3. Fill My Cycle:
    This live application predicts the average subject-wise score of TCET students. By utilizing advanced algorithms, it offers valuable insights into academic performance, helping students understand their strengths and areas for improvement.

    Fill My Cycle

Ongoing Projects​

Additionally, the organization is actively working on several exciting projects to further enhance the TCET community. These projects under development include:

  1. TnP website
    TnP website
  2. TCET Linux
    TCET Linux
  3. Resume Screener
    Resume Screener*
  4. TCET Open Source Website
    TCET Open Source Website

Upcoming Projects​

Looking ahead, the organization has plans for upcoming projects that will further enhance various aspects of college life, including:

  1. ERP
  2. Canteen Management System

📢ANNOUCEMENT

So if you're looking for a way to make a difference in the organization, to contribute to something greater than yourself, and to be a part of a vibrant and passionate community, look no further than this community of open source.

- - + + \ No newline at end of file diff --git a/docs/category/projects/index.html b/docs/category/projects/index.html index 16753c33..55f4b669 100644 --- a/docs/category/projects/index.html +++ b/docs/category/projects/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Project Docs

Official Documentation of all TCET Open Source projects

- - + + \ No newline at end of file diff --git a/docs/category/resources/index.html b/docs/category/resources/index.html index 64013bee..59a6e13b 100644 --- a/docs/category/resources/index.html +++ b/docs/category/resources/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Resources

Resources created by the Organization to understand our workflow.

- - + + \ No newline at end of file diff --git a/docs/category/tcet-linux/index.html b/docs/category/tcet-linux/index.html index deeb0ac0..6321c014 100644 --- a/docs/category/tcet-linux/index.html +++ b/docs/category/tcet-linux/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

TCET Linux

TCET Linux is an open-source operating system providing basic services, and various software packages that make up the user-space applications, utilities and it is highly customized. Our goal in creating this operating system is to provide a platform that combines robust functionality with a user-friendly experience. Built from the ground up, TCET Linux boasts efficient performance, customization options, and a range of features tailored to meet the needs of both casual users and enthusiasts.

- - + + \ No newline at end of file diff --git a/docs/category/workflows/index.html b/docs/category/workflows/index.html index dcc54461..be1a4bd7 100644 --- a/docs/category/workflows/index.html +++ b/docs/category/workflows/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Workflows

Workflows are practiced within an Organization to ensure that all contributions done are as per a given set of practices to have quality code and proper communication with the maintainers. All contributions are welcome in TCET Open Source as long as the workflows are followed: from coding practices of every project to pushing changes on GitHub. Our Organization follows the below mentioned workflows whether you are a part of our Teams or contributing from outside the Organization and expect everyone to follow the same.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/about-docs/index.html b/docs/projects/docs-site/about-docs/index.html index e6987d6a..8749968f 100644 --- a/docs/projects/docs-site/about-docs/index.html +++ b/docs/projects/docs-site/about-docs/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

About Docs



The primary goal of TCET Open Source is to provide other users with access to project documentation for all of their college projects. The organization recognizes the importance of clear and concise documentation when creating open-source software, and believes that Docusaurus is a valuable tool to achieve this goal.

Through the use of the website, visitors can access useful information about the goals, methods, and benefits of the projects, as well as technical details like code snippets, images, and diagrams. This documentation will help readers understand how the projects work and their potential applications. TCET Open Source is dedicated to keeping their documentation up-to-date to ensure that visitors have access to the latest information.

By utilizing Docusaurus, TCET Open Source will be able to develop a user-friendly documentation website that is visually appealing and easy to navigate. Overall, by providing project documentation, the organization hopes to contribute to the open-source community and promote knowledge-sharing and collaboration.


If you're ready to get started with contributing to TCET Open Source, head over to our installation guide for step-by-step instructions on how to Get Started with the Docs site.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/getting-started/index.html b/docs/projects/docs-site/getting-started/index.html index a88cc20b..adfa0c6f 100644 --- a/docs/projects/docs-site/getting-started/index.html +++ b/docs/projects/docs-site/getting-started/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Getting Started

Basic Document on how to get started with the Docs Site.

Steps to run the site on your local system:​

These are the steps you need to follow to get this site on your local system.

Install Git in your computer​

Follow these steps to install git in your computer.

  1. Go to https://git-scm.com/downloads.
  2. Click on Windows. Download should start.
  3. Go to downloads and install the package.

Clone the repo​

Open Git Bash in any folder and paste the following command

git clone -b experiment https://github.com/tcet-opensource/documentation.git

Install NodeJS​

  1. Go to https://nodejs.org/en/download
  2. Select Current.
  3. Download the 64-bit .msi version. Follow the steps and install NodeJS.
note

It is important to have NodeJS in your system

Open the folder in VS Code​

  1. Install VS Code if not installed.
  2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

Install Important Packages/Dependencies​

Install Docusaurus

npm install docusaurus

Run the site live locally + making changes​

You can run the site by running the following command in VC Code terminal.

npm run start

You can make changes to your respective files and changes will be shown once you have saved the file.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/navbar/adding-items/index.html b/docs/projects/docs-site/navbar/adding-items/index.html index 1c50f966..746e432e 100644 --- a/docs/projects/docs-site/navbar/adding-items/index.html +++ b/docs/projects/docs-site/navbar/adding-items/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Items in Navbar

Adding items​

To add the labels of the Docs and Blog items in the navbar, we will need to modify the items array within the navbar object in the themeConfig object in your docusaurus.config.js file.

Here's how we made those changes:

  1. Opening the docusaurus.config.js file in our project's root directory.

  2. Locating the themeConfig object within the file. It should be defined as follows:

    docusaurus.config.js
        themeConfig: {
        // Your theme configuration goes here
        },

  3. Finding the navbar property within the themeConfig object. This property contains configuration options for the navbar.

    docusaurus.config.js
    navbar: {
        // Other navbar properties go here
        title: 'TCET Open Source',
        logo: {
            alt: 'TCET Open Source Logo',
            src: 'img/logo.png',
        },
        items: [
            {
                // Other navbar properties go here
            },
        ],
        // Other navbar properties go here
    },

  4. Locating the items property within the navbar object. This property is an array of objects that define the links in the navbar.

  5. To add the Docs label to the navbar, we need to create a new object in the items array with the following properties:

    docusaurus.config.js
    {
        type: 'doc',
        docId: 'about-tcetopensource',
        sidebarId: 'docs',
        position: 'left',
        label: 'Docs',
    },

  6. To add the Blog label to the navbar, we need to create a new object in the items array with the following properties:

    docusaurus.config.js
    {
      to: '/blog',
      label: 'Blog',
      position: 'left',
    },

  7. Saving the changes to our docusaurus.config.js file.


Now that we had added items to our navbar, the next step was to start adding links to connect our pages.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/navbar/adding-links/index.html b/docs/projects/docs-site/navbar/adding-links/index.html index 453ab069..d16253b9 100644 --- a/docs/projects/docs-site/navbar/adding-links/index.html +++ b/docs/projects/docs-site/navbar/adding-links/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Links in Navbar

Adding href to our Github repo:​

  1. Navigating to the themeConfig object in our Docusaurus configuration file.

  2. Locating the navbar object within the themeConfig object.

  3. Finding the items array within the navbar object.

  4. Locating the object within the items array that has the href property.

    docusaurus.config.js
    themeConfig: {
        navbar: {
            items: [
                {
                    href: 'https://github.com/your-organization/your-repo',
                    label: 'GitHub',
                    position: 'right',
                },
            ],
        },
    },

  5. Replacing the value of the href property with the URL of our organization's GitHub repo.

    docusaurus.config.js
    themeConfig: {
       navbar: {
           items: [
               {
                   href: 'https://github.com/tcet-opensource/documentation',
                   label: 'GitHub',
                   position: 'right',
               },
           ],
       },
    },
    info

    We added the position:'right' to our href object because we wanted the link to be displayed on the right side of the navbar.


With the links in place, we then move forward to create the search bar for our navbar.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/navbar/index.html b/docs/projects/docs-site/navbar/index.html index aeaf00e3..6b914a11 100644 --- a/docs/projects/docs-site/navbar/index.html +++ b/docs/projects/docs-site/navbar/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Navbar

A detailed overview on using Navbar in our Documentation Website.

The Navbar in our TCET Open Source is a responsive navigation bar that provides easy access to different sections of our documentation website. It is typically located at the top of the page and contains links to important pages such as the Home page, Documentation, Blog, and Search function. Navbars can also include drop-down menus to organize and categorize your content.

Features​

CharacteristicsDefinition
🛃 CustomizabilityDocusaurus provides a variety of configuration options for navbars, including the ability to customize the color scheme, logo, and menu items.
🧿 Responsive designNavbars in Docusaurus are designed to be responsive, meaning they can adapt to different screen sizes and devices. This ensures that your website is accessible and easy to use on desktops, tablets, and mobile devices.
🧩 Easy integration with MarkdownDocusaurus is built using Markdown, a lightweight markup language that is easy to learn and use. Navbars can be easily integrated into Markdown files using simple syntax.
🔍 Search functionalityNavbars in Docusaurus can include a search bar, allowing users to easily search for content on your website.
📝 Localization supportDocusaurus supports localization, allowing you to create multilingual documentation websites. Navbars can be customized for different languages and locales.



info

If you're looking for more information and detailed references on navbars in Docusaurus, we would recommend checking out the official Docusaurus documentation's API navbar page


Great, now we will be heading to learn about configuring the title and logo of the navbar in our website.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/navbar/search-bar/index.html b/docs/projects/docs-site/navbar/search-bar/index.html index 3eab9d35..24889193 100644 --- a/docs/projects/docs-site/navbar/search-bar/index.html +++ b/docs/projects/docs-site/navbar/search-bar/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Search Bar in Navbar

We are continuously working on improving our website to provide the best user experience. As part of this effort, we will be adding a search bar functionality in the near future.

This feature will make it easy for users to access the documentations and blogs on our website. Thank you for your patience and support as we strive to make our website more user-friendly and professional.

Here are the steps we plan to take to implement this functionality:

  1. Installing the @docusaurus/plugin-search-local package:

    npm install --save-dev @docusaurus/plugin-search-local

  2. Adding the plugin to our docusaurus.config.js file:

    docusaurus.config.js
    module.exports = {
        // ...
        plugins: [
            [
                '@docusaurus/plugin-search-local',
                {
                    indexDocs: true, // Whether to index docs pages
                    indexBlog: true, // Whether to index blog pages
                    indexPages: true, // Whether to index static pages
                    docsRouteBasePath: '/docs', // Base path for the docs route
                    blogRouteBasePath: '/blog', // Base path for the blog route
                    language: ['en'], // Supported languages
                },
            ],
        ],
        // ...
        };

  3. Adding the search bar to the navbar in our themeConfig file:

    docusaurus.config.js
    module.exports = {
        // ...
        themeConfig: {
            // ...
            navbar: {
                // ...
                items: [
                    // ...
                    {
                        type: 'search',
                        position: 'right',
                    },
                ],
            },
        },
        // ...
    };

  4. Building our site:

    npm run build

  5. Running our site:

    npm run start

Congratulations 🎊​

Following these steps and points, we were able to create a beautiful and interactive navbar . It's final structure looks something like this:



With this, we are pleased to announce that the navbar feature has been successfully added to the our organizations's website. You may have noticed that the navbar has a number of helpful links and features that make it simple to navigate the documentation.

We are convinced that by including search capabilities in the navbar, our users will reach the documentation and blog entries even more easily.


📢Annoucement

We're excited to share that the next page of our project documentation will include a detailed overview of the sidebars that we'll be incorporating. We believe that this will greatly enhance the user experience and make navigating our documentation even easier. Stay tuned for more updates!

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/navbar/title-and-logo/index.html b/docs/projects/docs-site/navbar/title-and-logo/index.html index 2314e40e..b4e6ff38 100644 --- a/docs/projects/docs-site/navbar/title-and-logo/index.html +++ b/docs/projects/docs-site/navbar/title-and-logo/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Title and Logo in Navbar

Using Navbars​

To change the value of the title and logo in the navbar function, we need to edit the themeConfig object in the docusaurus.config.js file of our project.

Here's a step-by-step guide on how we made those changes:

  1. Opening the docusaurus.config.js file in our project's root directory.

  2. Locating the themeConfig object within the file. It should be defined as follows:

    docusaurus.config.js
    themeConfig: {
    // Your theme configuration goes here
    },

  3. To change the title of the navbar, we located the title property within the navbar object, and updated its value to the desired title:

    docusaurus.config.js
    navbar: {
        // Other navbar properties go here
        title: 'TCET Open Source',
        // Other navbar properties go here
    },

  4. To change the logo of the navbar, we located the logo object within the navbar object, and updated its src and alt properties to the desired logo image and alt text:

    docusaurus.config.js
    navbar: {
        // Other navbar properties go here
        logo: {
            alt: 'TCET Open Source Logo',
            src: 'img/logo.png',
        },
        // Other navbar properties go here
    },
    info

    In our case we had the logo of our website at /img/logo.png

  5. Save the docusaurus.config.js file.

  6. Run yarn start or npm start to see the changes reflected in your local development environment.


With the title and logo completed, it's time we move onto adding items to our navbar.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/sidebar/adding-categories/index.html b/docs/projects/docs-site/sidebar/adding-categories/index.html index 56ee058b..54d047e4 100644 --- a/docs/projects/docs-site/sidebar/adding-categories/index.html +++ b/docs/projects/docs-site/sidebar/adding-categories/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Category in Sidebars

Adding categories in sidebars​

To add the category of the Docs and Blog items in the sidebar, we modified the sidebar.js file in the root directory of our project.

Here's how we made those changes:

  1. Opening the sidebars.js file in our projects's root directory.

  2. To add a new category, we first created an array docs, in which we created an object with the type property set to 'category', the label prperty set to the name of the 'category'.

    sidebars.js
    const sidebars = 
    {
        docs: 
        [
            {
                type: 'category',
                label: 'Category',
                // Other sidebar properties
            },
        ],
        // Other sidebar properties
    }
    module.exports = sidebars;

  3. Adding the different categories and labels in our sidebars.js file.

    sidebars.js
    const sidebars = 
    {
        docs: 
        [
            {
                type: 'category',
                label: 'Projects',
            },
        ],
        // Other sidebar properties
    }
    module.exports = sidebars;

With this we were able to add different categories in our website's sidebars.

After completing the sidebar categories of TCET Open Source website, we then shifted our focus to review and organize the items within each category.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/sidebar/adding-items/index.html b/docs/projects/docs-site/sidebar/adding-items/index.html index d30b900e..b08d3ea9 100644 --- a/docs/projects/docs-site/sidebar/adding-items/index.html +++ b/docs/projects/docs-site/sidebar/adding-items/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Items in Sidebar

Adding and organizing items in Sidebar Categories​

Previously we looked at how we added the categories and links in our sidebars. Now let's have a look at how we will be adding and organizing some items in those category.

  1. Opening the sidebars.js file in our projects's root directory.

  2. To add a new item in the category, we created an array items inside the docs array.

    sidebars.js
    const sidebars = 
    {
        docs: 
        [
            'about-tcetopensource',
            {
                type: 'category',
                label: 'Projects',
                link: 
                {
                    type: 'generated-index',
                    title: 'Project Docs',
                    description: 'Official Documentation of all TCET Open Source projects',
                    keywords: ['documentation, open-source'],
                },
                collapsed: false,
                items:  [
                    // Items to be added
                ],
                // Other sidebar properties
            },
        ],
        // Other sidebar properties
    }
    module.exports = sidebars;

  3. Now we added the required items in the category 'Projects'.

    Here's an example of how we achieved this:

    sidebars.js
    // Other sidebar properties
    type: 'category',
    label: 'Projects',
    link: 
    {
        type: 'generated-index',
        title: 'Project Docs',
        description: 'Official Documentation of all TCET Open Source projects',
        keywords: ['documentation, open-source'],
    },
    collapsed: false,
    items:  [
        'projects/docs-site/about-docs',
        'projects/tcet-linux/about-tcet-linux',
    ],
    // Other sidebar properties

Thanks to these changes, we have successfully added various items to the Sidebar of TCET Open Source website, making it more informative and user-friendly. Here's how it looks:


Important

After successfully adding different `items` to our website's sidebar, we realized that merging similar categories under one parent category would make the sidebar look more organized and effective. This way, child categories inside the parent category could be collapsed, providing a more streamlined and efficient user experience.


Next, we will explore how we added multiple sidebars to our website to further enhance the organization and accessibility of our content. This was done with the same purpose of grouping similar categories together, while keeping the navigation easy for the users.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/sidebar/adding-links/index.html b/docs/projects/docs-site/sidebar/adding-links/index.html index 8bf49bb2..d845c7de 100644 --- a/docs/projects/docs-site/sidebar/adding-links/index.html +++ b/docs/projects/docs-site/sidebar/adding-links/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Links in Sidebar

To add links to our categories in the sidebar for our project documentation, we followed these steps:

  1. Opening the sidebars.js file where our sidebar configuration is defined.

  2. Next, we headed towards the category where we wanted to add the link.

  3. Under the category label, we added a link property with an object containing the following keys:

    • type: This should be set to 'doc' if you want to link to another documentation page. If you want to link to an external URL, set this to 'link'.
    • title: This should be the title that is to be displayed on the page.
    • description: A short descrption about the project page.
    • keywords: This will be helpful in identifying key words and provide better results on Search Function.

    sidebars.js
    const sidebars = 
    {
        docs: 
        [
            {
                type: 'category',
                label: 'Projects',
                link:
                {
                    type: 'generated-index',
                    title: 'Project Docs',
                    description: 'Official Documentation of all TCET Open Source projects',
                    keywords: ['documentation, open-source'],
                },
            },
        ],
        // Other sidebar properties
    }
    module.exports = sidebars;

    We updated the keys values within the object according to our requirements.

  4. After completing the above steps, we then moved further with defining the default page for our sidebar and also to set the nature of our sidebar in terms of Collapsibility.

    sidebars.js
    const sidebars = 
    {
        docs: 
        [
            'about-tcetopensource',
            {
                type: 'category',
                label: 'Projects',
                link:
                {
                    type: 'generated-index',
                    title: 'Project Docs',
                    description: 'Official Documentation of all TCET Open Source projects',
                    keywords: ['documentation, open-source'],
                },
                collapsed: false,
            },
        ],
        // Other sidebar properties
    }
    module.exports = sidebars;

    • We inserted the default page link at the start of our 'docs' array because we wanted that whenever someone clicks on the Docs item in our Navbar, they should see the About Us page of TCET Open Source.

    • We updated the value of collapsed property to false as we dont wanted our main category to hide everytime someone redirects to the Docs section.

    collapsed: truecollapsed: false
    collapsed: truecollapsed: false

    You can clearly see the difference between the two properties when their values are updated respectively.


Now that we briefed you about how we added links in the sidebars of our TCET Open Source, the next step is to add some items to our categories in the sidebar. This will allow us to organize our documentation and make it easier for users to navigate through the different sections of our website.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/sidebar/index.html b/docs/projects/docs-site/sidebar/index.html index 40d4444e..fee469f7 100644 --- a/docs/projects/docs-site/sidebar/index.html +++ b/docs/projects/docs-site/sidebar/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Sidebar

A detailed overview of using Sidebars in our Documentation Website.

The Sidebars in our TCET Open Source website is a navigation element that appears on the left side of our website. It contains links to the different sections and pages of our documentation, making it easier for users to find the information they need.

Features​

CharacteristicsDefinition
📂 OrganizationThe sidebar helps you organize your documentation into logical sections and categories, making it easier for users to understand the structure of your content.
🔍 SearchabilityThe sidebar allows users to search for specific topics or keywords within your documentation, making it easier for them to find the information they need.
🛃 CustomizabilityThe sidebar is highly customizable, allowing you to add custom links, images, and other types of content to your site.
📲 Mobile optimizationThe sidebar is optimized for mobile devices, making it easy for users to navigate your site on smartphones and tablets.
🦾 AccessibilityThe sidebar is designed to be accessible to users with disabilities, ensuring that all users can access and use your documentation.



info

If you're looking for more information and detailed references on sidebars in Docusaurus, we would recommend checking out the official Docusaurus documentation's sidebar page


Great, now we will be heading to learn about configuring the sidebars in our website.

- - + + \ No newline at end of file diff --git a/docs/projects/docs-site/sidebar/multiple-sidebars/index.html b/docs/projects/docs-site/sidebar/multiple-sidebars/index.html index 71dd8027..220336f5 100644 --- a/docs/projects/docs-site/sidebar/multiple-sidebars/index.html +++ b/docs/projects/docs-site/sidebar/multiple-sidebars/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Multiple Sidebars

Adding multiple sidebars in our website​

Adding multiple sidebars in our website allowed us to better organize our content and improve the navigation experience for our users. We created different categories in the sidebars for different sections of our website and added them to the appropriate pages.

Here's a step-by-step guide on how the multiple sidebars were added to our TCET Open Source website.

  1. Locating the sidebars.js file in our project's root directory.

  2. We already have our sidebar ready from the previous page. See here

    sidebars.js
    // Other sidebar properties
    type: 'category',
    label: 'Projects',
    link: 
    {
        type: 'generated-index',
        title: 'Project Docs',
        description: 'Official Documentation of all TCET Open Source projects',
        keywords: ['documentation, open-source'],
    },
    collapsed: false,
    items:  [
        'projects/docs-site/about-docs',
        'projects/tcet-linux/about-tcet-linux',
    ],
    // Other sidebar properties

Adding nested categories​

  1. For creating multiple sidebars, we chose to categorize Docs Site in our Projects category such that all the children categories of the category Docs Site stays inside it.

    Here's how we added a nested category in our sidebars.js file.

    1. We needed to update the projects/docs-site/about-docs in the category of Docs Site such that whenever someone clicks on the Docs Site link, the About Docs section should be displayed.

    2. To do this we will have to add a new category labelled 'Docs Site' in the items of the predefined category Projects and we have to link this doc's default page to About Docs page as mentioned in the earlier step.

      sidebars.js
      const sidebars = 
      {
          docs: 
          [
              'about-tcetopensource',
              {
                  type: 'category',
                  label: 'Projects',
                  link: 
                  {
                      type: 'generated-index',
                      title: 'Project Docs',
                      description: 'Official Documentation of all TCET Open Source projects',
                      keywords: ['documentation, open-source'],
                  },
                  collapsed: false,
                  items:  
                  [
                      {
                          type: 'category',
                          label: 'Docs Site',
                          link:
                          {
                              type: 'doc',
                              id: 'projects/docs-site/about-docs',
                          },
                      },
                  ],
                  // Other sidebar properties
              },
          ],
          // Other sidebar properties
      }
      module.exports = sidebars;

    After following the steps mentioned above, we were able to create a nested category in our website's Sidebar.

tip

Before moving forward to the next step, make sure you have referred the basics of adding items in a sidebar category. See here

Adding nested items in nested categories​

  1. Next, we had to define different categories in items of our newly defined category Docs Site.

    sidebars.js
    const sidebars = 
    {
        docs: 
        [
            'about-tcetopensource',
            {
                type: 'category',
                label: 'Projects',
                link: 
                {
                    type: 'generated-index',
                    title: 'Project Docs',
                    description: 'Official Documentation of all TCET Open Source projects',
                    keywords: ['documentation, open-source'],
                },
                collapsed: false,
                items:  
                [
                    {
                        type: 'category',
                        label: 'Docs Site',
                        link:
                        {
                            type: 'doc',
                            id: 'projects/docs-site/about-docs',
                        },
                        items: 
                        [
                            'projects/docs-site/getting-started',
                            {
                                type: 'category',
                                label: 'Navbar',
                                link:
                                {
                                    type: 'doc',
                                    id: 'projects/docs-site/navbar/navbar',
                                },
                                items: 
                                [ 
                                    'projects/docs-site/navbar/title-and-logo',
                                    'projects/docs-site/navbar/adding-items',
                                    'projects/docs-site/navbar/adding-links',
                                    'projects/docs-site/navbar/search-bar',
                                ],
                            },
                        ],
                    },
                ],
                // Other sidebar properties
            },
        ],
        // Other sidebar properties
    }
    module.exports = sidebars;
    info

    If you look carefully at the highlighted codeblock above, you will notice that there is another category defined in the items array of the category Docs Site. This is because the parent category Navbar has various child items inside it. 

    - Getting Started
    - Navbar
        - Title and Logo
        - Items
        - Links
        - Search Bar

    If you have any doubts in adding nested categories in items, see here


  1. Similarly for defining a new nested category in our sidebar, we referred Step 3-4 for creating and adding new categories and items in our TCET Open Source website's sidebar.

Congratulations 🎊​

This marks the end of the project documentation on configuring the sidebar of TCET Open Source website using the sidebar.js file.

Here's a snapshot of how our sidebar looks after meeting all the requirements.


info

In the upcoming section, we will delve into the process of configuring the docusaurus.config.js file, which is crucial for seamlessly integrating our previously created sidebar with the navbar of our website built using Docusaurus.

Stay tuned for more updates!
- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/about-fmc-website/index.html b/docs/projects/fmc-website/about-fmc-website/index.html index ea782574..93ec1fc4 100644 --- a/docs/projects/fmc-website/about-fmc-website/index.html +++ b/docs/projects/fmc-website/about-fmc-website/index.html @@ -9,8 +9,8 @@ - - + +
@@ -32,7 +32,7 @@ As you see in tht images below:

Reset button​

This button is used to reset the website.
As you see in the image below:

Instructions​

Here are some instructions to operate the website.
As you see in the image below:


If you're ready to get started with contributing to TCET Open Source, head over to our installation guide for step-by-step instructions on how to Get Started with the Fill My Cycle site.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/button-instructions/index.html b/docs/projects/fmc-website/components/button-instructions/index.html index 806121ba..3e3460dd 100644 --- a/docs/projects/fmc-website/components/button-instructions/index.html +++ b/docs/projects/fmc-website/components/button-instructions/index.html @@ -9,8 +9,8 @@ - - + +
@@ -29,7 +29,7 @@ as per their requirement.
As you see in the image below:

Instructions​

Here we have introduced instructions to be followed while using the fill my cycle website. As you see in the image below:


The Button and Instructions section is succesfully executed! Let's move on and see how we created the Footer of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/cycle-result/index.html b/docs/projects/fmc-website/components/cycle-result/index.html index 1f636843..682b86ef 100644 --- a/docs/projects/fmc-website/components/cycle-result/index.html +++ b/docs/projects/fmc-website/components/cycle-result/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Cycle Result

Cycle-result represents the total marks scored by the student. Here the total marks of both the table is calculated in the respective column and then the average of the total marks is calculated and presented to students.

Cycle Result Table​

We have used HTML for this component.

Breakdown of the code is as follows:

Column Header​

  1. <th> : We have used <th> tag to define the column headers for the table, which are "Cycle", "TK", "TD", "LI", "B", "C", and "Total".

  2. We have used class attribute to apply CSS to the cells.

    index.html
    <thead>
            <tr>
                <th>Cycle</th>
                <th class="d">TK</th>
                <th class="d">TD</th>
                <th class="d">LI</th>
                <th class="d">B</th>
                <th class="d">C</th>
                <th class="d">Total</th>
            </tr>
    </thead>

Data Column​

  1. <tr> : We have used <tr> element to define a row in an HTML table.

  2. <th> : We have used <th> tag to define the column header ie "1 to 5" on line 2.

  3. <td> : We have used <td> tag to define the remaining cells. These rows are used as template for adding actual data to the table.

    index.html
    <tr>
        <th>1 to 5</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
tip

Similarly we have implemented next column: Total and Average column.

  1. Cycle Result Table would look like in the following manner:


After successfully implementing the Cycle Result component of the Fill my cycle website, the next step we did was to move forward with the implementation of Instructions Button component.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/defining-cycle/index.html b/docs/projects/fmc-website/components/defining-cycle/index.html index ce63618f..b7ca4ee6 100644 --- a/docs/projects/fmc-website/components/defining-cycle/index.html +++ b/docs/projects/fmc-website/components/defining-cycle/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Define Cycles

The key segment of the webpage, known as the "Defining Cycle" section, is positioned at the upper center of the webpage, just below the "Fill My Cycle" header and the "Need Help" button. It holds significant significance as it serves as the primary interface for users to input their preferred cycles and marks for individual practicals. This particular component is primarily divided into three distinct sections: the allocation of cycle numbers, the input of marks, and the calculation of the average.

Cycle Numbers​

Within this specific section of the page, users have the ability to determine the quantity of cycles for both Cycle 1 and Cycle 2. Following the entry of these values, corresponding boxes are displayed beneath each cycle, enabling the user to input marks for each practical within those cycles.

Here's the implemented code:

index.html
<div class="row">
        <div class="col-xs-6">
            <table class="mrg ind">
                <thead>
                        <tr>
                                <th colspan="2">Cycle 1</th>
                        </tr>
                            <tr>
                                <th><span id="c10">1</span>&nbsp;&nbsp;to&nbsp;</th>
                                <th><input class="form-control input-sm" type="number" min="1" max="15" step="1" value="" id="c11" maxlength="2" /></th>
                            </tr>
                            <tr>
                                <th colspan="2"><hr></th>
                            </tr>
                </thead>

Now let's understand the code given above:

  1. The first line of code <div class="row"> means we are starting a new row on the paper.

  2. Inside that row, we have another part that is divided into two equal columns. This part is represented by the code <div class="col-xs-6">.

  3. The code <table class="mrg ind"> is used to create a table and mrg ind is used to make it look nice. We have defined a header here titled "Cycle-1".

  4. The code <span id="c10">1</span>&nbsp;&nbsp;to&nbsp;</th> means that the first box should show the number 1, and then there should be some empty space and the word "to", like "1 to". The second box is for you to fill in any number you want between 1 and 15, which is given by the code <type="number" min="1" max="15" step="1" value="" maxlength="2" />.

  5. Finally, we have another small row with a line in the middle. The code <th colspan="2"><hr></th> means that we want a line to go across the whole table.

Marks entry​

This section is really important because it's where the user enters their practical marks in boxes. But here's the interesting part: only the exact number of boxes that the user asks for will be shown. This means that the interface adjusts itself to match the user's needs.

Here's the code implemented:

index.html
<tbody id="tbl01">
        <tr>
            <td>1</td>
                td><input class="form-control input-sm exp" type="number" min="0" max="100" step="1" maxlength="3"/></td>
            </tr>
             // Exactly the same code just it's created for new rows
</tbody>

  1. Inside the table body, there are several rows, each defined by the <tr> tags. Each row consists of two cells or columns. In the first cell <td>1</td>, the numbers 1, 2, 3, 4, and 5 are displayed in sequential order for each row.

  2. The second cell <td><input class="form-control input-sm exp" type="number" min="0" max="100" step="1" maxlength="3"/></td> contains an input box. This input box allows the user to enter a number between 0 and 100. The input can only be a whole number with a maximum of three digits.

    tip

    In the same way we created all the boxes for Cycle-2. Refer here

Average​

This particular section performs a straightforward task of computing the overall average of the marks entered by the user.

index.html
<td>Average</td>
    <td>
            <input class="form-control input-sm ip" type="number" min="20" max="100" step="2" id="ip1" />
    </td>
    </tr>

This code basically creates a section with a table displaying an "Average" label and an input box where the user can enter a number or users have the option to manually enter a number in the input box, or alternatively, the computer can automatically calculate the average using values provided by the user.

New Feature!​

This feature has been recently added to the website wherein the users can directly input cycle results in the form of ticks and can completely avoid the defining cycle section.

index.html
<div class="row">
    div class="col-xs-12">
        <label>
            <input type="checkbox" id="man_mode" />
                Manual Check Input Mode
        </label>
               <button class="btn btn-success btn-xs instr-ref">New Feature!</button>
        </div>
</div>

Here's the breakdown of the code:

  1. The first element is a checkbox input <input type="checkbox" id="man_mode" />. This checkbox allows the user to select or deselect it. This is linked to the script.js file, which on clicking takes the user directly the display results section.

  2. The second element is a button with a class btn btn-success btn-xs instr-ref. This button is styled with the "btn-success" class to give it a green color, and "btn-xs" class to make it smaller in size. The button is labeled as "New Feature!".

  3. On clicking New Features, it takes the user to the footer section, where the Instructions are provided.

After adding the Cycle Numbers, Marks Entry, Average and the New Feature overall defining-cycle looks like this:

Defining Cycles

The Defining Cycle is succesfully executed! Let's move on and see how we created the Displaying Cycles of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/displaying-cycle/index.html b/docs/projects/fmc-website/components/displaying-cycle/index.html index 4856ce2f..8f9f98af 100644 --- a/docs/projects/fmc-website/components/displaying-cycle/index.html +++ b/docs/projects/fmc-website/components/displaying-cycle/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Cycle Display

In Cycle Display component user will be able to see the break down of the average marks scored by them as tickmarks on various cells.
As you may see in the image:


Breakdown of the code is as follows:

Column Header​

  1. <th> : We have used <th> tag to define the column headers for the table, which are "Par\Perf", "E (5)", "VG (4)", "G (3)", "A (2)", and "BA (1)".

  2. We have used class attribute to apply CSS to the cells.

    index.html
    <thead>
        <tr>
            <th>Par\Perf</th>
            <th class="c">E (5)</th>
            <th class="c">VG (4)</th>
            <th class="c">G (3)</th>
            <th class="c">A (2)</th>
            <th class="c">BA (1)</th>
        </tr>
    </thead>

Data Column​

  1. <tr> : We have used <tr> element to define a row in an HTML table.

  2. <th> : We have used <th> tag to define the column header ie "1 to 5" on line 2.

  3. <td> : We have used <td> tag to define the remaining cells. These rows are used as template for adding actual data to the table.

    index.html
    <tr>
        <th>TK (30)</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
tip

Similarly we have implemented next column: TD (30) , LI (10) , B (10) and C (20) column.


After successfully implementing the Cycle Display component of the Fill my cycle website, the next step we did was to move forward with the implementation of Cycle Result component.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/footer/index.html b/docs/projects/fmc-website/components/footer/index.html index 3709d3a1..bb1fbbcd 100644 --- a/docs/projects/fmc-website/components/footer/index.html +++ b/docs/projects/fmc-website/components/footer/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Footer

The footer component in Fill My Cycle contains the information about the developer and maintainer of the website. Along with this, we also have our organization's logo.

Here's How we implemented the code:-

<hr class="footer-line">
   <div class="text-center">
     Designed & Developed by: Sagar Pathare (TCET 2015-2019)<br>
       Packaged and Maintained by: Gaurang Vishwakarma (TCET 2019-2023)<br>
        <img src="./assets/images/tos-logo.png" alt="TCET Open Source Logo">
</div>

Here's a breakdown explanation of the Footer component:

  1. The footer line was defined to create a different footer section on our website.

  2. The details regarding the Developer and Maintainer were intergarted in the next container.

  3. In the same container, we also centered our organization's logo.

After performing the above steps, our footer looks like this:

Footer of FMC Website

tip

Fill My Cycle Application Is Now Aslo Available On Google Play Store!! You can download it here! Click here


After successfully implementing the Footer component of the Fill My Cycle website, we are ready with ouR frontend part of the website and next we will see about how the the Mathematical Logic and functions was used to calculate the performance parameters in our website

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/header-help/index.html b/docs/projects/fmc-website/components/header-help/index.html index 3d1b67df..4dd95a3f 100644 --- a/docs/projects/fmc-website/components/header-help/index.html +++ b/docs/projects/fmc-website/components/header-help/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Header

The Header section is an informative element which is present at the top of every page of the website. It consists of Fill My Cycle Header, Dark Theme Icon and a Interactive Theme changer Logo making the overall interface of the webiste very convertible. Hence providing essential information and contributing to user-friendly experience. The "Fill My Cycle" Header, an artistic portrayal that speaks volumes, engaging the viewer in a captivating dialogue.

Fill My Cycle Header​

The header is located at the upper centre portion of the page.

To display the fill my cycle header we need to follow the following steps:

  1. Opening the index.html file.

  2. In this section our prime focus is to obtain the fill my cycle header this can be found in the index.html code. Here we created different <div> classses for classifying different parts of codes and simply used html to type the logo enclosed under <h3> tag and also used Styling to obtain the blue color.

    <div class="container">
       <div class="top-container">
          <header class="header">
              <h3 class="title">Fill My Cycle</h3>
  1. After following the above steps the header looks like this.
Header Section

Theme changer​

Making it very necessary for us as well to put theme changer to make user experience better and memorable.

Let's now understand it's code now:

  1. Firstly open index.html file.

  2. Here we have created <div> class called id button which has its value as DARK and it redirects to script.js and this button follows the image showing an icon of half moon which on clicking leads us to the dark theme.

index.html
<div id="btn-mode">
            <div><p id="mode-text">DARK</p></div>
            <div><img id="mode-icon" src="./assets/icons/moon-icon.svg" alt=""></div>
</div>

  1. Now let's open script.js.

  2. Here we have used if-else statement here, if darkMode is equal to false, it means the dark mode is currently off. In that case, the darkModeProp() function is called.

script.js
const root = document.documentElement.style;

document.addEventListener('DOMContentLoaded', function() {
    let btnMode = document.getElementById('btn-mode');
    let modetext = document.getElementById("mode-text");
    const modeicon = document.getElementById("mode-icon")
    let darkMode = false;

    btnMode.addEventListener('click', function() {
        if (darkMode == false) {
            darkModeProp();
          } else {
            lightModeProp();
          }
    } );
  1. Function darkModeProp sets the style properties to define the dark mode appearance, updates the mode text to "LIGHT", changes the mode icon to a sun, and sets darkMode to true and uses the parameters given in the code. If darkMode is not equal to false it means dark mode is currently on.
script.js
const root = document.documentElement.style;

    function darkModeProp() {
        root.setProperty("--lm-bg", "#131414");
        // It's followed by similar parameters defined to obtain Dark Theme
        modetext.innerText = "LIGHT";
        modeicon.src = "./assets/icons/sun-icon.svg";
        root.setProperty("--lm-icon-bg", "brightness(1000%)");
        darkMode = true;
        localStorage.setItem("dark-mode", true);
    }

tip

In the very same way we have also created for how to switch the user interface back to light mode, just changed the paramters values.

Help​

  1. The Need Help or the Click here to see instructions is provided just below the fill my cycle.

  2. This is a clickable button which when the user clicks takes him directly to the instructions components

  3. Now lets understand it's code by opening index.html file

  4. Overall, the code represents a row with a form that has a heading saying "Need Help?" and a button when the user clicks leads him to instructions part.

  5. The <div> class sets the styling and padding of the Need Help text , this text is followed by a clickable button.

index.html
<div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-xs-12">
            <form class="form-inline" action="" onsubmit="return false">
                <div class="row">
                    <h5 class="mrg">Need Help? <button class="btn btn-success btn-xs instr-ref">Click here to see instructions</button></h5>
                </div>

After adding the fill my cycle header, theme changer button and need help button the header will look something like this:

Header Section

The Header Section is succesfully executed! Let's move on and see how we created the Defining cycles of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/components/tech-stacks/index.html b/docs/projects/fmc-website/components/tech-stacks/index.html index 37033390..0d4a7d65 100644 --- a/docs/projects/fmc-website/components/tech-stacks/index.html +++ b/docs/projects/fmc-website/components/tech-stacks/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Tech Stacks

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. Read More

CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.
Read More

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. Read More

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/getting-started/index.html b/docs/projects/fmc-website/getting-started/index.html index 59d854be..def4bc99 100644 --- a/docs/projects/fmc-website/getting-started/index.html +++ b/docs/projects/fmc-website/getting-started/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Getting Started

info

The TCET Training and Placment page is built using JavaScript, which allows for dynamic interaction with web pages, enabling developers to create responsive and interactive user interfaces.

Steps to run the site on your local system:​

These are the steps you need to follow to get this site on your local system.

1. Install Git in your computer​

Follow these steps to install git in your computer.

  1. Go to https://git-scm.com/downloads.
  2. Click on Windows. Download should start.
  3. Go to downloads and install the package.

2. Clone the repo​

Open Git Bash in any folder and paste the following command

git clone https://github.com/tcet-opensource/fillmycycle

3. Install NodeJS​

  1. Go to https://nodejs.org/en/download
  2. Select Current.
  3. Download the 64-bit .msi version. Follow the steps and install NodeJS.
note

It is important to have NodeJS in your system

4. Open the folder in VS Code​

  1. Install VS Code if not installed.
  2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

5. Required Extensions​

  1. Inorder to run html and JavaScript files on VS code and to preview the code, we are reqiured to download some extensions.

  2. To install extensions you are required to open extensions icon present on left sidebar.

  3. Now search here Live Server and install the extension with placed right at top.

    Live Server

  4. Do the same procedure and install Code Runner(to preview JavaScript).

    Code Runner

6. To Preview​

  1. On opening the index.html file we can simply by right clicking on a HTML file from Explorer Window and clicking on Open with Live server or open a HTML file and right-click on the editor and click on Open with Live Server or can even use a shortcut alt+L.

  2. For previewing the script.js file we can easily press Run Code or ALt+Ctrl+N, but this can only we used to show outputs, but in our case we also deal with inputs from the user.

  3. So to resolve this issue we'll first open terminal and put the following command and hit enter.

    npm install prompt-sync

  4. Now we are all set to go, on running the code we'll get the preview as well the input promt in Terminal.

Following the above steps we have successfully run and examined the preview as well.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/average/index.html b/docs/projects/fmc-website/mathematical-logic/average/index.html index 189968f0..f0ec63c1 100644 --- a/docs/projects/fmc-website/mathematical-logic/average/index.html +++ b/docs/projects/fmc-website/mathematical-logic/average/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Average

The avg(tbl) function helps us find the average of numbers in a table, make sure it's not too small, adjust it to be an even number if needed, and then put the result in a specific input field. Imagine you have a special table with rows of numbers, and you want to find average of those numbers. This function will help us with that.

script.js
function avg(tbl){
    var s=0,n=tbl.children.length;
    for(var i=0;i<n;i++){
        if(tbl.children[i].lastElementChild.firstElementChild.value){
            s+= parseInt(tbl.children[i].lastElementChild.firstElementChild.value);
        }
        else{
            return false;
        }
    }
    s/=n;
    if(s<20) s=20;
    if(s%2!=0) {
        if(s%2<1){
            s=s-s%2;
        }
        else{
            s+=(2-s%2);
        }
    }
    if(tbl==$("#tbl01")[0]){
        $("#ip1").val(s);
    }
    else{
        $("#ip2").val(s);
    }
}

Now let's go through each lines of the code:

  1. We start by getting a table, which is like a special chart with rows and columns. We call this table tbl. It's the table we want to work with and perform some actions on.

  2. We create two special variables, "s" and "n". s will help us keep track of the sum of numbers, and n will keep track of how many rows there are in the table. We start with both variables set to 0.

  3. Now, we go through each row of the table one by one. We start counting from 0 and keep going until we reach the last row. For each row, we do something special.

  4. We check if the first input field in the row has a value in it. It's like looking at the box in that row and seeing if there's a number inside. If there is, we take that number and add it to our sum variable "s". But if there's nothing inside the box, we stop everything and return "false". It means there's a problem, like a missing number.

  5. After going through all the rows, we divide the sum "s" by the total number of rows "n" to find the average. It's like adding up all the numbers and then dividing the total by how many numbers there are.

  6. Next, we check if the average is less than 20. If it is, we set it to 20. It means that even if the average is really small, it should be at least 20.

  7. Now, we check if the average is an odd number. If it is, we do some special adjustments to make it an even number. If the average is slightly less than an even number (like 21.3), we subtract the remainder (in this case, 1) to make it an even number (20). But if the average is slightly more than an even number (like 22.7), we add the difference (in this case, 0.3) to make it the next even number (24).

  8. After all these calculations, we check which table we were working with. If it's a table called tbl01, we find a special input field called ip1 and put the average value there. But if it's a different table, we find a different input field called ip2 and put the average value there.


We have successfully understood the Average function! Let's move on and understand the Perform function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/calculation/index.html b/docs/projects/fmc-website/mathematical-logic/calculation/index.html index 5d69a4f9..a49336ba 100644 --- a/docs/projects/fmc-website/mathematical-logic/calculation/index.html +++ b/docs/projects/fmc-website/mathematical-logic/calculation/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Calculation

The "Calculate" function in JavaScript takes a table and an input field as parameters. It retrieves the numerical value from the input field and performs various checks and calculations. If the value meets certain conditions, it adjusts it, determines a level, distributes the difference, updates the table's cells with images, multiplies values, and returns an array.The calculate function performs various calculations and updates the table and arrays based on the input provided, and it returns an array of values (w) at the end.

script.js
function calculate(tbl,ip){
    var marks=parseFloat(ip.value);
    if(ip.value.length==2 && ip.value!="10" && marks<=20){
        ip.value=marks=20;
    }
    if(marks>100){
        ip.value=marks=100;
    }
    if(marks>=20 && marks<=100){
        if(marks%2!=0) {
            if(marks%2<1){
                marks=marks-marks%2;
            }
            else{
                marks+=(2-marks%2);
            }
            ip.value=marks;
        }
        var diff=0;
        var l=[5,5,5,5,5];
        var w=[6,6,2,2,4];
        var lvl=(marks-marks%20)/20+Math.ceil(marks%20/20);
        l[0]=l[1]=l[2]=l[3]=l[4]=lvl;
        if(marks%20!=0){
            diff=20-marks%20;
        }
        else{
            diff=0;
        }
        while(diff){
            if(diff>=6){
                l[1]--;
                diff-=6;
            }
            if(diff>=4){
                l[4]--;
                diff-=4;
            }
            if(diff>=2 && diff<=4){
                l[2]--;
                diff-=2;
            }
            if(diff>=6){
                l[0]--;
                diff-=6;
            }
            if(diff>=2){
                l[3]--;
                diff-=2;
            }
        }
        for(var i=0;i<5;i++) for(var j=1;j<6;j++)
            tbl.children[i].children[j].innerHTML="";
        for(var i=0;i<5;i++){
            tbl.children[i].children[6-l[i] ].innerHTML='<img src="./assets/images/check.png" style= "height:50px; width:60px;">';
            w[i]*=l[i];
        }
        w.push(marks);
        return w;
    }
    return false;
}

In the calculate function, the following operations are performed:

  1. The input value is parsed as a float and stored in the marks variable.

  2. There are three conditional checks:

  • The first condition checks if the input value has a length of 2, is not equal to "10", and is less than or equal to 20. If true, it sets both the input value and marks to 20.
  • The second condition checks if marks is greater than 100. If true, it sets both the input value and marks to 100.
  • The third condition checks if marks is between 20 and 100 (inclusive). If true, further calculations are performed. Inside the third condition: The nested if condition checks if marks is an odd number. If true, it adjusts marks to the nearest even number. If the fractional part of marks is less than 1, it subtracts it from marks to make it even. Otherwise, it adds (2 - fractional part) to marks to make it the next even number.

  1. The diff variable is initialized to 0.

  2. Arrays l and w are created with initial values [5, 5, 5, 5, 5] and [6, 6, 2, 2, 4] respectively.

  3. The lvl variable is calculated as (marks - marks % 20) / 20 + Math.ceil(marks % 20 / 20), which determines the level based on marks.

  4. The values in array l are updated to lvl for all elements. The diff variable is updated based on the remainder of marks divided by 20.

  5. Using a while loop, the diff value is gradually reduced by updating the values in array l based on certain conditions. A nested loop is used to clear the HTML content of specific table cells.

  6. Another loop updates the HTML content of specific table cells with an image of a checkmark, based on the values in array l. The values in array w are multiplied by the corresponding values in array l.

  7. The marks value is added to the end of array w. The array w is returned. If none of the conditions are met, the function returns false.


We have successfully understood the Calculation function! Let's move on and understand the Checker function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/checker/index.html b/docs/projects/fmc-website/mathematical-logic/checker/index.html index 0db7b2d3..14409404 100644 --- a/docs/projects/fmc-website/mathematical-logic/checker/index.html +++ b/docs/projects/fmc-website/mathematical-logic/checker/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Checker

In simple terms, the "check()" function helps us find things on a web page, move around when we type, do some calculations, and maybe show us some results later. It's like a little helper that does all these tasks for us! It retrieves table and input field elements by their IDs, and checks for specific key codes.

script.js
function check(){
    var tbl1=document.getElementById("tbl1");
    var tbl2=document.getElementById("tbl2");
    var ip1=document.getElementById("ip1");
    var ip2=document.getElementById("ip2");
    if(event.keyCode==9 || event.keyCode==16)
        return false;
    var ip = event.target || event.srcElement;
    if(ip.value){
        if(ip.value.length>=2 && ip.value!="10"){
            if(ip==ip1){
                $(ip2).focus();
            }
            else if(ip==ip2){
                $(ip).blur();
                location.replace("#result");
            }
        }
    }
    var w=[];
    if(ip1.value){
        w[0]=calculate(tbl1,ip1);
    }
    if(ip2.value){
        w[1]=calculate(tbl2,ip2);
    }
    cycle(w[0],w[1]);
    
}

Let's break it down step by step:

  1. The function starts by looking for some important things on the page. It wants to find two tables, one called "tbl1" and another called "tbl2". It also wants to find two input fields, one called "ip1" and another called "ip2". It uses special commands like "document.getElementById()" to find these things.

  2. Then, it checks if a certain key on the keyboard is pressed. The keys are like the buttons you press to type letters or numbers. The function wants to know if the key with the number 9 or the key with the number 16 is pressed. If it is, it will stop doing anything else and just go back to what it was doing before.

  3. Next, it tries to figure out which input field is being used. It does this by looking at the place where you're typing, like the input field you clicked on. It looks at the "event" happening at that moment. An event is like a little message that tells the function what is happening. It tries to find the input field you're typing in by using "event.target" or "event.srcElement".

  4. If you're typing something in the input field, the function checks how long the thing you typed is and if it's not equal to "10". If it has at least 2 characters and it's not exactly "10", something interesting happens!

  5. It checks which input field you're typing in. If it's the first one, it does something called "focusing" on the second input field. It's like telling the computer to move the cursor to the second input field, so you can start typing there. If it's the second input field, it does something else. It stops you from typing more and takes you to a different part of the web page called #result.

  6. After that, the function checks if there's anything typed in the first input field. If there is, it uses another special function called calculate() to do some calculations using the first table and the first input field.

  7. Then, it checks if there's anything typed in the second input field. If there is, it uses the same calculate() function to do some calculations using the second table and the second input field.

  8. Finally, it does something called cycle() and gives it the results of the calculations it did before. This cycle() function probably does something really important with those results, which we'll see in another section.


We have successfully understood the Checker function! Let's move on and understand the Average function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/input-handler/index.html b/docs/projects/fmc-website/mathematical-logic/input-handler/index.html index 445ec9a8..adec3cb0 100644 --- a/docs/projects/fmc-website/mathematical-logic/input-handler/index.html +++ b/docs/projects/fmc-website/mathematical-logic/input-handler/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Input Handler

This function is triggered when a key is pressed on an input field. Let's break down the JavaScript function expkeyup() in simple terms:

script.js
function expkeyup(){
    if(event.keyCode==9 || event.keyCode==16)
        return false;
    var ip = event.target || event.srcElement;
    if(ip.value){
        if(ip.value.length>=2 && ip.value!="10"){
            var next=ip.parentElement.parentElement.nextElementSibling
            if(next){
                next=next.lastElementChild.firstElementChild;
            }
            var last1=ip.parentElement.parentElement.parentElement.lastElementChild.lastElementChild.firstElementChild;
            var last2=document.getElementById("tbl02").lastElementChild.lastElementChild.firstElementChild;
            var val = parseInt(ip.value);
            if(val<0){
                ip.value=0;
            }
            else if(val>100){
                ip.value=100;
            }
            if(ip==last2){
                $(ip).blur();
                location.replace("#result");
            }
            else if(ip==last1){
                $("#tbl02 tr input:first").focus();         
            }
            else{
                $(next).focus();
            }
        }
    }
    perform();
}
  1. We start by checking if the key code of the pressed key is either 9 (Tab key) or 16 (Shift key). If it is, we stop further execution of the function and return false. It's like ignoring certain keys that we don't want to respond to.
  2. We identify the input field where the key was pressed. It's like finding the specific input field where we are typing.
  3. We check if the input field has a value. If it does, we perform some actions inside this condition.
  4. We check if the value in the input field has a length of at least 2 characters and is not equal to "10". If it meets these conditions, we proceed with further actions.
  5. We find the next input field by navigating through the HTML elements. It's like finding the next input field in a sequence.
  6. We also find the last input field in another table with the ID tbl02. These fields are located somewhere else in the HTML structure.
  7. We convert the value in the current input field to an integer and store it in a variable called val. It's like reading the number entered in the input field.
  8. We check if the value is less than 0. If it is, we set the value of the input field to 0. It's like ensuring that the value is not negative.
  9. We check if the value is greater than 100. If it is, we set the value of the input field to 100. It's like ensuring that the value is not greater than 100.
  10. We check if the current input field is the last input field in tbl02. If it is, we blur the input field (remove focus) and replace the location hash with "#result". It's like moving the focus away from the input field and updating the URL.
  11. If the current input field is not the last input field in tbl02, we check if it is the last input field in its parent row. If it is, we find the first input field in the first row of tbl02 and give it focus. It's like moving the focus to the first input field in the next row.
  12. If none of the above conditions are met, we move the focus to the next input field using jQuery's "$()" function. It's like shifting the focus to the next input field in the sequence.
  13. Finally, we call the perform() function, which is not defined in this code snippet but helps us find and define tables. So, this function helps us respond to keyup events in input fields. It performs validation on the input value, navigates to the next input field, updates the URL, and triggers the perform() function. It's like a handler that listens to keyboard input and manages the flow of focus and actions accordingly!

We have successfully understood the Input Handler function! Let's move on and understand the Table Calculator function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/page-interaction/index.html b/docs/projects/fmc-website/mathematical-logic/page-interaction/index.html index ae5bbf82..73daaab0 100644 --- a/docs/projects/fmc-website/mathematical-logic/page-interaction/index.html +++ b/docs/projects/fmc-website/mathematical-logic/page-interaction/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Page Interaction

This function sets up all the interactions and behaviors for the web page so that you can use it easily and perform different actions by clicking, typing, or changing values.

script.js
$(document).ready(function(){
    $("#c11").focus();
    $("#c11").click();
    $("#c11").trigger('click');
    $("#c11").on("keyup",function(){
        if(event.keyCode==9 || event.keyCode==16 || event.keyCode>=37 && event.keyCode<=40)
            return false;
        var ip = event.target || event.srcElement;
        var c10=parseInt($("#c10").text());
        var c11=parseInt($("#c11").val());
        if(c11>15){
            $("#c11").val(15)
        }
        if(c11>c10){
            c11change();
        }
        if(ip.value.length>=1 && ip.value!="1"){
            $("#c21").focus();
        }
    });
    $("#c11").on("change",c11change);
    $("#c21").on("keyup",function(){
        if(event.keyCode==9 || event.keyCode==16 || event.keyCode>=37 && event.keyCode<=40)
            return false;
        var ip = event.target || event.srcElement;
        var c20=parseInt($("#c20").text());
        var c21=parseInt($("#c21").val());
        if(c21>30){
            $("#c21").val(30)
        }
        if(c21>=c20){
            c21change();
        }
        if(ip.value.length>=1 && ip.value!="1" && ip.value!="2" && ip.value!="3"){
            $("#tbl01 tr input:first").focus();
        }
    });
    $("#c21").on("change",c21change);
    $("input.exp").on("keyup", expkeyup);
    $("input.exp").on("change", perform);
    $("input.ip").on("keyup", check);
    $("input.ip").on("change", check);
    $("button.reset").on("click", function(){
        $('input').val('');
        perform();
        var tbl1=document.getElementById("tbl1");
        var tbl2=document.getElementById("tbl2");
        var tbl3=document.getElementById("tbl3");
        for(var i=0;i<5;i++) for(var j=1;j<6;j++)
            tbl1.children[i].children[j].innerHTML="";
        for(var i=0;i<5;i++) for(var j=1;j<6;j++)
            tbl2.children[i].children[j].innerHTML="";

        for(var j=0;j<4;j++) for(var i=0;i<6;i++){
            tbl3.children[j].children[1+i].innerText="";
        }
        if(man_mode){
            location.replace("#man_mode_br");
        }
        else{
            location.replace("#");
            $("#c11").focus();
        }
    });
    $("#man_mode").on("click",switch_mode);
    $("#tbl1 td").click(cell_check);
    $("#tbl2 td").click(cell_check);
    $(".instr-ref").click(function(){
        location.replace("#instructions");
    });
    $(".man-mode-ref").click(function(){
        location.replace("#man_mode_br");
    });
});
tip

Similar Logic has been used in c11 and c21 updater functions.

Here's what the function does step by step.​

  1. It focuses on a specific field with an ID called "c11". It's like pointing your finger at that field so you can start typing in it.

  2. It simulates a click on the "c11" field. It's like tapping on it with your finger.

  3. It triggers a "click" event on the "c11" field. It's like pretending you clicked on it again.

  4. It listens for when you press a key on the keyboard while typing in the "c11" field. If you press certain keys like the Tab key or Shift key, it won't do anything. It's like ignoring those keys.

  5. It gets the value you typed in the "c11" field and checks if it's greater than 15. If it is, it changes the value to 15. It's like making sure the number is not too big.

  6. If the value you typed is greater than another field called "c10", it triggers a function called "c11change". It's like telling another part of the page to do something if the number is bigger.

  7. If you typed at least one character in the "c11" field that is not "1", it focuses on another field called "c21". It's like moving your attention to that field.

  8. The function continues and does similar things for the "c21" field. It listens for key presses, checks the value, triggers a function called "c21change" if necessary, and focuses on another field if certain conditions are met.

  9. It sets up listeners for when you type or change values in fields with a class called "exp". It's like keeping an ear out for any changes you make in those fields.

  10. It sets up listeners for when you type or change values in fields with a class called "ip". It's like keeping an ear out for any changes you make in those fields as well.

  11. It sets up a listener for when *you click a button with a class called "reset". When you click that button, it clears all the values in input fields and performs some actions to reset the page.

  12. It sets up a listener for when you click a button with an ID called "man_mode". When you click that button, it switches the page to a different mode.

  13. It sets up listeners for when you click on certain cells in a table with an ID called "tbl1" or "tbl2". When you click on those cells, it triggers a function called "cell_check".

  14. It sets up listeners for when you click on certain elements with classes "instr-ref" or "man-mode-ref". When you click on those elements, it changes the location of the page to show different instructions or information.


We have successfully understood the Page Interaction function! And here we also complete all the functions of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/perform/index.html b/docs/projects/fmc-website/mathematical-logic/perform/index.html index 4bf0a0c6..9c43b9ea 100644 --- a/docs/projects/fmc-website/mathematical-logic/perform/index.html +++ b/docs/projects/fmc-website/mathematical-logic/perform/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Perform

The perform() function helps us find and work with specific tables, calculate the averages of the numbers in those tables, and then move on to perform additional actions using the "check()" function. It's like a script for a show, where we do things in a specific order to make everything work smoothly!

script.js
function perform(){
    var tbl01=document.getElementById("tbl01");
    avg(tbl01);
    var tbl02=document.getElementById("tbl02");
    avg(tbl02);
    check();
}

Let's go through each step of the code:

  1. First, we find a table called tbl01. It's like a special chart with rows and columns. We use a special code called document.getElementById() to find this table.

  2. Then, we do something special with this table. We call another function called avg(tbl01). It's like telling someone to find the average of the numbers in that table. So, we're asking for the average of all the numbers in the table tbl01.

  3. We repeat the same process with another table called tbl02. We find it using the same special code .getElementById() and then call the avg(tbl02) function to find the average of the numbers in that table too.

  4. After finding the averages of both tables, we move on to the next task. We call another function called check(). It's like asking someone to perform a checklist or a set of instructions.

  5. Inside the check() function, there might be more instructions and actions happening, this function helps us find things on a web page, move around when we type, do some calculations, and maybe show us some results later.


We have successfully understood the Perform function! Let's move on and understand the Table Updater function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/scripts/index.html b/docs/projects/fmc-website/mathematical-logic/scripts/index.html index 50d719db..a37dd89e 100644 --- a/docs/projects/fmc-website/mathematical-logic/scripts/index.html +++ b/docs/projects/fmc-website/mathematical-logic/scripts/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@
- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/table-calculator/index.html b/docs/projects/fmc-website/mathematical-logic/table-calculator/index.html index 2a613593..7c1a5cf8 100644 --- a/docs/projects/fmc-website/mathematical-logic/table-calculator/index.html +++ b/docs/projects/fmc-website/mathematical-logic/table-calculator/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Table Calculator

The cal_man(tbl) function calculates and manages values based on a table's rows and columns. It multiplies and accumulates numbers based on certain conditions and returns the updated array of values. It's like performing some calculations and keeping track of the results! Let's break down the JavaScript function cal_man(tbl) in a simple way:

script.js
function cal_man(tbl){
    var w=[6,6,2,2,4,0];
    for(var i=0;i<5;i++){
        var tr=$(tbl.children[i]);
        var td=tr.children().children('img').parent();
        var col=tr.children().index(td)-1;
        if(col<0){
            return false;
        }
        w[i]*=(5-col);
        w[5]+=w[i];
    }
    return w;
}

  1. We start with an array called "w" which holds some initial values: [6, 6, 2, 2, 4, 0]. It's like having a list of numbers to work with.

  2. We go through a loop that repeats 5 times. In each iteration, we perform some actions.

  3. Inside the loop, we find a specific row in the table using the variable "tr". It's like picking a row from the table.

  4. Then, we find a specific cell in that row which contains an image. We store this cell in the variable "td". It's like selecting a cell with an image.

  5. We calculate the column index of the selected cell relative to its row. It's like finding the position of the cell within the row.

  6. If the calculated column index is less than 0 (which means it's an invalid index), we stop further execution of the function and return false. It's like checking if the column index is valid.

  7. If the column index is valid, we perform some calculations using the values in the "w" array. It's like doing some mathematical operations.

  8. We multiply the value in the "w" array at index "i" by (5 - col), where col is the calculated column index. It's like multiplying a number by another number and storing the result.

  9. We add the calculated value to the last element of the "w" array (at index 5). It's like accumulating the calculated values.

  10. After the loop is completed, we return the updated "w" array. It's like giving back the final result.


We have successfully understood the Table Calculator function! Let's move on and understand the Table Manager function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/table-manager/index.html b/docs/projects/fmc-website/mathematical-logic/table-manager/index.html index 0eff7bb5..a3f2bd7e 100644 --- a/docs/projects/fmc-website/mathematical-logic/table-manager/index.html +++ b/docs/projects/fmc-website/mathematical-logic/table-manager/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Table Manager

The check_man() function checks and manages values in two tables. It calculates some values for each table and performs an action with the calculated results. It's like checking and handling the values in a organized way! This function checks and manages values in two tables. Let's go through each step:

script.js
function check_man(){
    var tbl1=document.getElementById("tbl1");
    var tbl2=document.getElementById("tbl2");
    var w=[];
    w[0]=cal_man(tbl1);
    w[1]=cal_man(tbl2);
    cycle(w[0],w[1]);
}

  1. We start by finding a table with the ID "tbl1" and storing it in the variable "tbl1". It's like picking the first table.

  2. Then, we find another table with the ID "tbl2" and store it in the variable "tbl2". It's like picking the second table.

  3. We create an empty array called "w". It's like having a list to store values.

  4. We calculate some values for the first table using the cal_man() function and store the result in the first element of the "w" array (at index 0).

  5. Similarly, we calculate some values for the second table using the cal_man() function and store the result in the second element of the "w" array (at index 1).

  6. Finally, we call the cycle() function, passing the calculated values from the first table (w[0]) and the second table (w[1]) as arguments. It's like performing some action with those values.


We have successfully understood the Table Manager function! Let's move on and understand the Table Transformation function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/table-row-updater/index.html b/docs/projects/fmc-website/mathematical-logic/table-row-updater/index.html index aa0a51f1..23c4779a 100644 --- a/docs/projects/fmc-website/mathematical-logic/table-row-updater/index.html +++ b/docs/projects/fmc-website/mathematical-logic/table-row-updater/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Table Row Updater

The c21change() function helps us perform actions when the value of the "c21" field changes. It adjusts the number of rows in the "tbl02" table based on the desired value, updates the displayed range of rows, and triggers the perform() function. It's like a handler that responds to changes and keeps things in sync! Imagine you have a form with different fields and tables, and you want to perform certain actions when one of the fields changes. This function c21change() helps us with that.

Now let's breakdown each line of the code:

script.js
function c21change(){
    var c21=parseInt($("#c21").val());
    var tbl01=document.getElementById("tbl01");
    var tbl02=document.getElementById("tbl02");
    var tbl3=document.getElementById("tbl3");
    if(c21 || c21==0){
        var c20=parseInt($("#c20").text());
        var c21=parseInt($("#c21").val());
        if(c21<=c20){
            c21=c20;
            $("#c21").val(c21);
        }
        var tot=c21-c20+1;
        var act=tbl02.children.length;
        var diff= tot-act;
        if(diff<0){
            diff*=-1;
            while(diff--){
                tbl02.removeChild(tbl02.lastElementChild);
            }
        }
        else{
            var ct=c20+tbl02.children.length;
            while(diff--){
                $("#tbl02").append('<tr>\
                    <td>'+ct+'</td>\
                    <td><input class="form-control input-sm exp" type="number" min="0" max="100" step="1"/></td>\
                    </tr>');
                ct++;
            }
            $("input.exp").on("keyup", expkeyup);
            $("input.exp").on("change", perform);
        }

  1. We start by getting the value from a field called "c21" and converting it to a number. It's like looking at a specific spot and reading a number written there.

  2. Next, we find three special tables called "tbl01", "tbl02", and "tbl3". These tables have rows and columns, and we use a special code called document.getElementById() to find them.

  3. Now, we check if the value of "c21" exists or if it's equal to zero. If it does, we perform some actions inside this condition.

  4. We get the value from another field called "c20" and convert it to a number. This field is located somewhere else, and we read the number written there.

  5. We check if the value of "c21" is less than or equal to the value of "c20". If it is, we set the value of "c21" to be the same as "c20" and update the field with this new value.

  6. We calculate the difference between "c21" and "c20" and add 1 to it. It's like finding out how many rows we need to add or remove in the "tbl02" table.

  7. We calculate the current number of rows in the tbl02 table and store it in a variable called "act". It's like counting how many rows are currently in the table.

  8. We calculate the difference between the desired number of rows "tot" and the current number of rows "act". If the difference is negative, it means we have extra rows that we need to remove.

  9. If the difference is negative, we enter a loop and remove rows from the bottom of the "tbl02" table based on the absolute value of the difference. It's like removing objects from the table until we reach the desired number of rows.

  10. If the difference is not negative, we enter a loop and add rows to the "tbl02" table based on the difference. The number in the first column of each new row starts from "c20" plus the current number of rows in "tbl02" and increments by one for each row added.

  11. We set event listeners for input fields with the class "exp". These event listeners listen for keyup and change events and call a function called perform when triggered.

  12. We call the perform() function, which is not defined in this code snippet but function helps us find and work with specific tables, calculate the averages of the numbers in those tables.

  13. We calculate the current number of rows in the "tbl01" and "tbl02" tables and store them in variables "ct1" and "ct2" respectively.

  14. We update the text of specific cells in the "tbl3" table to display the range of rows in "tbl01" and "tbl02" tables. It's like updating the labels to show which rows belong to which table.


We have successfully understood the Table Row Updater function! Let's move on and understand the Input Handler function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/table-transformation/index.html b/docs/projects/fmc-website/mathematical-logic/table-transformation/index.html index 3ef9effa..b8528fd7 100644 --- a/docs/projects/fmc-website/mathematical-logic/table-transformation/index.html +++ b/docs/projects/fmc-website/mathematical-logic/table-transformation/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Table Transformation

The cycle(w0, w1) function performs a cycle of actions on tables. It displays values, performs calculations, and updates specific rows of a table based on the provided values. It's like going through a sequence of steps to manage and update the tables accordingly! Let's go through each step:

script.js
function cycle(w0,w1){
    var tbl1=document.getElementById("tbl1");
    var tbl2=document.getElementById("tbl2");
    var tbl3=document.getElementById("tbl3");
    var w=[];
    w[0]=w0,w[1]=w1;
    w[2]=[],w[3]=[];
    if(w[0]){
        for(var i=0;i<6;i++){
            tbl3.children[0].children[1+i].innerText=w[0][i];
        }
    }
    else{
        if(!man_mode){
            for(var i=0;i<5;i++) for(var j=1;j<6;j++)
                tbl1.children[i].children[j].innerHTML="";
        }
        for(var i=0;i<6;i++){
            tbl3.children[0].children[1+i].innerText="";
        }
    }
    if(w[1]){
        for(var i=0;i<6;i++){
            tbl3.children[1].children[1+i].innerText=w[1][i];
        }
    }
    else{
        if(!man_mode){
            for(var i=0;i<5;i++) for(var j=1;j<6;j++)
                tbl2.children[i].children[j].innerHTML="";
        }
        for(var i=0;i<6;i++){
            tbl3.children[1].children[1+i].innerText="";
        }
    }
    if(w[0] && w[1]){
        for(var i=0;i<6;i++){
            w[2][i]=w[0][i]+w[1][i];
            w[3][i]=w[2][i]/2;
            tbl3.children[2].children[1+i].innerText=w[2][i];
            tbl3.children[3].children[1+i].innerText=w[3][i];
        }
    }
    else{
        for(var i=0;i<6;i++){
            tbl3.children[2].children[1+i].innerText="";
            tbl3.children[3].children[1+i].innerText="";
        }
    }
}

  1. We start by finding three tables: "tbl1", "tbl2", and "tbl3". It's like picking specific tables.

  2. We create an array called "w" to store values: [w0, w1, [], []]. It's like having different containers for different things.

  3. If the first element of "w" (w[0]) exists, we update the first row of "tbl3" with the values from w[0]. It's like displaying some values in the first row of a table.

  4. If w[0] doesn't exist, we clear the cells in "tbl1" (except the first column) or leave them empty. It's like erasing or leaving empty cells in a table.

  5. Regardless of w[0]'s existence, we clear the first row of "tbl3" or leave it empty. It's like erasing or leaving empty cells in the first row of a table.

  6. If the second element of "w" (w[1]) exists, we update the second row of "tbl3" with the values from w[1]. It's like displaying some values in the second row of a table.

  7. If w[1] doesn't exist, we clear the cells in "tbl2" (except the first column) or leave them empty. It's like erasing or leaving empty cells in a table.

  8. Regardless of w[1]'s existence, we clear the second row of "tbl3" or leave it empty. It's like erasing or leaving empty cells in the second row of a table.

  9. If both w[0] and w[1] exist, we perform calculations by adding the corresponding values from w[0] and w[1] and store them in w[2]. We also calculate the average by dividing the values in w[2] by 2 and store them in w[3].

  10. We update the third row of "tbl3" with the values from w[2] and the fourth row of "tbl3" with the values from w[3]. It's like displaying calculated values in specific rows of a table.

  11. If either w[0] or w[1] doesn't exist, we clear the cells in the third and fourth rows of "tbl3" or leave them empty. It's like erasing or leaving empty cells in specific rows of a table.


_We have successfully understood the [**Table Transformatio**](table-transformation) function! Let's move on and understand the [**Page Interaction**](page-interaction) function of the **[Fill My Cycle](https://fillmycycle.tcetmumbai.in/)**._
- - + + \ No newline at end of file diff --git a/docs/projects/fmc-website/mathematical-logic/table-updater/index.html b/docs/projects/fmc-website/mathematical-logic/table-updater/index.html index 1cd3e473..03090638 100644 --- a/docs/projects/fmc-website/mathematical-logic/table-updater/index.html +++ b/docs/projects/fmc-website/mathematical-logic/table-updater/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Table Updater

Consider a scenario where you have a form with different fields and tables, and you want to perform certain actions when one of the fields changes. This function "c11change()" helps us with that. Let's go through each step:

script.js
function c11change(){
    var c10=parseInt($("#c10").text());
    var c11=parseInt($("#c11").val());
    var tbl01=document.getElementById("tbl01");
    var tbl02=document.getElementById("tbl02");
    var tbl3=document.getElementById("tbl3");
    if(c11 || c11==0){
        if(c11<=c10){
            c11=c10;
            $("#c11").val(c11);
        }
        var ct = tbl01.children.length;
        var pc20 = parseInt($("#c20").text());
        var pc21 = parseInt($("#c21").val());
        if($("#c21").val()==""){
            pc21=pc20+$("#tbl02").children().length-1;
        }
        var c20 = c11+1;
        $("#c20").text(c20);
        if(c11<ct){
            var diff=ct-c11;
            while(diff--){
                $("#tbl02 tr:first").before(tbl01.lastElementChild);
            }
        }
        else if(c11>=ct){
            if(c11>=pc21){
                var t=pc21-ct;
                while(t--){
                    $("#tbl01").append(tbl02.firstElementChild);
                }
                $("#tbl02").append('<tr>\
                    <td>'+c20+'</td>\
                    <td><input class="form-control input-sm exp" type="number" min="0" max="100" step="1"/></td>\
                    </tr>');
                var diff=c11-pc21;
                var c=pc21+1;
                while(diff--){
                    $("#tbl01").append('<tr>\
                        <td>'+c+'</td>\
                        <td><input class="form-control input-sm exp" type="number" min="0" max="100" step="1"/></td>\
                        </tr>');
                    c++;
                }
            }
            else{
                var diff=c11-ct;
                while(diff--){
                    $("#tbl01").append(tbl02.firstElementChild);
                }
            }
            $("input.exp").on("keyup", expkeyup);
            $("input.exp").on("change", perform);
        }

        perform();
    }
    var ct1 = tbl01.children.length;
    var ct2 = tbl02.children.length;
    tbl3.children[0].children[0].innerText="1 to "+ct1;
    tbl3.children[1].children[0].innerText=(ct1+1)+" to "+(ct1+ct2);
}

  1. We start by getting the value from a special field called "c10" and converting it to a number. It's like looking at a specific spot and reading a number written there.

  2. Next, we get the value from another field called "c11" and convert it to a number as well.

  3. Then, we find three special tables called tbl01, tbl02, and tbl3. These tables have rows and columns, and we use a special code called document.getElementById() to find them.

  4. Now, we check if the value of "c11" exists or if it's equal to zero. If it does, we perform some actions inside this condition.

  5. First, we check if the value of "c11" is less than or equal to the value of "c10". If it is, we set the value of "c11" to be the same as "c10" and update the field with this new value.

  6. We calculate the number of rows in the tbl01 table and store it in a variable called "ct". It's like counting how many rows are there in the table.

  7. We also get the value from a field called c20 and convert it to a number. This field is located somewhere else, and we read the number written there.

  8. We check if the value of another field called c21 is empty. If it is, we calculate its value by adding the value of pc20 (which is another number we obtained from a different spot) with the number of rows in the "tbl02" table minus 1.

  9. We set the value of "c20" to be one more than the value of "c11". It's like incrementing the number by one and updating the field with this new value.

  10. We check if c11 is less than the number of rows in tbl01. If it is, we perform a series of actions inside this condition.

  11. We calculate the difference between the number of rows in tbl01 and c11. It's like finding out how many rows we need to add or remove.

  12. We move rows from the top of the tbl02 table to the bottom of the tbl01 table based on the calculated difference. It's like moving objects from one place to another.

  13. If c11 is not less than the number of rows in tbl01, we perform a different set of actions inside this condition.

  14. We check if c11 is greater than or equal to a number called pc21. If it is, we perform a series of actions inside this condition.

  15. We calculate the difference between c11 and the number of rows in tbl01. It's like finding out how many rows we need to add.

  16. We add rows to the tbl01 table based on the calculated difference. The number in the first column of each new row starts from c20 and increments by one for each row added.

  17. We also add a new row to the tbl02 table. It contains two columns: one with the value of c20 and another with an input field. It's like adding a new row to the table and filling it with values


We have successfully understood the Table Updater function! Let's move on and understand the Table Row Updater function of the Fill My Cycle.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/about-resume-screener-website/index.html b/docs/projects/resume-screener-website/about-resume-screener-website/index.html index 8dd01da1..dd6e5d96 100644 --- a/docs/projects/resume-screener-website/about-resume-screener-website/index.html +++ b/docs/projects/resume-screener-website/about-resume-screener-website/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

About Resume Screener Website

This is the official documentation of Resume Screener Website of TCET Mumbai, maintained by the TCET Open Source Documentation team.

We created The Resume Screener Website as it serves a valuable purpose to the tnp department as well as students by streamlining and optimizing the initial screening of resumes for job openings and for other interview purposes. Here are some key needs that a resume screener website addresses:

1. Time Efficiency
2. Standardization
3. Filtering irrelevant resumes
4. Keyword matching
5. Improved candidate experience
6. Streamlined collaboration

Overall, a resume screener website addresses the need for a more efficient, standardized, and unbiased approach to screening resumes, ultimately helping employers identify the most qualified candidates for further consideration and aiding the students to design a well established and applicable resume.

Approach​

Here is the set of approach we kept in mind while designing our website:

1. Header & Navbar​

  • The ease of use and significance of the header and navbar cannot be overstated when it comes to enhancing the user experience (UX).
  • We designed the header and navbar with complete responsiveness to make it look tidy and extremely easy to use.

2. Hero​

  • This section is designed to capture attention, convey the website's prime message, and create a notable first impression.
  • Here we have have presented a glimpse of the resume test result that you will be getting.

3. About us​

  • It is a short and accurate description of our TCET Resume screening.
  • With that, we have also made a provision where you can evaluate your resume with a test.

4. Guidelines and ATS resume template​

  • In this segment  students are familiarised with different guidelines regarding resume and ways to improve it.
  • Also we have added a downloadable resume template that can help students standardise their resume.

5. ATS Resume Scan and Features​

  • The need for a resume scan is to get an accurate report on the quality and quantity of the resumes.
  • We made a feature section in the website so that the user can get acquainted with all the tools and the ins and outs of how to use the resume creator in the most effective way possible.
  • The most important component of a website after a header is the footer, as it is very useful in navigating the website and accessing other important links.
  • It is utilised for displaying certain legal information, like copyright details.
  • It is also used for listing contact information and linking to different social media handles.


If you're ready to get started with contributing to TCET Open Source, head over to our installation guide for step-by-step instructions on how to Get Started with the Resume Screener website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/about-us/index.html b/docs/projects/resume-screener-website/frontend-components/about-us/index.html index afb5d07d..282653d4 100644 --- a/docs/projects/resume-screener-website/frontend-components/about-us/index.html +++ b/docs/projects/resume-screener-website/frontend-components/about-us/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

About Us

The About Us page of the website will help you discover our story, mission, and values as an organization. It can be accessed through the navigation bar of the Resume Screener Website.

Here are the steps on how we integrated the Option to take the resume test in About Us Component

Adding About Us​

  1. Opening aboutUs.astro file in our projects root directory.

  2. We then created a section element section that would represent the content section. Under this we assigned CSS classes to introduce the required details.

    aboutUs.astro
    <section class="w-full bg-[#0C1030] box-border flex justify-between gap-6 lg:gap-12  flex-col lg:flex-row p-4 lg:p-16 ">

  3. We created a div element div to hold an image on the left side of the section. Inside the div, we added an image element img that displays the aboutUsImg image.

    aboutUs.astro
    <div class=" w-full flex align-center lg:w-1/2 ">
        <img src = {aboutUsImg} alt="about-us" class="w-full"/>
    </div>

On implementation, the image section would look like this:


  1. Then we created another div element div to hold text and a button on the right side of the section. Inside this div, we added a span element span to display the title "About Us". Similarly we added another span element to display a paragraph describing the purpose of the resume scanner.

    aboutUs.astro
    // About image section
    <div class=" w-full flex flex-col items-start   gap-2 lg:gap-6 lg:w-1/2 xl:w-1/2">
        <span class=" text-4xl md:text-5xl font-semibold leading-14 text-[#FCFCFD] ">About Us</span>
        <span class="md:text-lg font-normal leading-7 text-[#D0D5DD]">
            Our free resume scanner ensures that your resume is ATS compliant and will be read correctly by Applicant Tracking Systems (ATS) and resume screening software. It provides detailed feedback on key criteria important to recruiters and hiring managers. Maximize your chances of getting noticed by using our resume scanner today. Don't let your resume be overlooked - get valuable insights and make a strong impression with our ATS compliance evaluation.
        </span>

Adding Resume test button​

  1. We added a button element button to provide a call-to-action.

  2. Inside the button, we added an image element img to display the arrow icon.

    aboutUs.astro
        <button class=" flex flex-row align-start px-4 py-2.5 gap-1.5 bg-[#6938EF] hover:bg-[#3708b7] transition-colors text-[#FFFFFF] rounded">Start Resume Test
                <img src={arrow} class="p-1"></img>
        </button>

On executing the above steps, the buttom looks like this:



info

You can refer the aboutUse.astro file for Resume Screener here! Click here to see the source code

Once we exceuted this steps, the about us section looked like this:



The About Us Section is succesfully executed! Let's move on and see how we created the Guidelines Component of the Resume Screener Website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/ats-resume-template/index.html b/docs/projects/resume-screener-website/frontend-components/ats-resume-template/index.html index 8b2f61e6..7c21abd6 100644 --- a/docs/projects/resume-screener-website/frontend-components/ats-resume-template/index.html +++ b/docs/projects/resume-screener-website/frontend-components/ats-resume-template/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

ATS Resume Template

The ATS Resume Template section is used as the main component in the Fourth section of the TCET Resume Screener website. The Ats_Resume component represents an ATS (Applicant Tracking System) Resume Template webpage Section. The Ats Resume Template component serves as the main entry point for the ATS Resume webpage. It defines the overall structure and layout of the resume including the arrangement of various sections, text content, images, and interactive elements in users resume. It giudes users how to feed resume while checking and give tips to users about resume template so accurate output of the test can be obtained.

Here's a breakdown of the code to understand it's functionality:

para Component​

In this section we have defined an array variable para that stores guidelines or tips for creating an ATS-friendly resume. Each guideline is a string element in the array.

index.astro
      const para = [
          `You want to make sure you stick to text and a standard font with minimal use of special characters. Notice the clean single-column design and how fancy formatting like tables, diagrams and graphs have been stripped out. ATS resume scanners either ignore these or read them incorrectly.`,
          // Similarly multiple paragraphs can be created
          ]
      // HTML markup

HTML Markup​

This section represents the HTML-like structure of the ATS Resume component. It consists of the <section> element. A section container with various classes for styling. It contains two child <div> elements.

First div​

First <div>: This div contains the main content of the resume template.

  1. <h1>: The title of the resume template is displayed using the h1 HTML tag. The title text is "ATS Resume Template".

  2. Nested<div>: This div is displayed on smaller screens (hidden on larger screens) and contains an image of the resume template and a download button. The image is specified using the img tag with the src attribute pointing to "/Ats_resume/Frame.svg". The download button is represented by the button tag. The button text is "Download the Template".

  3. Guidelines and SVG icons: The component iterates over the para array and displays each guideline as a paragraph. Each guideline is wrapped in a div. Additionally, there are SVG icons displayed alongside.

  4. "Get an ATS Resume Test" link: The component provides a link that redirects users to a page to test their resume against an ATS scanner. The link text is "Get an ATS Resume Test".

Second div​

Second <div>: This div is hidden on smaller screens (displayed on larger screens) and contains a duplicate image of the resume template and the download button.

index.astro
// para Component
    <section class="lg:flex mx-auto justify-between lg:gap-24 lg:mx-0 bg-[#0C1030] p-4 lg:p-16">
      <div class="text-white flex flex-col lg:w-2/3 mt-0 lg:mt-2">
        <h1 class="font-rubik text-5xl pb-12">ATS Resume Template</h1>
        <div class="lg:order-first lg:hidden lg:w-1/3">
          <img src="/Ats_resume/Frame.svg" width="410" height="546" class="mx-auto w-full" alt="" />
          <button class="w-fit py-2 px-2 rounded bg-[#1D2939] hover:bg-[#1b222a] text-white mt-5" id="btn">
            Download the Template
          </button>
        </div>
        <div class="flex flex-col mt-4">
          <p class="pb-8 text-sm sm:text-base md:text-lg">
            Here are the guidelines we outlined above in practice.
          </p>
          {para.map((el) => (
          <div class="flex flex-row mx-auto ml-10">
            <div class="absolute mt-1 mx-auto -ml-7">
              <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.25 0.5H7.75L12.75 7.5L7.75 14.5H12.25L17.25 7.5L12.25 0.5Z" fill="#444CE7" />
                <path d="M5.25 0.5H0.75L5.75 7.5L0.75 14.5H5.25L10.25 7.5L5.25 0.5Z" fill="#444CE7" />
              </svg>
            </div>
            <p class="pb-8 mr-0 md:mr-10 text-sm md:text-base">{el}</p>
          </div>
          ))}
          <a href="" class="bg-[#6938EF] hover:bg-[#46327c] w-fit mt-5 rounded py-3 px-2 text-center text-white mb-2">
            Get an ATS Resume Test</a>
        </div>
      </div>
      <div class="p-2 lg:order-first hidden lg:block lg:w-1/3">
        <img src="/Ats_resume/Frame.svg" width="410" height="546" class="mx-auto w-full" alt="" />
        <button class="w-fit py-2 px-2 rounded bg-[#1D2939] hover:bg-[#1b222a] text-white mt-5" id="btn">
          Download the Template
        </button>
      </div>
    </section>
// function Component

Function Component​

This section includes a JavaScript code snippet that handles the button click event. It consists of the following:

handleClick1​

handleClick1() function logs the message "Downloaded" to the console. It is executed when the button with the id "btn" is clicked.

DOMContentLoaded​

DOMContentLoaded is a event listener. The code waits for the DOM to be fully loaded before executing. It gets the button element using document.getElementById("btn") and attaches a click event listener to it. When the button is clicked, it calls the handleClick1() function.

index.astro
  // HTML markup
  <script>
          // Handle button click event
          function handleClick1() {
            console.log("Downloaded");
          }
          // Wait for the DOM to be loaded
          document.addEventListener("DOMContentLoaded", function() {
            // Get the button element
            const button = document.getElementById("btn");
            // Attach a click event listener to the button
            button && button.addEventListener("click", handleClick1);
          });
  </script>

Output Image​


TCET Linux- ATS Resume Template

tip

You can visit

  1. ATS Resume Template Section of the TCET Resume Screener website
  2. index.astro

The ATS Resume Template Section of Home Page was succesfully executed! Let's move on and see how we created the Resume Test Section component of the TCET Resume Screener Website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan/index.html b/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan/index.html index 1d622468..b7f9e8d1 100644 --- a/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan/index.html +++ b/docs/projects/resume-screener-website/frontend-components/ats-resume-test-scan/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

ATS Resume Test/Scan

The ATS Resume Test/Scan section provides a free ATS resume scan. It was built with all applicant tracking systems in mind and acts as a powerful ATS resume test.

The section can be broken down into the following divisions:

Header and Tip​

We followed these steps to make the same:

  1. Creating a <div> element with two child <p> elements inside it.

  2. The first <p> element displays the heading, and the second <p> element provides a tip.

    index.astro
        <div class="p-0 md:w-[50%]">
            <p class="text-[#FCFCFD] text-3xl font-rubik">
                Find out if your resume passes ATS resume test
            </p>
            <p class="text-[#D0D5DD] py-4">
                Tip: Score My Resume was bult with all applicant racking
                systems in mind and acts as a powerful ATS resume test, ts
                scanned correctly by our platform, you can be confident it
                wil also be processed correctly by all ATS.
            </p>

The header and tip look like this:

 

info

We used CSS classes to style the elements, setting properties such as color, font size, padding, and font family.

Resume scan button and image​

We followed these steps:

  1. We made a <button> element with a class assigned to it. The class contains multiple CSS properties for styling.

  2. The content was added inside the <button> element: "Get Your Free ATS Resume Scan". This is the text displayed within the button. 

    ```jsx title="index.astro" {2,3} showLineNumbers
        <button
            class="bg-[#6938ef] hover:bg-[#6533ed] text-white py-2 px-5 md:py-3 md:px-8 rounded-lg mt-4">
                Get Your Free ATS Resume Scan
        </button>
    ```

    The resume scan button looks like this:

 

  1. We imported a specific file named "Group 1.svg" and assigned it to a variable called Group1

    index.astro
    import Group1 from "/ATSResumeTest/Group 1.svg";

  2. The image is positioned absolutely and styled with CSS classes to set its width, maintain its aspect ratio, and position it relative to its parent container.

    index.astro
        <img
            src={Group1}
            class="absolute w-[50%] h-auto right-[-6rem] bottom-[-12rem]"
        />

After combining all of the divisions, the Resume Test/Scan section can be seen like this:

 

The ATS Resume Test/Scan section is succesfully executed! Let's move on and see how we created the Features and Cards Section of the Resume Screener Website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/card/index.html b/docs/projects/resume-screener-website/frontend-components/card/index.html index be6168b9..f858a7e5 100644 --- a/docs/projects/resume-screener-website/frontend-components/card/index.html +++ b/docs/projects/resume-screener-website/frontend-components/card/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

Features & Cards

The Features section on our website showcases a variety of features provided by TCET Resume Screener. It highligts the need for specific functionalities and to enhance the user experience of students as well as the recruiters by providing the user with key features of our website .

Card Data​

Below are the steps for implementation:

  1. Import Group2 from "/ATSResumeTest/Group 2.svg" & import Group3 from "/ATSResumeTest/Group 3.svg"

  2. We declared a contant variable called card and assign it a value in the form of array.

  3. Then we define a key value pair inside the object where the key is cardImg , and the the value, i.e.,the image file associated with the card is named Cloud.svg .

  4. Now we have defined another key-value pair for the card's title . Here, the key is cardTitle, and the value is the title itself. Then we have added a short description using another key-value pair.

    index.astro
    ---
        import Group2 from "/ATSResumeTest/Group 2.svg";
        import Group3 from "/ATSResumeTest/Group 3.svg";

        const card = [
        {
            "cardImg": "Cloud.svg",
            "cardAlt": "Cloud Icon - Representing Unlimited ATS Resume Scans",
            "cardTitle": "Unlimited ATS resume scans",
            "cardText": "You get several free uploads to our resume scanner. If you have different versions of your resumes (and you should, especially if you are applying to different industries!), you can test"
        },
        {
            !--- Other card data added ---> 
        }
        ]

tip

Similar steps were carried out to add multiple card data in key-value format .

Cards Construction​

index.astro
    <div class="py-14 flex flex-col sm:flex-row flex-wrap items-stretch gap-8 sm:gap-10 md:gap-14 lg:gap-16">
        { card.map(item => (
                <div class="realtive z-10 px-5 pt-7 pb-4 bg-[#24294D] flex-1 sm:basis-1/3 lg:basis-1/4 flex flex-col rounded-2xl gap-3">
                    <img 
                        src={`/CardSection/${item.cardImg}`} alt={item.cardAlt}
                        class="px-2 pb-3 w-max h-16 sm:h-20 md:h-24 object-cover object-center select-none "
                    />

                    <h1 class="font-rubik text-white font-bold text-2xl sm:text-3xl">{item.cardTitle}</h1>
                    <p class="block font-sans font-normal mt-auto text-gray-300 text-sm sm:text-base">{item.cardText}</p>
                </div>
            )) }
    </div>

Below are the steps for implementation:

  1. In the code, we firstly opened a <div> element . Then on Line No. 2 we used array map() method to iterate over the card array which passes each item from the array to the provided function as item.

  2. Further moving on , you can change the image by changing the source of the image in src attribute in <img> tag. Here the alt attribute is set to the cardAlt value from the item object.

  3. Then we had styled and named the card tiltle using <h1> tag and for the card description we used the <p> tag.

After completing the above steps, we successfully incorporated the Cards section. You can see the snapshot below:

Section description and button component :​

index.astro
       <div class="relative z-10">
        <div class="p-0 md:w-[60%] text-[#FCFCFD]">
            <p class="text-3xl font-rubik">Features of Resume Screener</p>
            <p class="text-justify py-4">
                We  created <b>The Resume Screener Website</b> as it serves a valuable purpose to the tnp department as well as students by <b>streamlining</b> and <b>optimizing</b> the initial screening of resumes for job openings and for other interview purposes. Here are some key features of resume screener:
<p><b>
    1. Unlimited ATS resume scans<br />
    2. Effective Resume Scanner <br />
    3. Free Resume Scanner <br />
    4. Keyword matching <br />
    5. Improved user experience <br />
 </b></p>   
            </p>
            <button
                class="bg-[#6938ef] hover:bg-[#6533ed] text-white py-2 px-5 md:py-3 md:px-8 rounded-lg mt-4"
            >
                Resume Screener Tool
            </button>
        </div>
    </div>

  1. At first, we can change the section description by changing the information in <p> tag.

  2. Further, we have used a <button>tag to add a button which links to the Resume Screener Tool.


After successfully implementing the Features & Cards component of the Resume Screener website, we were ready with our features component of the website. Next, we will be seeing the Footer component of the Resume Screener website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/footer/index.html b/docs/projects/resume-screener-website/frontend-components/footer/index.html index 29a5141b..d5aceef0 100644 --- a/docs/projects/resume-screener-website/frontend-components/footer/index.html +++ b/docs/projects/resume-screener-website/frontend-components/footer/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Footer

The footer component is a section of a web page that is placed at the bottom and is separate from the main content area. It serves as a container for information that is relevant to the entire page. In the footer component of Resume Screener, we have included navigation links,team,contact, copyright, email and social media links.

The code for this section is represented by the HTML language which creates a navigation menu.

index.astro
    {/*Nav as */}
      <div class="flex items-center gap-2 rounded-full border-2 border-white border-opacity-25" style= "background-image: linear-gradient(218.92deg, rgba(255, 255, 255, 0.25) 30.2%, rgba(255, 255, 255, 0) 105.59%);
      backdrop-filter: blur(4px);">
        <img src="/Footer/logo.png" alt="" class="h-[48px] p-1" />
        <h2 class="text-white font-{400} text-base pr-2.5 pl-1">Resume screener</h2>
      </div>

Here's a breakdown explanation of the navigation component:

  1. We used div element in the code for styling , layout & alignment of the navigation links.

  2. We can change the image of tcet logo and the text beside logo inn the button as shown in the image below.

index.astro
  {/*Nav as */}
    <div class="flex flex-col sm:flex-row  h-full gap-3 text-[#D0D5DD]  items-center">
      <a class="hover:underline font-thin  text-sm  " href="https://opensource.tcetmumbai.in/docs/category/projects" target="_blank">Docs</a>
      <a class="hover:underline font-thin  text-sm  " href="https://opensource.tcetmumbai.in/blog" target="_blank">Blogs</a>
      <a class="hover:underline font-thin  text-sm  " href="/LiveProjects">Live Projects</a>
      <a class="hover:underline font-thin  text-sm  " href="/CookingProjects">Cooking Projects</a>
      <a class="hover:underline font-thin  text-sm  " href="/CookingProjects">Team</a>
      <a class="hover:underline font-thin  text-sm  " href="mailto:opensource@tcetmumbai.in">Contact</a>
    </div>

  1. In the incoming code , we used <a> anchor elements which represent the navigation links.You can observe that each link is wrapped inside an <a> element where a hover effect is applied to them.

  2. Here, the href attribute specifies the destination URL for each link.

  3. The overall section of the code generates a navigation menu with several links which is used to navigate different pages of the website.

Social media & Copyrights Component​

The code for this section is represented by the HTML language which displays copyright details and social media handles.

Here's the implemented code for copyright and email:

index.astro
  {/* CopyRight and Email */}
       <div class=" w-full  flex flex-col-reverse sm:flex-row   sm:justify-between items-center sm:gap-0 gap-4">
   <div class="  text-xs  text-[#D0D5DD] ">Copyright 2022-2023 @ TCET Opensource.</div>
   <a class="  text-xs  text-[#D0D5DD]" href="mailto:linux@tcetmumbai.in">opensource@tcetmumbai.in</a>

  1. Here we mentioned the div elements with multiple CSS classes. Majorly for styling purposes and to set the font for the content inside it.

  2. The below section of the code is to display the copyright content.

  1. Next we added the clickable link to TCET email (tcet.tnp@thakureducation.org).

index.astro
  {/* Social Media */}
    <div class="flex text-[#D0D5DD] gap-8">
      <a href="https://www.linkedin.com/company/tcet-opensource/" target="_blank"><img src="/Footer/linkdin.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://www.youtube.com/@TCETMumbaiOfficial" target="_blank"> <img src="/Footer/Youtube.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://twitter.com/tcetopensource" target="_blank"> <img src="/Footer/Twitter.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://www.instagram.com/tcetopensource/" target="_blank"><img src="/Footer/Instagram.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://github.com/tcet-opensource/" target="_blank"><img src="/Footer/Github.png" alt="" class="h-5 cursor-pointer" /></a>
    </div>
  1. The code in <a> elements which represents different social media links. Here we applied, href attribute is set to the respective social media links.

tip

Similar steps were carried out for adding TCET email, Linkedin ,Youtube , Twitter, Instagram & Github in this section.

After we have followed all the steps, our Resume Screener website footer looks like this:

After successfully implementing the Footer component of the Resume Screener website, we were ready with out frontend part of the website. Next, we will be seeing how we integrated the backend of the Resume Screener website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/guideline/index.html b/docs/projects/resume-screener-website/frontend-components/guideline/index.html index 0b1d434d..aab30a3c 100644 --- a/docs/projects/resume-screener-website/frontend-components/guideline/index.html +++ b/docs/projects/resume-screener-website/frontend-components/guideline/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Guidelines

The Guidelines section provides some guidelines that a user can follow to ensure that their resume gets correctly scanned by all applicant tracking systems.

The section can be broken down into the following divisions:

Guidelines accordion​

We followed these steps to make the same:

  1. We used TypeScript declaration to initialize a constant variable named accordions with a value of an array of objects. Each object in the array represents a guideline and has two properties: title and data.

  2. The Guidelines[] type suggests that accordions is an array containing objects that adhere to the structure defined by the Guidelines type.

    guidelines.tsx
    const accordions: Guidelines[] =[
        {
          title:"Avoid using tables",
          data : "Label your work experience and education sections with conventional section titles"
        },
        {
        <!--Other guidelines' title and data-->
        },
      ];
tip

Similar steps were carried out to add title and data of other guidelines.

  1. We used a JavaScript expression to map over the accordions array. For each object in the array, it returned a JSX element representing an accordion item.

    accordion.jsx
    {
                  accordions.map(({ title, data, open }) => (

  2. The open attribute is set based on the open property of the current item in the accordions array.

  3. The class attribute defines the CSS classes for styling the accordion item, and the style attribute sets inline styles for the background gradient.

    accordion.jsx
    <details open={open} class="border-box rounded-md p-1 group border border-[#667085]" style="background: linear-gradient(116.05deg, rgba(255, 255, 255, 0.25) 21.76%, rgba(255, 255, 255, 0.0875) 119.92%);">

  4. We used a JSX element to represent the heading part of the accordion item and used the <summary> HTML tag to define the heading.

  5. {title} was used to insert the title property of the current accordion item within the heading and {data} was used to insert the data property.

  6. JavaScript expression was used to insert an <img> element within the heading for the down arrow.

  7. The class attribute defines CSS classes for styling the image, including a group-open:rotate-180 class that applies a rotation transform when the accordion item is open.

    accordion.jsx
    <summary class="flex items-center justify-between  text-white p-3 px-6 text-sm">
                        {title}
                        {<img src="../GuidelinesSection/Icon.svg" alt="Down arrow" class="h-4 w-4  group-open:rotate-180 "/>}
                      </summary>
                      <div class="p-4">
                      <p class="text-white box-content font-inter text-sm ">
                        {data}
                      </p>
                      </div>
                    </details>
                  ))

Guidelines accordian:

 

 

Header and Intro​

We followed these steps to make the same:

  1. We used a div element with class names which contains the content displayed within the section.
  2. <p> element was used to define text styling and display the header text "How do I Make sure my resume is ATS-compliant?".
  3. Another <p> element was used to display additional text providing the intro.
header.jsx
<div class="text-white text-center">
      <p class="text-2xl sm:text-4xl font-rubik tracking-tight font-semibold">How do I Make sure my resume is <br>ATS-compliant?
        </p>
        <p class="text-md sm:text-lg font-light mt-2">Here are some guidelines you should follow to ensure your <br> resume gets correctly scanned by all applicant tracking<br> systems.</p>
    </div>

Header and Intro:

 

info

We made use of a section element with multiple class names and a style attribute to set the padding, background image, and background color for the section.

After combining all of the divisions, the Guidelines section can be seen like this:

Guidelines section:

 

The Guidelines section has been executed successfully! Let's see how we created the ATS Resume template section of the Resume Screener Website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/header/index.html b/docs/projects/resume-screener-website/frontend-components/header/index.html index 1dfb2e6b..d65b63c9 100644 --- a/docs/projects/resume-screener-website/frontend-components/header/index.html +++ b/docs/projects/resume-screener-website/frontend-components/header/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Header

The Header is a section at the top of a webpage that typically contains branding elements, navigation menus, and important information. It helps establish website identity, improves user experience, and ensures easy access to different sections of a website on various devices.

This block of code defines an array called navlinks which stores objects representing navigation links. Each object has a title (the text to display) and a link (the URL to navigate to).

Navbar.jsx
   const navlinks = [
     {
      title: "Home",
      link: "/#Home",
     },
      {
       title: "About Us",
       link: "https://opensource.tcetmumbai.in/docs/about-tcetopensource",
       newtab: true,
      },
     // ...
    ];
  1. The code defines an array called navlinks that contains objects representing the links in the navbar. Each object has a title and a link property.
info

Some objects also have a newtab property set to true, indicating that the link should open in a new browser tab.

Adding Logo and Name​

This section represents the logo and website name Resume Screener on the navbar. It displays the logo image, the name "Resume screener," and applies some styling including a border, gradient background, and a blur effect.

Navbar.jsx
     <div
       className="flex items-center gap-3 rounded-full border-2 border-white border-opacity-25"
       style={{
        background:
         "linear-gradient(218.92deg, rgba(255, 255, 255, 0.25) 30.2%, rgba(255, 255, 255, 0) 105.59%)",
        backdrop: "blur(4px)"
         }}>
          <img src="/Footer/logo.png" alt="" className="h-[48px] p-1" />
         <a href="/" className="text-white">
          <h2 className="text-white font-{400} text-base pr-2.5">
           Resume screener
         </h2>
          </a>
    </div>
  1. The div represents the logo section of the navbar. It has CSS classes for styling and a style attribute that sets a background gradient and blur effect. Within this div, there is an img tag displaying the logo image and an a tag wrapping the heading text "Resume screener".

On performing the above steps, the logo and name looked like this:


Adding Get Started Button​

This section represents the "Get Started" button on the desktop version of the navbar. It is styled with a border, text color, hover effects, and rounded corners. The button contains an a element that links to "/#installation".

Navbar.jsx
   <div className="!ml-8 border-2 border-[#475467] rounded-lg">
      <button className="inline-flex items-center text-[#E0EAFF] border-1 border-white py-1 px-2 focus:outline-none rounded md:mt-0 hover:bg-[#475467] hover:text-[#E0EAFF] text-base 2xl:text-lg">
      <a href="/#installation">Get Started</a>
      </button>
   </div>
  1. The outer div has a left margin, border, and rounded corners.
  2. Inside the div, there's a button element styled as an inline-flex container with centered items, specific text and border colors, padding, rounded corners, and hover effects.
  3. Within the button, there's an a element serving as a link with the text "Get Started" and a target URL of /#installation.
  4. On performing the above steps, the Get Started Button looked like this:

info

Similar steps are carried out to display Logo and Get Started Button on a smaller screen.

Adding three line menu button and Navigation for mobile view​

  1. When viewed on phone, the navigation options will be hidden under the three line menu.

    Navbar.jsx
        //to keep the navigation options hidden
        <div className="-mr-2 flex md:hidden">
         {/* ... */}
        </div>
        //three line menu button
         <button
           type="button"
             onClick={handleMenu}
           className="inline-flex items-center justify-center p-2 rounded-lg text-white hover:ring-white focus:outline-none focus:ring-2 focus:rig-offset-2 focus:ring-offset-white focus:ring-white">
            {/* ... */}
         </button>

  2. The outer div has CSS classes to position it as a flex container with negative margin on the right side. It is hidden on medium-sized screens and larger.

  3. The button is styled as an inline-flex container with centered items, padding, rounded corners, white text color, and various focus and hover effects.

  4. The onClick event handler is assigned to the button to trigger the handleMenu function when clicked.

  5. The navigation links on mobile view would be hidden under the three line menu. The code for mobile nav:

    Navbar.jsx
        {open ? (
          <div className="flex flex-col  md:hidden">
            <div className="px-2 pt-1 pb-3 space-y-1 sm:px-3">
              {navlinks.map((link, index) => (
                <a
                  key={index}
                  className="text-center cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                  href={link.link}>
                  {link.title}
                </a>
              ))}
              <a
                href="/Get Started"
                className="text-center cursor-pointer text-[#E0EAFF] hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                Get Started
              </a>
            </div>
          </div>
        ) : null}

  6. There is a div element with CSS classes that make it a flex container with a column layout. It is hidden on medium-sized screens and smaller.

  7. Inside this div, there is another div element with CSS classes for padding and spacing.

  8. Within this inner div, there is a mapping over the navlinks array using the map function.

  9. For each item in the navlinks array, an a element is rendered with CSS classes for styling, including text color, hover effects, padding, rounded corners, and font size. The href attribute is set to the link property of the current navlinks item, and the text content of the a element is set to the title property of the current navlinks item.

  10. Lastly, there is an additional a element rendered at the end, separate from the navlinks array mapping. It has similar CSS classes but a different href attribute value.

  11. On execution of the adove codes, the menu and navigation links on the mobile looks like this:


info

Basically, We have made use of a Hamburger Menu which on being clicked will display the Navigation links.

After adding logo, navigation links and 'Get Started' Button The Header looked like this:



The Header Section is succesfully executed! Let's move on and see how we created the Hero Section of the Resume Screener Website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/hero/index.html b/docs/projects/resume-screener-website/frontend-components/hero/index.html index 4716b693..dfee8525 100644 --- a/docs/projects/resume-screener-website/frontend-components/hero/index.html +++ b/docs/projects/resume-screener-website/frontend-components/hero/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Hero Section

The index.astro is used as the main component in the first section of the TCET Linux website. This section of code is crucial because it combines content, interactivity, visual styling, and adaptability to create an engaging and visually appealing section on a web page. It contributes to a positive user experience and helps achieve the intended goals of the webpage or application.

Data Component​

The data variable is an array that contains a single object. This object represents a piece of information about a resume screener. It has two properties: heading and description. The heading property stores the text "The Best Resume Screener in the World", and the description property stores the text "Maecenas vitae eleifend dui vitae vitae. Risus nam faucibus aliquet at iaculis tempor sed." This line exports the data variable as the default export of the module.

data.js
        export const data = [
            {
                "heading": "The Best Resume Screener in the World",
                "description": "Maecenas vitae eleifend dui vitae vitae. Risus nam faucibus aliquet at iaculis tempor sed."
            },
            // Similarly more objects can be created
        ];
            export default data;

Imports​

This line of code is importing some data from a file called "data" located in the same directory as this code. The data will be used later in the code.

index.astro
        import data from "./data";
        // HTML Markup

HTML Markup​

In this section we have discribed about title, discription button and some image components.

Title and Discription​

The first line of the html code represent a div tag. It creates a container with a dark background color. This block of code uses the imported data and maps over it. For each element in the data array, it creates a <div> element with some CSS classes. Inside this <div>, there are two more <div> elements. The first one contains a <p> element with a large font size and some text from the ele.heading property. The second <div> contains another <p> element with a smaller font size and some text from the ele.description property. This block of code will repeat for each element in the data array.

index.astro
        // Imports
        <div class="bg-[#0C1030] w-full  flex flex-col items-center relative ">
        <div class=" mt-10 z-20">
        {
            data. Map((ele, index) => (
                <div class=" flex flex-col items-center">
                    <div class=" text-white  ">
                        <p class=" p-6 font-rubik font-normal  text-4xl leading-14 text-center">
                            {ele.heading}
                        </p>
                    </div>
                    <div class=" w-10/12 md:w-5/12  text-white">
                        <p class=" text-[#D0D5DD] font-normal  text-base leading-7 text-center">{ele.description}</p>
                    </div>
                </div>
            ))
        }
            // Button Component
        </div>
        </div>

Button Component​

This code block represents another <div> element with CSS classes. Inside it, there are two more <div> elements. The first one creates a button with the text "Resumer Screener tool". The second another button and the text "Contribute" with a purple background color and the transparent white background respectively This button is a hyperlink (<a>) that leads to a GitHub page when clicked.

index.astro
    //Title and discription
        <div class=" flex flex-col sm:flex-row text-white  items-center justify-center gap-6 mt-4">
            <div class=" bg-[#6938EF] inline-flex items-center justify-center w-auto  rounded-md px-4 py-2 text-base  leading-6 text-white  border border-transparent  md:w-auto hover:bg-[#6340c3]">
                <button class="">Resumer Screener tool</button>
            </div>
            <div class=" bg-[#FFFFFF29] w-auto px-4 py-2 flex items-center justify-center rounded-md hover:bg-[#ffffff17] ">
                <button><a href="https://github.com/tcet-opensource/resume-screener/issues" target="_blank">Contribute</a></button>
            </div>
        </div>
    // Image Component

Image Component​

In this code block, there's another <div> element with CSS classes. Inside it, there's a nested <div> with an inline CSS style. Inside this nested <div>, there's an <img> element that displays an image named "image.png" from a directory called "Hero-section". The image has a border around it.

index.astro
    // Button Component
        <div class="mt-16 lg:w-full md:w-full px-4 ">
            <div style="background:linear-gradient(145.2deg, rgba(255, 255, 255, 0.065) 13.28%, rgba(255, 255, 255, 0.1) 87.52%);" class="
        p-3 rounded-lg border-b-0">
                <img src="/Hero-section/image.png" alt="heroSection" class=" border-8  border-[#FFFFFF] ">
            </div>
        </div>
    // svg Component

svg Component​

These last two lines of code create two more <img> elements that display two images named "right.svg" and "left.svg" from the "Hero-section" directory. They are positioned absolutely on the right and left sides of the container.

index.astro
    // Image Component
        <img src="/Hero-section/right.svg" class=" absolute right-0 z-10 w-3/5 md:w-auto" alt="" >
        <img src="/Hero-section/left.svg" class="absolute left-0 z-10 w-3/5 md:w-auto" alt="" >

Output Image​


Hero Section of Resume Screener

With this we have completed the Hero Section of our Resume Screener Website, lets move on forward to see how we integrated the About Us section of the website.

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/frontend-components/tech-stacks/index.html b/docs/projects/resume-screener-website/frontend-components/tech-stacks/index.html index 1135dd2a..d73e1d0b 100644 --- a/docs/projects/resume-screener-website/frontend-components/tech-stacks/index.html +++ b/docs/projects/resume-screener-website/frontend-components/tech-stacks/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Tech Stacks

Astro is an open-source framework for generating web applications on top of popular UI frameworks like React, Preact, Vue, or Svelte. It offers a modern and flexible approach to web development, enabling developers to create fast, scalable, and engaging websites and applications. Read More

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. It is a versatile CSS framework that offers a pragmatic and efficient approach to web development.
Read More

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. Read More

- - + + \ No newline at end of file diff --git a/docs/projects/resume-screener-website/getting-started/index.html b/docs/projects/resume-screener-website/getting-started/index.html index 66299e01..659b42bb 100644 --- a/docs/projects/resume-screener-website/getting-started/index.html +++ b/docs/projects/resume-screener-website/getting-started/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Getting Started

info

The TCET Resume Screener page is built using AstroJS, an all-in-one web framework designed for speed.

Steps to run the site on your local system:​

These are the steps you need to follow to get this site on your local system.

Install Git in your computer​

Follow these steps to install git in your computer.

  1. Go to https://git-scm.com/downloads.
  2. Click on Windows. Download should start.
  3. Go to downloads and install the package.

Clone the repo​

Open Git Bash in any folder and paste the following command

git clone https://github.com/tcet-opensource/resume-screener-frontend.git

Install NodeJs​

  1. Go to https://nodejs.org/en/download
  2. Select Current.
  3. Download the 64-bit .msi version. Follow the steps and install NodeJS.
note

It is important to have NodeJS in your system

Open the folder in VS Code​

  1. Install VS Code if not installed.
  2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

Install Important Packages/Dependencies​

Install yarn globally 

npm install -g yarn

You can make changes to your respective files and changes will be shown once you have saved the file.

Commands used to run locally​

  1. To run the commands, make sure that you have installed yarn globally first.
  2. All commands are run from the root of the project, from a terminal

Here are a set of commands used to run locally:

CommandAction
yarnInstalls dependencies
yarn devStarts local dev server at localhost:3000
yarn buildBuild your production site to ./dist/
yarn previewPreview your build locally, before deploying
yarn astro ...Run CLI commands like astro add, astro check
yarn astro --helpGet help using the Astro CLI

Steps to run after a Pull / Merge:​

  1. To install all dependencies
yarn
  1. To run local dev environment
yarn dev
- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/about-tcet-linux-website/index.html b/docs/projects/tcet-linux-website/about-tcet-linux-website/index.html index 35ac4986..977b5e6d 100644 --- a/docs/projects/tcet-linux-website/about-tcet-linux-website/index.html +++ b/docs/projects/tcet-linux-website/about-tcet-linux-website/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

TCET Linux Website

This is the official documentation of the TCET Linux website of TCET Mumbai built by UI/UX and Frontend Team to provide necessary information about TCET Linux that have been developed by DevOps Team, maintained by the TCET Open Source Documentation team.




The admirable collaboration of Arch Linux and TCET Open Source Community has given us an Operating System which is altered in a way that makes it a good partner for all the Engineering Students of Thakur College of Engineering and Technology

1. The backbone of TCET linux​

  • Built upon the robust foundation of Arch Linux, TCET Linux inherits its stability, flexibility, and extensive package availability, catering to the diverse needs of engineering students and faculty.

2. What does it Offer?​

  • TCET Linux offers optimized and streamlined environment. this provides the students to explore the various concepts of Engineering

3. We would not reel in the real world​

  • The inclusion of specialized engineering software tools, programming languages, and development environments enhances the learning experience that prepares students for real-world engineering challenges

  • TCET Linux also promotes the culture of learning and sharing the knowledge with others, and also sharing ideas.

4. Open Source​

  • Open Source helps with maintaining the website as well as ensure that students and faculty have access to the latest software versions and security patches, keeping the system up-to-date and secure.

If you're ready to get started with contributing to TCET Open Source, head over to our installation guide for step-by-step instructions on how to Get Started with the TCET Linux Website.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard/index.html b/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard/index.html index e66c611d..4fe653db 100644 --- a/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/copy-to-clipboard/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Copy To Clipboard

The Copy To Clipboard component is used in the fourth section of the TCET Linux website. The CopyToClipboard component provides a simple and convenient way to copy text to the clipboard. This is a common requirement in many applications, especially those that involve sharing or saving content. It provides visual feedback through the notification dialog, handles user interactions, and enhances the user experience by automatically hiding the dialog and closing it when clicked outside. By encapsulating the copy-to-clipboard functionality within a dedicated component, our codebase becomes more organized and modular. This improves code maintainability, readability, and makes it easier for other developers to understand and modify the code in the future.

Import​

Here's a breakdown of the code to understand it's functionality:

  1. The code imports the necessary dependencies:

  • React: The core library for building user interfaces in React.

  • useRef: A hook that creates a mutable ref object to persist a value across component re-renders.

  • useEffect: A hook that allows performing side effects in functional components.

  • useOnClickOutside: A custom hook that handles clicks outside a specified element.

    CopyToClipboard.tsx
    import React, { useRef, useEffect } from "react";
    import useOnClickOutside from "../hooks/useOnClickOutside";
     // CopyToClipboard component

CopyToClipboard​

  1. The CopyToClipboard component is defined as a function component with a prop type of { text: string }. It takes a single prop called text, which represents the text to be copied to the clipboard.

    CopyToClipboard.tsx
    //Import
    const CopyToClipboard: React.FC<{
       text: string;
       }> = ({ text }) => {
              // copyToClipboard component
       }

copyToClipboard​

Inside the CopyToClipboard component, there is a function copyToClipboard defined. This function is called when the button is clicked and is responsible for copying the text prop value to the clipboard.

Inside the copyToClipboard function:

  1. navigator.clipboard.writeText(text) This line uses the navigator.clipboard API to write the text value to the clipboard.

  2. dialog.current?.show(): This line shows the dialog element if it exists (using optional chaining).

  3. dialog.current.style.display = "flex": This line sets the CSS display property of the dialog element to "flex".

  4. A setTimeout function is used to hide the dialog element after 2000 milliseconds (2 seconds). It sets the display property to "none" and closes the dialog.

    CopyToClipboard.tsx
    // CopyToClipboard Function
        const copyToClipboard = () => {
           navigator.clipboard.writeText(text);
           dialog.current?.show();
           dialog.current.style.display = "flex";
           const timer = setTimeout(() => {
             dialog.current.style.display = "none";
             dialog.current?.close();
           }, 2000);
       };
        // dialog component

dialog​

The dialog ref is created using useRef<HTMLDialogElement>(null). It is used to reference the dialog element in the DOM.

Inside the dialog component:

  • The useOnClickOutside custom hook is called, passing the dialog ref and a callback function. This hook adds an event listener to detect clicks outside the dialog element and calls the callback function when such a click occurs.

    CopyToClipboard.tsx
       // copyToClipboard component
            const dialog = useRef<HTMLDialogElement>(null);
              useOnClickOutside(dialog, () => {
              console.log("clickng outside");
              dialog.current.style.display = "none";
              dialog.current?.close();
            });
           // return component

return​

The major component CopyToClipboard returns a button element representing the copy-to-clipboard button.

  1. The button has a className prop that applies CSS classes for styling the button's appearance.
  2. The onClick prop is set to the copyToClipboard function, so it is triggered when the button is clicked.
  3. Inside the button element, there is an svg element representing an icon. It uses the SVG format and has attributes for styling and defining the icon path.
  4. Following the svg element, there is a dialog element representing the notification dialog that appears when the text is copied. It initially has a className prop that applies CSS classes for positioning and styling the dialog.

  • Inside the dialog element, there is a p element containing the text "Copied to clipboard".

    CopyToClipboard.tsx
       // dialog component
            return (
              <button
              className="p-1 border border-slate-400
              cursor-pointer
              hover:bg-slate-200 hover:bg-opacity-20
              active:bg-opacity-40 rounded-lg text-slate-100
              overflow-visible "
                onClick={copyToClipboard} >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth={1.5}
                  stroke="currentColor"
                  className="w-6 h-6" >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.       03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.      4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.      75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.    049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.        907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.       25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.       907-2.185a48.208 48.208 0 011.927-.184"/>
                </svg>
                <dialog
                  ref={dialog}
                  className="top-3 sm:left-56  w-max items-center         rounded-lg h-4 bg-white bg-opacity-60 "
                >
                  <p className="">Copied to clipboard</p>
                </dialog>
              </button>
            );
          };
       // export CopyToClipboard component

Export​

The CopyToClipboard component is exported as the default export component.

CopyToClipboard.tsx
        // CopyToClipboard component
    export default CopyToClipboard;

Application​

This component can be used by providing the text prop with the desired text to be copied. When the button is clicked, the text will be copied to the clipboard, and a notification dialog will appear briefly to indicate the successful copy operation.


TCET Linux- Copy To Clipboard

tip

You can visit

  1. CopyToClipboard.tsx Source Code.
  2. Verify Downloads Section of the TCET Linux website to see the application of the component.

The Copy To Clipboard component was succesfully executed! Let's move on and see how we created the Download Section component of the TCET Linux Website.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/download-section/index.html b/docs/projects/tcet-linux-website/frontend-components/download-section/index.html index 257929fa..5eebce8c 100644 --- a/docs/projects/tcet-linux-website/frontend-components/download-section/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/download-section/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Download Section

The Download component represents the Second section of the TCET Linux website. It is one of the most crucial component as it provides important information and actions related to downloading and verifying the TCET Linux software. This section serves as a gateway for users to access the software and its associated resources. The page likely presents data on the Download Availability, the Verification and Additional Resources. The section informs users that the TCET Linux source code and installers are available for download. It provides direct download links to the software, allowing users to easily obtain the necessary files.

Download Section & Gradient​

Here's a breakdown of the code to understand it's functionality:

  1. This code represents the start of the DownloadSection component. The div element with the id attribute download serves as a container for the entire section. It has classes for styling, such as a full width, background color, relative positioning, and hidden horizontal overflow.

    DownloadSection.astro
    <div  id="download"  class="w-full bg-slate-800 relative overflow-x-hidden px-10 lg:px-12">
           // Gradient Background 
    </div>

  2. This div element adds a gradient background to the section. It has the class downloadSectionGradient and the style pointer-events-none to prevent any interaction with the element.

    DownloadSection.astro
     // Download Section Component 
        <div class="downloadSectionGradient pointer-events-none">
              // Columns
        </div>

Left Column​

  1. This div element displays the heading Downloads in white text with a bold font. The font size varies for different screen sizes.

    DownloadSection.astro
    // Gradient Background
       <div class="text-white font-semibold text-4xl lg:text-6xl mb-4 lg:mb-9">
            Downloads
      </div> 
    // Discription

  2. This <p> element contains a paragraph of text in white color. It provides information about the availability of TCET Linux source code and installers for download.

    DownloadSection.astro
      // Heading
          <p class="text-white flex flex-wrap font-normal text-sm md:text-xl">
             TCET Linux source code and installers are available for download <br /> for all versions!!
          </p>
      // Download Button

  3. This <a> tag link element represents the download button. It has classes for styling, including a blue background color, padding, cursor style, rounded corners, and a border. The button contains the text Download and an image of a download icon. The href attribute specifies the Github URL to downloadable iso image file which is linked to the Download. It is represented by line 1-4. The button element in this section represents a clickable button. It has styles applied as per our requirements.

DownloadSection.astro
    // Discription
            <a class="flex flex-row bg-blue-900 w-fit py-3 px-5 cursor-pointer gap-5 items-center justify-center rounded-full border-custom-w border-custom-border-color hover:bg-blue-500 font-semibold text-base" href="https://github.com/tcet-opensource/tcet-linux/releases/download/v0.5-beta/tcetlinux-2023.05.05-x86_64.iso" >
                Download
                <img class="w-full h-full" src="images/download-icon.svg" alt="" />
           </a>
    // Checksum Button

  1. This <a> tag link element represents the checksum button. It has classes for styling, including border, padding, cursor style, and rounded corners. The button contains the text Checksum and an image of a download icon. The href attribute specifies the URL for the checksum section in the website. It has the text and downward arrow displaying "Checksum" which is linked to the Checksum File. It is represented by line 2. The button element in this section represents a clickable button.

    DownloadSection.astro
     // Download Button
          <a
           href="https://github.com/tcet-opensource/tcet-linux/releases/download/v0.5-beta/checksum"
           class="flex flex-row w-max h-fit p-2 px-4 cursor-pointer gap-2 items-center justify-center border rounded-full border-white hover:bg-blue-50 hover:bg-opacity-20 text-white"
           id="req-btn">
               <span class="md:font-semibold">Checksum</span>
               <span class="p-1 ml-1 bg-custom-btn rounded-full">
                     <img class="w-full h-full" src="images/download-icon.svg" alt="" />
               </span>
         </a>
     // Verify Download Component

  2. Inside this section there is an <a> anchor element representing the hyperlink wrapped in the text for verifying the download. It has classes for styling, including spacing and underline formatting. The link text is Verify your download with an arrow symbol (→) indicating a link. It has the text displaying Verify your download → which is linked to the Verify your download →. It is represented by line 1,3.

    DownloadSection.astro
      // Checksum Button
          <a class="flex flex-row items-center p-2 gap-2" href="/#verify">
            <i class="font-semibold text-base underline underline-offset-4 not-italic">
                Verify your download →;
            </i>
          </a>
      // Tutorials Link

  3. This <div> element provides information about creating a bootable USB drive. It includes a heading Create Bootable USB and two links for video tutorials on creating bootable USB drives for Windows and Mac/Linux. The below section of code there is an <a> anchor element for the hyperlink wrapped in the text. The links have underlined formatting.

  • The First <a> tag displaying "Windows ↗" which is linked to the Installation tutorial video for Windows. It is represented by line 9.


  • The Second <a> tag displaying "Mac/Linux ↗" which is linked to the Installation tutorial video for Mac or Linux. It is represented by line 9.

    DownloadSection.astro
     // Verify Download Component
     <div class="text-white  mt-4 lg:mt-8">
         <span class="font-semibold text-2xl">Create Bootable USB</span>
         <span class="flex flex-wrap text-lg gap-4">
             <a href="https://www.youtube.com/watch?v=7ND2fiaFfic" class="underline">Windows &#x2197;</a>
             <a href="https://www.youtube.com/watch?v=KQGedNCA1E4" class="underline">Mac / Linux &#x2197;</a>
         </span>
       </div>
     // Right Column

Right Column​

  1. This code represents the second column of the grid layout, which contains an image of a man with a laptop. The div element has the class image-content and is hidden on medium-sized screens (md) and above. The img element specifies the image source, width, height, and alternative text.

    DownloadSection.astro
     // Left Column
         <div class="image-content hidden md:flex items-center align-middle justify-center z-10" >
             <img class="w-60 h-40 lg:w-96 lg:h-80" src="images/man-with-laptop.png" alt="" />
         </div>
     // Left Column

Output Image​


TCET Linux- Download Section

tip

You can visit

  1. Download Section of the TCET Linux website
  2. DownloadSection.astro

The Download Section of Home Page was succesfully executed! Let's move on and see how we created the Hero Section component of the TCET Linux Website.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/footer/index.html b/docs/projects/tcet-linux-website/frontend-components/footer/index.html index 0821f7ef..99d110ba 100644 --- a/docs/projects/tcet-linux-website/frontend-components/footer/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/footer/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Footer

The Footer elelment of TCET Linux Website which is located at the bottom of the website. It serves as a container for information that is relevant to the entire page. It acts as a Navigation and Contact guide for users. In the Footer element, We have included links to Documentation, Blogs, Live projects, Teams, Copyright Information, Email address for contact purposes with TCET LINUX, and icons linking to the Organization's presence on various social media platforms like LinkedIn, YouTube, Twitter, Instagram, and GitHub. We created this enhanced footer that helps users easily access relevant resources and connect with the TCET Opensource Organisation through multiple channels.

Top Section​

This Section is represented by the HTML program with CSS which consists of two components : Logo Component and Footlinks Component.

Here is the implemented code :

index.astro
  <div class="sm:h-[210px] h-full py-6 px-5 sm:py-[48px] sm:px-[41px] border-t bg-[#101828] flex   font-sans gap-5 flex-col">
  //top section
  <div class=" w-full min-h-fit  flex flex-col sm:flex-row  justify-between items-center ">
  //futher sections code

We created the first <div> above as the parent div of the Footer element and the second <div> as the Sectional div for Top Section.

Logo Component​

This Component created by us, contains the Logo of the TCET Opensource Organization.

index.astro
 //top section div
   <div class="flex items-center gap-3">
      <img src="/Footer/logo.png" alt="" class="h-[49px]" />
      <h2 class="text-white font-semibold text-2xl">TCET Open Source.</h2>
    </div>
 //Footlinks component code
  • <img src> tag is used by our team to import the logo and display it in the <div> created.
  • <h2> tag is created by us to display the name of the Orgnization.
tip

The Logo of the Orgnization can be updated by changing img src pathlink or the image in that path.

This Component produce by us, contains the Footlinks of the TCET Opensource Organization.

index.astro
 //Logo Component code
 <div class="flex flex-col sm:flex-row  h-full gap-3 text-[#D0D5DD]  items-center">
  <a class="hover:underline font-thin  text-sm  " href="https://opensource.tcetmumbai.in/docs/category/projects" target="_blank">Docs</a>
  <a class="hover:underline font-thin  text-sm  " href="https://opensource.tcetmumbai.in/blog" target="_blank">Blogs</a>
  <a class="hover:underline font-thin  text-sm  " href="/LiveProjects">Live Projects</a>
  <a class="hover:underline font-thin  text-sm  " href="/CookingProjects">Cooking Projects</a>
  <a class="hover:underline font-thin  text-sm  " href="/CookingProjects">Team</a>
  <a class="hover:underline font-thin  text-sm  " href="mailto:opensource@tcetmumbai.in">Contact</a>
 </div>
 //Bottom Section Code

Explanation of the code :

  1. An <a> tag is created by our team to give Title to the footlinks with href links corresponding to that Footlinks.

  2. There are some links created of different pages such as :

    • Docs takes you to a page with documentation about projects.
    • Blogst takes you to a page with interesting articles.
    • Live Projects is a link to see ongoing projects.
    • Cooking Projects is also a link to cooking-related projects.
    • Team is a link to see the people involved.
    • Contact is a link to send an email to "opensource@tcetmumbai.in".
tip

Futher more Footlinks can be added in the footer element using same syntax of code .

Bottom Section​

This Section is represented by the HTML program with CSS which consists of : Copyright and Email Component, Socail Media Component.

This Component created by our team, consists of Copyright text of the Organization.

index.astro
 //Top Section code
 <div class=" w-full  flex flex-col-reverse sm:flex-row   sm:justify-between items-center sm:gap-0 gap-4">
  <div class="  text-xs  text-[#D0D5DD] ">Copyright 2022-2023 @ TCET Opensource.</div>
  <a class="  text-xs  text-[#D0D5DD]" href="mailto:linux@tcetmumbai.in">linux@tcetmumbai.in</a>

  1. We created the First <div> as the Sectional div for Bottom Section.

  2. Second <div> is created to display the Copyright text of this componenet.

  3. We created the <a> tag in-order to display Email link in href for LINUX-TCET Mumbai.

info

The Copyright Text may be converted into accessible text with link to the Copyright page of the Organization.

Social Media Component​

This Component contains various social media links of TCET Open Source Organization.

index.astro
  //Copyright and Email Component code
   <div class="flex text-[#D0D5DD] gap-8">
     <a href="https://www.linkedin.com/company/tcet-opensource/" target="_blank"><img src="/Footer/linkdin.png" alt="" class="h-5 cursor-pointer" /></a>
     <a href="https://www.youtube.com/@TCETMumbaiOfficial" target="_blank"> <img src="/Footer/Youtube.png" alt="" class="h-5 cursor-pointer" /></a>
     <a href="https://twitter.com/tcetopensource" target="_blank"> <img src="/Footer/Twitter.png" alt="" class="h-5 cursor-pointer" /></a>
     <a href="https://www.instagram.com/tcetopensource/" target="_blank"><img src="/Footer/Instagram.png" alt="" class="h-5 cursor-pointer" /></a>
     <a href="https://github.com/tcet-opensource/" target="_blank"><img src="/Footer/Github.png" alt="" class="h-5 cursor-pointer" /></a>
   </div>

  1. We have used Basic HTML syntax in this component to fulfill our requirements .

  2. The <a> tag is used by us to display LinkedIn Platform link in href of TCET OpenSource Organization .

  3. Similarly using same syntax, we have linked different Social Media Platform Account of TCET OpenSource Organization for contact process of user.

tip

Using similar Basic HTML syntax, more Social Media links can be added in the Bottom Component of Footer Element of the Website.

After adding all components, the Footer Element can be scene like this :

Footer Section

After successfully implementing the Footer component of the TCET Linux Website , the next step is to move forward with the implementation of the Copy to Clipboard component.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/hero/index.html b/docs/projects/tcet-linux-website/frontend-components/hero/index.html index 661f5208..f73c17e4 100644 --- a/docs/projects/tcet-linux-website/frontend-components/hero/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/hero/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Hero

The Hero component represents the first section of the TCET Linux Website. Hero section is designed by our team to make a strong visual impact and introduce the TCET Linux Operating System to the Users. We have provides a brief description of the Operating System's features and its association with Arch Linux and the TCET Open Source Community, also we have included buttons for users to explore more about TCET Linux and view the system requirements for installing TCET Linux System on your Device .

Hero Content Section​

Our team has created this section with Basic HTML and Javascript (Astro) code. This Section consist of Text Component, Explore Component and Requirements Pop-Up Button. This Section provides information about TCET Linux and encourages users to explore and view the requirements.

Text Component​

This consist of Major Text Visualisation of the Hero Section of the TCET Linux Website.

Here is the implementation of code :

  1. The first<div> element created by our team is the parent Div of the Whole Hero Section. A <Section> Element is used by us to create Sub-sections in the component, followed by <div> elements with Css styling.

  2. Our team have used an <h1> tag to diaplay the Title Text of the Component.

  3. <p> Tag is used by our team to display the description about TCET Linux Website.

    Hero.astro
    // Importing Dependencies
    <div>
    <section class="text-gray-600 body-font bg-[#101828]">
     <div class="w-11/12 mx-auto flex md:py-16 py-5 md:flex-row flex-col pb-5 items-center">
     <div
      class="absolute z-30 py-0 left-0 w-80 h-96 bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-100 opacity-30 blur-3xl flex-none order-4 rounded-xl transform -rotate-45 pointer-events-none"
      >
     </div>
     <div
      class="lg:flex-grow md:w-1/2 lg:pr-0 md:pr-12 flex flex-col md:items-start md:text-left mb-10 md:mb-0 items-center text-center font-title"
     >
      <h1 class="2xl:text-6xl xl:text-5xl sm:text-4xl text-3xl mb-2 text-white">
       Enhance your computing experience with TCET Linux
      </h1>
      <p class="mb-8 leading-relaxed text-indigo-300 sm:text-sm text-xs">
       TCET Linux • A 64-bit GNU/Linux distribution for TCET Mumbai
      </p>
      <p class="mb-8 leading-relaxed text-[#D0D5DD] sm:text-base text-sm">
       Powered by Arch Linux & the TCET Open Source Community, TCET Linux the
       the premier operating system for engineering education in TCET Mumbai.
      </p>
    //Button Component Code
tip

Further Basic HTML Syntax i.e Header (<h>) and Paragragh <p> Tags to display more text on your Website.

Explore Component​

This Component contains the Button linked to the Youtube Video.

Hero.astro
//Text Component
<div class="flex items-center gap-2 md: gap-4">
<div class="flex justify-center h-min">
<a
class="inline-flex text-white bg-[#01105F] shadow-base shadow-sky-500 border-sky-500 border-y-2 py-2 px-6 focus:outline-none rounded-3xl text:base md:text-lg hover:bg-blue-700"
href="https://www.youtube.com/watch?v=8kL1NEtSIi4"
target="_blank">Explore</a
>
</div>
  • This Component created by our developers, consists of <div> with <a> tag containing an image. It has classes and styles applied to it, and it displays an image referenced by the source attribute usinh href element.
tip

You can add more Linked Button using same Content.

Requirements Pop-Up Button​

We created this Pop-Up Button to display System Requirements in a dialog that can be opened and closed by clicking the button.

Hero.astro
// Explore Component Code
<button
class="flex flex-row w-fit p-2 px-4 cursor-pointer  gap-2 items-center justify-center border rounded-full border-white hover:bg-blue-50 hover:bg-opacity-20 text-white"
id="req-btn"
>
<span class=" h-6 md:font-semibold">Requirements</span>
<span class="p-1 ml-1 bg-custom-btn rounded-full">
<img class="w-full h-full"
src="images/requirements-icon.svg"
alt=""
/>
</span>
</button>
</div>
</div>
//Hero Image Code

  1. We created a <button> element which contains an id of "req-btn"

  2. <Span> element are used to display Text in <h6> tag and an icon svg in <img src> tag.

Hero Image Section​

This section consist of Image displayed on the other half of Hero Section of the Website.

Hero.astro
//Hero Content Section Code
<div class="flex sm:w-1/2">
 <div
 class="hidden md:flex absolute z-30 pt-20 m-14 w-48 h-52 xl:w-[400px] xl:h-[300px] bg-[#98A2B3] opacity-30 blur-2xl flex-none order-4 rounded-full pointer-events-none"
 >
 </div>
    <div class="z-50 flex align-middle rounded-xl m-2">
    <img class="w-full object-contain" src="image 1.png" />
    </div>
 </div>
//Pop-Up Button Script code
  • Basic HTML <img src> tag is used to display Hero Image of Hero Section inside <div> classes with appropriate Css styling.
info

To understand code more briefly, You can refer "Hero.Astro" file from TCET Linux Website repo

Pop-Up Screen Description​

This Component consist of data that is displayed while the Pop-Up Dialog is open. The dialog provides a clear heading, a close button, and a list of requirements to help users understand the hardware specifications needed to run TCET Linux successfully.

Hero.astro
<dialog id="requirements" class="w-5/6 md:w-3/4 lg:w-2/4 p-0 rounded-xl bg-[#0e1624] text-white "  >
 <div id="inside-req" class="p-6 lg:p-8 w-full h-full space-y-2">
  <div class="flex justify-between " >
   <h1 class="text-2xl font-title font-semibold">Requirements</h1>
   <button id="close-req" class="text-2xl font-medium" >X</button>
  </div>
  <ul class="list-disc ml-8" >
    <li> 64 bit x86_64 processor (Intel/AMD), with atleast 2 CPU cores. (32-bit not supported) </li>
    <li> Any GPU/iGPU with OpenGl 3.3+ support. </li>
    <li> Atleast 2GB DDR3/DDR4 RAM. </li>
    <li> Atleast 10GB HDD/SSD storage. (Although installer will allow min 5.5GB) </li>
    <li> Basic WPA/WPA2 compatible wifi card or ethernet supported motherboard. </li>
  </ul>
 </div>
</dialog>

  1. We Created <dialog> element with an id of "requirements" and several classes that that is used for styling. It is styled to appear as a rounded rectangle with a dark background and white text.

  2. Inside the <dialog> element, we defined a <div> element with an id of "inside-req" with classes for styling .

  3. We created an <h1> element with classes that define the font size, font family, and font weight. It displays the heading "Requirements".

  4. Next, we defined a <button> element with the id "close-req". The button displays an "X" symbol and is intended to close the dialog when clicked.

  5. Following the header, we defined an unordered list <ul> with the class "list-disc ml-8".

    • This styles the list items with bullet points and an 8-pixel left margin.

    • The list items <li> represent the system requirements for TCET Linux.

    • Each requirement is listed as a separate list item.

Pop-Up Button Script​

This Section contains the responsive working of Pop-Up

Hero.asrto
// Pop-Up Description Code
<script>
  const requirements = document.getElementById("requirements");
  const req_btn = document.getElementById("req-btn");
  const insideReq = document.getElementById("inside-req");
  const closeReq = document.getElementById("close-req");
  req_btn.addEventListener("click", function () {
    // console.log("opennnn");
    requirements.showModal();
  });
  closeReq.addEventListener("click", function () {
    // console.log("closeee");
    requirements.close();
  });
  window.onclick = function (event) {
    if (event.target.contains(insideReq) && event.target !== insideReq) {
      requirements.close();
      // console.log("clickkk outsidee");
    }
  };
</script>

Here's the Explanation of the Above code :

  1. Our team created this code which begins by retrieving several elements from the HTML using their respective ids: requirements, req_btn, insideReq, and closeReq. These elements represent the dialog box itself, the button that opens the dialog, the content container of the dialog, and the close button within the dialog respectively .

  2. Then we added an event listener to the req_btn button using the addEventListener() method.

  • When the <button> is clicked, the function provided as the second argument is executed.

  • In this case, the function calls the showModal() method on the requirements dialog element.

  • This method displays the dialog as a modal window, overlaying the rest of the page and preventing interaction with the underlying content.

  1. We added another event listener to the closeReq button.

  • When the <button> is clicked, the function provided, closes the requirements dialog using the close() method.

  • This method hides the dialog and allows the underlying content to be interacted with again.

  1. In the last part of the code, we assigned a click event listener to the window object.

  • This listener triggers when any click event occurs on the window.

  • The function provided checks if the clicked element is contained within the insideReq element and if it is not the insideReq element itself.

  • If these conditions are met, it means that the click occurred outside the dialog's content area.

  • In this case, the function closes the requirements dialog using the close() method.

After implementing the code, Pop-Up Dialog can be scene like this :

Pop-Up Dialog
tip

Using Similar code consisting of Event listeners, an interactive dialog Can be created with content using same Pop-Up Screen Description code.

After implementing all components, Hero Section can be scene like this :

Hero Section

The Hero Section of TCET Linux Webite was succesfully executed! Let's move on and see how we created the Installation Steps Section component of the TCET LinuxWebsite.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/installation-steps/index.html b/docs/projects/tcet-linux-website/frontend-components/installation-steps/index.html index a77bf07f..af47d7fb 100644 --- a/docs/projects/tcet-linux-website/frontend-components/installation-steps/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/installation-steps/index.html @@ -9,8 +9,8 @@ - - + +
@@ -20,8 +20,8 @@ -

Installation Steps

TCET Linux Installation Steps element is a step-by-step guide created by us that will walk you through the process of installing TCET Linux on your system. We have included all the neccessary steps from Initial Welcome Screen to selecting your Location, Keyboard Layout, Storage Partitioning, and User Details. This Section in the TCET Linux Website helps the user to easily install TCET Linux on their Device.

Here's how we implemented code of this Element :

Function Defination​

  1. Opening the "InstallationSteps.jsx"file.

  2. In Installation Steps Element, We have implemented a code that consist a React component called InstallationSteps. It is a functional component that renders a set of installation steps for TCET Linux Installation along with Corresponding Images with Hovering Effect.

    InstallationSteps.jsx
    //import dependencies
    function InstallationSteps() 
      const [imageFirst, setImageFirst] = useState(welcomeImage);
      const [imageSecond, setImageSecond] = useState(welcomeImage);
      //Futher Code

  3. Our implemented code begins with importing the necessary dependencies and several image files using relative paths for our Requirements.

  4. We have defined InstallationSteps function as the component.

    • Inside the component, two State Variables are initialized using the useState hook: imageFirst and imageSecond.

    • The imageFirst state variable represents the image displayed on the Left side, and imageSecond represents the image displayed on the Right side.

Array Defination​

  1. In this step, we have defined an Two Array called installationStepsFirstSet and installationStepsSecondSet. These arrays contain objects representing the installation steps.

  2. First Array contain the objects for First Set of Installation Steps component. Similarly Second Array contain the objects for Second Set of Installation Steps component.

    InstallationSteps.jsx
      //function defination
      const installationStepsFirstSet = 
       {
         id: 1,
         header: "Welcome Screen",
         description:
           "Launch the installer by searching for 'Install TCET Linux'. The installer will look like this.",
         image: welcomeImage,
       },
       //Futher code

  3. Each step object has properties such as id, header, description, and image which represents step number, step title, step description, step image file path.

Similar Steps were carried out by us to create different object in both the Arrays.

info

We created this Arrays to utilise in Main Structure, which shorten's the code length and make it accessible to understand.

tip

You can refer this code from "InstallationSteps.jsx" file from our TCET Linux Website repo.

Sets of Installation Steps​

This Component consist of the main Structure of code implemented by our team which enable the Sets section with hovering image effect.

InstallationSteps.jsx
//Main Structure
<div id="installation" className="overflow-hidden bg-[#101828] py-4 px-4 lg:px-12">
<div className="">
<div className="py-12 px-6 w-full h-full flex flex-col-reverse xl:flex-row md:flex-row">
<div className="w-full xl:w-1/2 relative">
 <p className="text-[#6172F3] font-bold">INSTALLATION GUIDE</p>
 <p className="font-title text-[#FCFCFD] text-2xl md:text-4xl pt-2 pb-2">
   TCET Linux Installation Steps
 </p>
 <div className="absolute z-30 top-14 left-0 w-48 h-80  bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-100 opacity-30 blur-2xl flex-none order-4 rounded-xl transform -rotate-45"></div>
  <div onMouseLeave={() => setImageFirst(welcomeImage)}>
   {installationStepsFirstSet.map((step) => (
  <div
     className="pt-6 cursor-pointer text-sm sm:text-base"
     onMouseEnter={() => setImageFirst(step.image)}
     key={step.id}
    >
    <p className="text-[#98A2B3] font-semibold">
    {step.id}. {step.header}
    </p>
    <p className="text-[#F9FAFB] pt-2">{step.description}</p>
 </div>
                  ))}
</div>
</div>
   <div className="relative w-full flex justify-center align-middle xl:w-1/2">
     <div className="absolute z-30 top-5 w-48 h-52 xl:w-[600px] xl:h-[450px] bg-[#98A2B3] opacity-30 blur-2xl flex-none order-4 rounded-full"></div>
     <div className="z-50 flex align-middle rounded-xl m-2">
      <img className="w-full object-contain rounded-lg" src={imageFirst} />
     </div>
   </div>
</div>
</div>
// Similar Set section Code

Here's the explanation of the code :

  1. We defined a JSX is wrapped in a <div> element with the id set to "installation" and some CSS classes for styling purposes.

  2. Within the component, we defined the JSX structure which is divided into two main sections for the first and second sets of installation steps.

  3. In the first section, we created a <div> elements containing another div's for the left side content and the right side content.

  4. Inside the left side <div>, we created a paragragh tag (<p>) element for the title, a <p> element for the description of the installation guide and an <img> element that displays the image corresponding to the currently selected step. The image source is controlled by the imageFirst state variable.

  5. The installationStepsFirstSet array is mapped over to render each step as a <div>. The onMouseEnter event is used by us to update the imageFirst state variable with the corresponding image when a step is hovered over.

Similar Steps were carried out to created another set of InstallationSteps.

tip

Using this Syntax of Javascript Language, Multiple Sets can be created as per your Requirements.

After implementing all components, the Installation Steps Component can be scene like this :

Installation Steps Set 1
Installation Steps Set 2

In this page, we saw how the Installation Steps section was put together. Let's go on towards the next stage,the Verify Downloads Section , to see how the component was implemented.

- - +

Installation Steps

TCET Linux Installation Steps element is a step-by-step guide created by us that will walk you through the process of installing TCET Linux on your system. We have included all the neccessary steps from Initial Welcome Screen to selecting your Location, Keyboard Layout, Storage Partitioning, and User Details. This Section in the TCET Linux Website helps the user to easily install TCET Linux on their Device.

Here's how we implemented code of this Element :

Function Defination​

  1. Opening the "InstallationSteps.jsx"file.

  2. In Installation Steps Element, We have implemented a code that consist a React component called InstallationSteps. It is a functional component that renders a set of installation steps for TCET Linux Installation along with Corresponding Images with Hovering Effect.

    InstallationSteps.jsx
    //import dependencies
    function InstallationSteps() 
      const [imageFirst, setImageFirst] = useState(welcomeImage);
      const [imageSecond, setImageSecond] = useState(welcomeImage);
      //Futher Code

  3. Our implemented code begins with importing the necessary dependencies and several image files using relative paths for our Requirements.

  4. We have defined InstallationSteps function as the component.

    • Inside the component, two State Variables are initialized using the useState hook: imageFirst and imageSecond.

    • The imageFirst state variable represents the image displayed on the Left side, and imageSecond represents the image displayed on the Right side.

Array Defination​

  1. In this step, we have defined an Two Array called installationStepsFirstSet and installationStepsSecondSet. These arrays contain objects representing the installation steps.

  2. First Array contain the objects for First Set of Installation Steps component. Similarly Second Array contain the objects for Second Set of Installation Steps component.

    InstallationSteps.jsx
      //function defination
      const installationStepsFirstSet = 
       {
         id: 1,
         header: "Welcome Screen",
         description:
           "Launch the installer by searching for 'Install TCET Linux'. The installer will look like this.",
         image: welcomeImage,
       },
       //Futher code

  3. Each step object has properties such as id, header, description, and image which represents step number, step title, step description, step image file path.

Similar Steps were carried out by us to create different object in both the Arrays.

info

We created this Arrays to utilise in Main Structure, which shorten's the code length and make it accessible to understand.

tip

You can refer this code from "InstallationSteps.jsx" file from our TCET Linux Website repo.

Sets of Installation Steps​

This Component consist of the main Structure of code implemented by our team which enable the Sets section with hovering image effect.

InstallationSteps.jsx
//Main Structure
<div id="installation" className="overflow-hidden bg-[#101828] py-4 px-4 lg:px-12">
<div className="">
<div className="py-12 px-6 w-full h-full flex flex-col-reverse xl:flex-row md:flex-row">
<div className="w-full xl:w-1/2 relative">
 <p className="text-[#6172F3] font-bold">INSTALLATION GUIDE</p>
 <p className="font-title text-[#FCFCFD] text-2xl md:text-4xl pt-2 pb-2">
   TCET Linux Installation Steps
 </p>
 <div className="absolute z-30 top-14 left-0 w-48 h-80  bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-100 opacity-30 blur-2xl flex-none order-4 rounded-xl transform -rotate-45"></div>
  <div onMouseLeave={() => setImageFirst(welcomeImage)}>
   {installationStepsFirstSet.map((step) => (
  <div
     className="pt-6 cursor-pointer text-sm sm:text-base"
     onMouseEnter={() => setImageFirst(step.image)}
     key={step.id}
    >
    <p className="text-[#98A2B3] font-semibold">
    {step.id}. {step.header}
    </p>
    <p className="text-[#F9FAFB] pt-2">{step.description}</p>
 </div>
                  ))}
</div>
</div>
   <div className="relative w-full flex justify-center align-middle xl:w-1/2">
     <div className="absolute z-30 top-5 w-48 h-52 xl:w-[600px] xl:h-[450px] bg-[#98A2B3] opacity-30 blur-2xl flex-none order-4 rounded-full"></div>
     <div className="z-50 flex align-middle rounded-xl m-2">
      <img className="w-full object-contain rounded-lg" src={imageFirst} />
     </div>
   </div>
</div>
</div>
// Similar Set section Code

Here's the explanation of the code :

  1. We defined a JSX is wrapped in a <div> element with the id set to "installation" and some CSS classes for styling purposes.

  2. Within the component, we defined the JSX structure which is divided into two main sections for the first and second sets of installation steps.

  3. In the first section, we created a <div> elements containing another div's for the left side content and the right side content.

  4. Inside the left side <div>, we created a paragragh tag (<p>) element for the title, a <p> element for the description of the installation guide and an <img> element that displays the image corresponding to the currently selected step. The image source is controlled by the imageFirst state variable.

  5. The installationStepsFirstSet array is mapped over to render each step as a <div>. The onMouseEnter event is used by us to update the imageFirst state variable with the corresponding image when a step is hovered over.

Similar Steps were carried out to created another set of InstallationSteps.

tip

Using this Syntax of Javascript Language, Multiple Sets can be created as per your Requirements.

After implementing all components, the Installation Steps Component can be scene like this :

Installation Steps Set 1
Installation Steps Set 2

In this page, we saw how the Installation Steps section was put together. Let's go on towards the next stage,the Verify Downloads Section , to see how the component was implemented.

+ + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/navbar/index.html b/docs/projects/tcet-linux-website/frontend-components/navbar/index.html index af978b22..f10a9612 100644 --- a/docs/projects/tcet-linux-website/frontend-components/navbar/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/navbar/index.html @@ -9,8 +9,8 @@ - - + +
@@ -20,8 +20,8 @@ -

Navbar

The Navbar is an informative element of the TCET Linux Website. It is located at the top of page and contain TCET OpenSource logo and links to important sections such as Download, About us, Get started and Documention. A well-designed navbar is a critical component of any website, facilitating smooth and intuitive navigation for users, therefore we have created a Navbar that enhances the user experience, adapts to different devices and ensures accessibility.

Here's how we implemented the navbar:

  1. Opening the "Navbar.jsx"file.

  2. This is a React component called Navbar implemented by us that represents a navigation bar elements with responsive behavior. Inside the component, we have defined an Array called navlinks that contains objects representing different navigation links.

    Navbar.jsx
        const navlinks = [
           {
            title: "Download",
            link: "/#download",
                              },
           {
            title: "Documentation",
            link: "https://opensource.tcetmumbai.in/docs/projects/tcet-linux/about-tcet-linux",
            newtab: true
                             },
           {
            title: "About Us",
            link: "https://opensource.tcetmumbai.in/docs/about-tcetopensource",
            newtab: true
                              },
                        ]
           // futher code

    • Each object has a title and a link property.

    • LINE 9 and 14 contains a newtab property, indicating whether the link should be opened in a new tab.

tip

In the same way, we can add another title and link property to get more icon on the Navbar.

  1. Open is a state variable defined by us and its corresponding setter function setOpen used to indicate whether the menu is opened or closed. HandleMenu function, which is triggered when the menu button is clicked and logs the current value of open to the console.

    Navbar.jsx
            // Array defination  
            const [open, setOpen] = useState(false);
            const handleMenu = () => {
            setOpen((prev) => !prev);
            console.log(open);};

  2. The outermost element is a <div> representing the background color and font family. Inside the main <div>, there are another <div> elements for responsive styling. This <div> contains the actual navigation bar elements. The navigation bar consists of three sections: logo, navlinks, and hamburger menu.

    Navbar.jsx
             // state variable
              <div className='bg-[#101828] font-sans'>
              <div className="mx-auto  px-4 sm:px-6 lg:px-8">
                  <div className="flex items-center justify-between h-16">
             // Logo code
info

The array and state variable is created to run datamap function ahead, so the code length can be shortened which is easy to understand and use. Refer the Navbar.jsx file.

Logo Section​

This section contains the logo of TCET OpenSource Organisation in the navbar.

  1. We have created a <div> element.

  2. we Imported the logo by using href tag from the root folder where image is stored.

    Navbar.jsx
       // state variable
          <div className='bg-[#101828] font-sans'>
          <div className="mx-auto  px-4 sm:px-6 lg:px-8">
             <div className="flex items-center justify-between h-16">
                <div className="flex items-center">
                  <a href='/' className='text-white'>
                     <img src="tcet-opensource-logo.svg" alt="TCET Open Source Logo" srcSet="" />
                  </a>
                </div>
       // Other section code
tip

The logo can be updated by changing href pathlink or the image in that path.

This section consists of Navlinks of the Navbar of TCET Linux website.

  1. We have used Data map function which is a Advanced Data Structure linked to the Navlinks array created above.

  2. The Mapping function iterates over the navlinks array and creates an a tag for each link.

    • The link's href attribute is set to the corresponding link property of the navlinks object.

    • If the newtab property is true, which opens the link in a new tab.

    • Each link has additional styling classes for hover effects and rounded corners.

    • Line 2-15 shows the above data map code .

  3. We created a Get Started icon using <button> which hovers the user to Installation Guide

    • Line 16-21 shows the above getting started button.
    Navbar.jsx
        //Logo code  
          <div className="hidden md:flex">
            <div className="text-base 2xl:text-lg ml-10 flex items-baseline space-x-2">
              {navlinks.map((link, index) => (
                <a
                  key={index}
                  className="text-[#E4E7EC] transition-all duration-500 hover:bg-[#475467] hover:text-[#E0EAFF] px-2 py-1 rounded-md text-md font-medium"
                  href={link.link}
                  target=
                    {
                     link.newtab?"_blank":""
                    }
                   >
                   {link.title}
                </a>
                    ))}
                    <div className="!ml-8 border-2 border-[#475467] rounded-lg">
                     <button className="inline-flex items-center text-[#E0EAFF] border-1 border-white py-1 px-2 focus:outline-none rounded md:mt-0 hover:bg-[#475467] hover:text-[#E0EAFF] text-base 2xl:text-lg"><a href='/#installation'>Get Started</a>
                        </button>
                    </div>
            </div>
          </div>

Hamburger Section​

  1. The Hamburger menu section is hidden on larger screens.

  2. It contains a <button> with an event handler (onClick) set to the HandleMenu function.

  3. The <button> toggles the value of open and displays either the menu icon or the close icon based on the value of open.

    Navbar.jsx
         <div className="-mr-2 flex md:hidden">
             <button
              type="button"
              onClick={handleMenu}
              className='inline-flex items-center justify-center p-2 rounded-lg text-white hover:ring-white focus:outline-none focus:ring-2 focus:rig-offset-2 focus:ring-offset-white focus:ring-white'
             >
             <span className="sr-only">Open main menu</span>
               {open === true ? <FaTimes /> : <FaBars />}
             </button>
                 </div>
                 </div>
         </div>

Mobile View Section​

  1. This code is written by our team to make the Navbar adjustable according to the Mobile view of the user.

  2. Following the navigation bar, there is a conditional rendering statement.

    • If open is true, a mobile version of the navigation menu is displayed.

  3. We created a <div> with specific styling for mobile screens.

    • Inside this <div>, there is a Mapping function similar to the one in the `navlinks section``, but the styling is adjusted for mobile.
    Navbar.jsx
        {open ? (
         <div className='flex flex-col  md:hidden'>
            <div className="px-2 pt-1 pb-3 space-y-1 sm:px-3">
              {navlinks.map((link, index) => (
                <a
                 key={index}
                 className="text-center cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                 href={link.link}
                >
                 {link.title}
                </a>
                ))}
                <a href='/Get Started' className="text-center cursor-pointer text-[#E0EAFF] hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Get Started
                </a>
                    </div>
                </div>
            ) : null}
tip

To see how we added Logo, Navlinks and Hamburger on the Navbar, refer Navbar.jsx file from the TCET Linux Website repository.

After adding all components, the Navbar Desktop View can be scene like this :

Navbar Section
Mobile Navbar Section

With this, the Navbar Section was succesfully executed! Let's move on and see how we created the Footer Section of the TCET Linux Website.

- - +

Navbar

The Navbar is an informative element of the TCET Linux Website. It is located at the top of page and contain TCET OpenSource logo and links to important sections such as Download, About us, Get started and Documention. A well-designed navbar is a critical component of any website, facilitating smooth and intuitive navigation for users, therefore we have created a Navbar that enhances the user experience, adapts to different devices and ensures accessibility.

Here's how we implemented the navbar:

  1. Opening the "Navbar.jsx"file.

  2. This is a React component called Navbar implemented by us that represents a navigation bar elements with responsive behavior. Inside the component, we have defined an Array called navlinks that contains objects representing different navigation links.

    Navbar.jsx
        const navlinks = [
           {
            title: "Download",
            link: "/#download",
                              },
           {
            title: "Documentation",
            link: "https://opensource.tcetmumbai.in/docs/projects/tcet-linux/about-tcet-linux",
            newtab: true
                             },
           {
            title: "About Us",
            link: "https://opensource.tcetmumbai.in/docs/about-tcetopensource",
            newtab: true
                              },
                        ]
           // futher code

    • Each object has a title and a link property.

    • LINE 9 and 14 contains a newtab property, indicating whether the link should be opened in a new tab.

tip

In the same way, we can add another title and link property to get more icon on the Navbar.

  1. Open is a state variable defined by us and its corresponding setter function setOpen used to indicate whether the menu is opened or closed. HandleMenu function, which is triggered when the menu button is clicked and logs the current value of open to the console.

    Navbar.jsx
            // Array defination  
            const [open, setOpen] = useState(false);
            const handleMenu = () => {
            setOpen((prev) => !prev);
            console.log(open);};

  2. The outermost element is a <div> representing the background color and font family. Inside the main <div>, there are another <div> elements for responsive styling. This <div> contains the actual navigation bar elements. The navigation bar consists of three sections: logo, navlinks, and hamburger menu.

    Navbar.jsx
             // state variable
              <div className='bg-[#101828] font-sans'>
              <div className="mx-auto  px-4 sm:px-6 lg:px-8">
                  <div className="flex items-center justify-between h-16">
             // Logo code
info

The array and state variable is created to run datamap function ahead, so the code length can be shortened which is easy to understand and use. Refer the Navbar.jsx file.

Logo Section​

This section contains the logo of TCET OpenSource Organisation in the navbar.

  1. We have created a <div> element.

  2. we Imported the logo by using href tag from the root folder where image is stored.

    Navbar.jsx
       // state variable
          <div className='bg-[#101828] font-sans'>
          <div className="mx-auto  px-4 sm:px-6 lg:px-8">
             <div className="flex items-center justify-between h-16">
                <div className="flex items-center">
                  <a href='/' className='text-white'>
                     <img src="tcet-opensource-logo.svg" alt="TCET Open Source Logo" srcSet="" />
                  </a>
                </div>
       // Other section code
tip

The logo can be updated by changing href pathlink or the image in that path.

This section consists of Navlinks of the Navbar of TCET Linux website.

  1. We have used Data map function which is a Advanced Data Structure linked to the Navlinks array created above.

  2. The Mapping function iterates over the navlinks array and creates an a tag for each link.

    • The link's href attribute is set to the corresponding link property of the navlinks object.

    • If the newtab property is true, which opens the link in a new tab.

    • Each link has additional styling classes for hover effects and rounded corners.

    • Line 2-15 shows the above data map code .

  3. We created a Get Started icon using <button> which hovers the user to Installation Guide

    • Line 16-21 shows the above getting started button.
    Navbar.jsx
        //Logo code  
          <div className="hidden md:flex">
            <div className="text-base 2xl:text-lg ml-10 flex items-baseline space-x-2">
              {navlinks.map((link, index) => (
                <a
                  key={index}
                  className="text-[#E4E7EC] transition-all duration-500 hover:bg-[#475467] hover:text-[#E0EAFF] px-2 py-1 rounded-md text-md font-medium"
                  href={link.link}
                  target=
                    {
                     link.newtab?"_blank":""
                    }
                   >
                   {link.title}
                </a>
                    ))}
                    <div className="!ml-8 border-2 border-[#475467] rounded-lg">
                     <button className="inline-flex items-center text-[#E0EAFF] border-1 border-white py-1 px-2 focus:outline-none rounded md:mt-0 hover:bg-[#475467] hover:text-[#E0EAFF] text-base 2xl:text-lg"><a href='/#installation'>Get Started</a>
                        </button>
                    </div>
            </div>
          </div>

Hamburger Section​

  1. The Hamburger menu section is hidden on larger screens.

  2. It contains a <button> with an event handler (onClick) set to the HandleMenu function.

  3. The <button> toggles the value of open and displays either the menu icon or the close icon based on the value of open.

    Navbar.jsx
         <div className="-mr-2 flex md:hidden">
             <button
              type="button"
              onClick={handleMenu}
              className='inline-flex items-center justify-center p-2 rounded-lg text-white hover:ring-white focus:outline-none focus:ring-2 focus:rig-offset-2 focus:ring-offset-white focus:ring-white'
             >
             <span className="sr-only">Open main menu</span>
               {open === true ? <FaTimes /> : <FaBars />}
             </button>
                 </div>
                 </div>
         </div>

Mobile View Section​

  1. This code is written by our team to make the Navbar adjustable according to the Mobile view of the user.

  2. Following the navigation bar, there is a conditional rendering statement.

    • If open is true, a mobile version of the navigation menu is displayed.

  3. We created a <div> with specific styling for mobile screens.

    • Inside this <div>, there is a Mapping function similar to the one in the `navlinks section``, but the styling is adjusted for mobile.
    Navbar.jsx
        {open ? (
         <div className='flex flex-col  md:hidden'>
            <div className="px-2 pt-1 pb-3 space-y-1 sm:px-3">
              {navlinks.map((link, index) => (
                <a
                 key={index}
                 className="text-center cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                 href={link.link}
                >
                 {link.title}
                </a>
                ))}
                <a href='/Get Started' className="text-center cursor-pointer text-[#E0EAFF] hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Get Started
                </a>
                    </div>
                </div>
            ) : null}
tip

To see how we added Logo, Navlinks and Hamburger on the Navbar, refer Navbar.jsx file from the TCET Linux Website repository.

After adding all components, the Navbar Desktop View can be scene like this :

Navbar Section
Mobile Navbar Section

With this, the Navbar Section was succesfully executed! Let's move on and see how we created the Footer Section of the TCET Linux Website.

+ + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/tech-stacks/index.html b/docs/projects/tcet-linux-website/frontend-components/tech-stacks/index.html index c7e90117..c98d14c3 100644 --- a/docs/projects/tcet-linux-website/frontend-components/tech-stacks/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/tech-stacks/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Tech Stacks

Astro is an open-source framework for generating web applications on top of popular UI frameworks like React, Preact, Vue, or Svelte. It offers a modern and flexible approach to web development, enabling developers to create fast, scalable, and engaging websites and applications. Read More

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. It is a versatile CSS framework that offers a pragmatic and efficient approach to web development.
Read More

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps. Read More

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. Read More

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/frontend-components/verify-downloads/index.html b/docs/projects/tcet-linux-website/frontend-components/verify-downloads/index.html index f6b36468..b9dcd4bc 100644 --- a/docs/projects/tcet-linux-website/frontend-components/verify-downloads/index.html +++ b/docs/projects/tcet-linux-website/frontend-components/verify-downloads/index.html @@ -9,8 +9,8 @@ - - + +
@@ -24,7 +24,7 @@ It includes headings, containers, buttons and elements with specific classes for styling purposes. Content Section of Verify Section can be visited.

Background & Title​

The <div> element has an "id attribute" set to "verify". The <p> element contains the heading "Verify Your Download." Both the element has classes for background color and padding for the section and styling, alignment, text size respectively.

VerifyDownloads.astro
      // Import Component
      <div id="verify" class="bg-[#101828] p-4 px-10 lg:px-20">
                <p
                  class="font-title text-center text-[#FCFCFD] text-2xl md:text-4xl pt-2 pb-2" >
                  Verify Your Download
                </p>
        // Step 1 Section
        </div>

Step 1​

  1. The first <div> element represents a container. It consists of <p> element contains the text "Steps 1:".

  2. {stepOne.map((step) => ( ... ))} is a JavaScript expression that maps over the stepOne array to dynamically generate elements based on its contents.

  3. The <p> element wraped inside two div elements displays the "name" of the operating system associated with the current step.

  4. Similar <p> and div element displays the "description", "downloadable file name".

  5. <CopyToClipboard/> is a custom component that provides a copy-to-clipboard functionality for a particular file.

    VerifyDownloads.astro
                // Import Component
           <div class="bg-[#1D2939] w-fit m-4 p-2 rounded-2xl">
              <p class="text-[#FFFFFF] w-max ">Steps 1:</p>
            </div>
            <div class="flex mt-6 flex-col xl:flex-row md:flex-row">
                {
                      stepOne.map((step) => (
                      <div  class="m-4 rounded-2xl  mt-2 mb-2 bg-[#1D2939]">
                      <div class="p-4 rounded-t-xl">
                      <p class="font-title text-[#FCFCFD] text-xl md:text-2xl pt-2 pb-2">
                      {step.nameOfOS}
                      </p>
                      <p class="text-[#E4E7EC]">{step.description}</p>
                      </div>
                      <div
                      class="w-full relative mt-2 overflow-hidden" >
                      <div class="absolute top-0 left-0 verifyDownloadGradient h-20 w-full" />
                      <span class="w-full h-fit flex justify-around align-middle p-3 ">
                      <p class="text-[#E4E7EC] flex-1 mt-1 break-all">
                      {step.downloadableFileName}
                      </p>
                     <CopyToClipboard client:load text={step.downloadableFileName} />
                     </span>
                     </div>
                     </div>
          ))
             // Similarly more cards were added here
              }

Step 2​

  1. The first <div> element represents a container. It consists of <p> element containing the text "Steps 2".

  2. The <p> inside <div> element contains a description explaining the purpose of the verification process. Similar steps were carried out for SHA256SUMS information, file name and to display key.

    VerifyDownloads.astro
         <div class="pt-4">
             <div class="bg-[#1D2939] w-fit m-4 p-2 rounded-2xl">
               <p class="text-[#FFFFFF] w-max">Steps 2:</p>
             </div>
             <div class="w-full mt-6">
               <p class="text-[#FFFFFF] ml-4 mb-4">
                   In all the above cases, if the returned value matches with the sha256sum given below, your download is authentic.
               </p>
               <div class="m-4 rounded-2xl mt-2 mb-2 bg-[#1D2939]">
                   <div class="p-4 rounded-t-xl">
                     <p class="font-title text-[#FCFCFD] text-xl md:text-2xl pt-2 pb-2">
                       SHA256SUMS Below:
                     </p>
                     <p class="text-[#E4E7EC]">IMAGE: tcetlinux-2023.05. 05-x86_64.iso</p>
                     </div>
                          {
                        /* bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-300 opacity-100 rounded-b-xl */
                        }
                     <div class="w-full relative mt-2  overflow-hidden rounded-b-xl" >
                       <div class="absolute top-0 left-0 bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-300 rounded-b-xl h-24 w-full opacity-50 blur-lg pointer-events-none" >
                       </div>
                       <span class="z-20 w-full h-auto flex justify-around align-middle p-3 " >
                         <p class="text-[#E4E7EC] flex-1 mt-1 break-all">
                           cb9257aea691441a0a7c628b8cc199d7746220651daf035d261c6670ac1a2f49
                         </p>
                         <CopyToClipboard client:load text= {"cb9257aea691441a0a7c628b8cc199d7746220651daf035d261c6670ac1a2f49"} />
                       </span>
                     </div>
                   </div>
                </div>
             </div>
           </div>

Verification Explanation​

This <div> element represents a container for the verification explanation section. This <img> element displays an "image (an info icon)". The <p> element contains the explanation text for the verification process.

VerifyDownloads.astro
      <div class="pt-4">
          <div class="flex bg-[#1D2939] border-2 border-[#344054] rounded-xl m-4 p-4">
              <img src={infoIconImg} class="w-4 h-4 object-contain mt-1" />
                  <p class="text-[#D0D5DD] ml-2">
                      IMAGE is <code>iso-name.iso</code> in <b>step 1</b>. It is the file that you have downloaded. Verification is done to check the authenticity of the file you have downloaded. Large files may get corrupted in the download process. TCET Linux team provides a new checksum for every new release of the operating system.
                  </p>
          </div>
      </div>

Above steps give the following output:


TCET Linux- Verify Section

tip

You can visit

  1. Verification Section of the TCET Linux website
  2. VerifyDownloads.astro

The Verification Section of Home Page was succesfully executed! You can visit the TCET Linux Website to see the output of the code.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux-website/getting-started/index.html b/docs/projects/tcet-linux-website/getting-started/index.html index d401bb91..cc21cdfe 100644 --- a/docs/projects/tcet-linux-website/getting-started/index.html +++ b/docs/projects/tcet-linux-website/getting-started/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Getting Started

info

TCET Linux is an operating software made while keeping all the important aspects of engineering in mind for the students at the college.

Steps to run the site on your local system:​

These are the steps you need to follow to get this site on your local system.

Install Git in your computer​

Follow these steps to install git in your computer.

  1. Go to https://git-scm.com/downloads.
  2. Click on Windows. Download should start.
  3. Go to downloads and install the package.

Clone the repo​

Open Git Bash in any folder and paste the following command

git clone https://github.com/tcet-opensource/tnp-website

Install NodeJS​

  1. Go to https://nodejs.org/en/download
  2. Select Current.
  3. Download the 64-bit .msi version. Follow the steps and install NodeJS.
note

It is important to have NodeJS in your system

Open the folder in VS Code​

  1. Install VS Code if not installed.
  2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

Install Important Packages/Dependencies​

Install yarn globally 

npm install -g yarn

You can make changes to your respective files and changes will be shown once you have saved the file.

Commands used to run locally​

  1. To run the commands, make sure that you have installed yarn globally first.
  2. All commands are run from the root of the project, from a terminal

Here are a set of commands used to run locally:

CommandAction
yarnInstalls dependencies
yarn devStarts local dev server at localhost:3000
yarn buildBuild your production site to ./dist/
yarn previewPreview your build locally, before deploying
yarn astro ...Run CLI commands like astro add, astro check
yarn astro --helpGet help using the Astro CLI

Steps to run after a Pull / Merge:​

  1. To install all dependencies
yarn
  1. To run local dev environment
yarn dev
- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/about-tcet-linux/index.html b/docs/projects/tcet-linux/about-tcet-linux/index.html index 9f952ce6..cbf28c30 100644 --- a/docs/projects/tcet-linux/about-tcet-linux/index.html +++ b/docs/projects/tcet-linux/about-tcet-linux/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

About TCET Linux

TCET Linux is GNU/Linux distribution, based on Arch Linux built for enhancing college infrastructure and promoting Linux in software engineering education.

Whats Offered in TCET Linux:​

1) Desktop Environment (XFCE): TCET Linux uses the XFCE desktop environment, known for its lightweight and intuitive design. Customize your desktop, panels, and appearance to suit your preferences.

2) Thunar File Manager: Manage your files efficiently with Thunar, a user-friendly file manager. Learn keyboard shortcuts and file operations for a seamless experience.

3) Terminal Theme (Starship): TCET Linux features the Starship prompt, enhancing your terminal experience with useful information and a clean, modern look.

4) Default Browser (Mozilla Firefox): Browse the web with Mozilla Firefox, a fast and privacy-focused web browser.

5) Basic System Usage: Familiarize yourself with system navigation, file manipulation, software installation, and package management using Pacman.

6) Customizing TCET Linux: Tailor your system to your liking by changing themes, icons, and installing additional software packages through the pacman package manager.

7) Application Manager: Gives you to choose which software should be installed in your system. So that, you can tailor your system with your choices of softwares.

Community and Support​

Join the TCET Linux Discussion Group to connect with other users, and seek help.

Contributing to TCET Linux

Interested in contributing to TCET Linux development? Check our development guidelines, learn how to submit patches, and explore opportunities to join the TCET Linux team.

tip

You can visit to some learning resources listed on Resource Page of TCET Linux documentation.

Appendices

  • About TCET Linux: A brief overview of TCET Linux.

  • Idea for creating TCET Linux: A motivation and idea for creating TCET Linux.

  • Variants: TCET Linux Variant.

  • Releases: Releases and Verions Information for TCET Linux.

  • Installation Steps: Installation Steps and Troubleshooting while Installation.

  • Guides: Basic Guide, Application Guide and Application Troubleshooting.

  • Contribute to TCET Linux: Contribution guide for TCET Linux.

  • Resources: Resources referred and used for development of TCET Linux.

  • ISO Profile: ISO Profile of TCET Linux.

  • References and Credits: List of all References and Credits for TCET Linux.

TCET Linux empowers users with a powerful, flexible, and efficient Linux distribution tailored to diverse needs. With this documentation, you have the resources to harness the full potential of TCET Linux and embark on a journey of exploration, customization, and productivity. Welcome to the TCET Linux community!

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/contribute-tcet-linux/index.html b/docs/projects/tcet-linux/contribute-tcet-linux/index.html index 0a7f55b5..bc5c318b 100644 --- a/docs/projects/tcet-linux/contribute-tcet-linux/index.html +++ b/docs/projects/tcet-linux/contribute-tcet-linux/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

Contribute to TCET Linux

TCET Linux is one of the most active projects under TCET Open Source and there are multiple ways through which you can contribute to it.

Pre-requisites-​

Be familiar with Linux as an operating system and have hands-on experience with using Linux on your system. You can do this by trying to run Linux commands and understanding the file system. For an ultimate beginner, Ubuntu is the right one where you should start first.

Apart from it, for all the code and non - code contributions, one should have enough knowledge about Version Control, Git and GitHub.

Contributions to the Code-​

Programming Languages like Python, are the most used while developing TCET Linux. Depending on the area that you want to contribute to, be well versed in the development using the same language. For the first few contributions, try finding out small bugs and work on basic issues. You can also try with Low-Code Contributions about which we've discussed below.

Open Source Community is made for the public, that is you; and hence you can always raise your queries on several platforms and comment on the issue through your GitHub account. Apart from this, read the documentation and guidelines appropriately before starting to contribute.

In the Resources section on our documentation website, Internal and External workflow has been shared, do have a look at it.

Low-Code and No-Code Contributions-​

For a variety of desktop appearances of TCET Linux and to make it better, you can add wallpapers and improve the graphics. UI/UX is one such domain where you can always explore, not only in TCET Linux but also in a wide number of open source projects. Documentation is another rescue for all the non-code contributors. From fixing language and grammar to improving the docs and blogs section, you can easily contribute here. We would recommend that you understand Markdown and Docusauras well enough for contributing in documentation.

tip

Join the TCET Linux Discussion Channel in our discord server to connect with fellow users, report bugs, and seek help. You can as for help for contributing in TCET Linux.

Code always evolves and so should your knowledge, keep exploring different techstacks, and happy contributing! 😉

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/alias-commands/index.html b/docs/projects/tcet-linux/guides/alias-commands/index.html index 504df414..3b230bb1 100644 --- a/docs/projects/tcet-linux/guides/alias-commands/index.html +++ b/docs/projects/tcet-linux/guides/alias-commands/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Alias Commands

Explore the world of TCET Linux! Learn how to create and remove aliases, and get familiar with the default aliases for an enhanced user experience.

Create Alias​

To create the alias, use the alias command followed by the keyword you want to use with a equal sign (=), and the command you want to associate with the alias, enclosed in single quotes or double quotes. Hence as a result the keyword will get mapped with the commmand. Here's an example for creating an alias for listing files and directories:

alias LA='ls -la'

Remove Alias​

To remove an alias, use the unalias command followed by the alias name you used to map the command with keyword. For example, to remove the LA alias:

unalias LA
Add & Remove Alias Example

All Alias Commands​

Below is the list and documentation of all the aliased commands installed by default in the TCET Linux. Some commands use the comman command word sudo and pacmank, the breakdown of the commands are as follows:

  • sudo: This is used to run the command with superuser privileges, allowing you to install packages system-wide.
  • pacman: This is the package manager for Arch Linux and its derivatives.

Autoremove​

To remove packages along with their dependencies that are no longer required, you can use the following command:

autoremove package_name

OR

sudo pacman -Rns package_name

The sudo pacman -Rns command is used to remove packages and their dependencies, including packages that are no longer required by any other installed packages. Here's the breakdown of the command:

  • -R: This flag specifies that you want to remove a package.
  • -n: This flag tells pacman to remove only packages that are no longer required by any other installed packages (orphans).
  • -s: This flag instructs pacman to remove package dependencies as well.

However, use it with caution as it may affect your system's stability if you remove packages that are still required for other software to function properly.

Clear Cache​

To clear the package cache and free up disk space, you can use the following command:

clr-cache

OR

sudo pacman -Scc

The sudo pacman -Scc command is used to clear the package cache on your system, which can help free up disk space. Here's an explanation of the command:

  • -Scc: These flags together specify that you want to clear the package cache.

Running sudo pacman -Scc will prompt you to confirm the removal of all cached package files. Clearing the cache can be useful to free up disk space but should be done with care, especially if you might need to reinstall packages in the future.

Fix Keys​

If you encounter issues with GPG keys, you can use the following command to reset and populate them:

fix-keys

OR

sudo rm -rvf /etc/pacman.d/gnupg && sudo pacman-key --init && sudo pacman-key --populate

The fix-keys command is a sequence of three commands that are used to address problems related to GPG (GNU Privacy Guard) keys in the context of package management. Here's the breakdown of each part of the command:

  1. sudo rm -rvf /etc/pacman.d/gnupg: This part of the command removes the GPG keyring directory located at /etc/pacman.d/gnupg. The -r flag indicates recursive removal, the -v flag stands for verbose output, and the -f flag is used to force the removal without asking for confirmation.

  2. sudo pacman-key --init: After removing the GPG keyring, this part initializes a new GPG keyring using pacman-key, which is a tool for managing PGP keys used in package management.

  3. sudo pacman-key --populate: Finally, this part of the command populates the new GPG keyring with keys from the keyserver, ensuring that it contains the necessary keys for package verification.

Running this command can help resolve issues related to GPG keys, which are essential for verifying the authenticity of packages during installation or update processes.

Grep​

To search for text patterns within files while displaying line numbers and colored output, you can use the following command:

grep "pattern" file.txt
grep -n --color "pattern" file.txt

The grep command is used for text pattern matching in files. When you run this command, you can provide additional arguments to specify the pattern you want to search for and the files in which you want to search. Replace "pattern" with the text you want to search for and "file.txt" with the name of the file in which you want to search. The command will then display matching lines with line numbers and highlighted text.

  • -n: This flag tells grep to display line numbers along with the matched lines.
  • --color: This flag enables colored highlighting for the matched text in the output, making it easier to identify.

Install​

To install packages from the official repositories, you can use the following command:

install package_name

OR

sudo pacman -S package_name

The sudo pacman -S command is used to install packages in Arch Linux-based distributions, including TCET Linux. You can replace package_name with the name of the package you want to install.

  • -S: This flag is used to specify that you want to install a package.

LL​

To list files and directories in a directory with colored output, human-readable file sizes, and details, you can use the following command:

ll

OR

ls --color=auto -lah

The ll command is a variation of the ls command used for listing files and directories in a directory. Running this command in a directory will display a detailed and color-coded list of files and directories, including hidden ones, with human-readable file sizes. Here's an explanation of the flags used:

  • --color=auto: This flag enables colored output, but it only applies color when the output is directed to a terminal, not to a file or another program.
  • -lah: These flags are used for listing files and directories with specific details:
    • -l: This flag tells ls to use a long listing format, displaying additional information such as permissions, ownership, file size, and modification date.
    • -a: This flag includes hidden files and directories (those starting with a dot, like .config) in the listing.
    • -h: This flag makes file sizes human-readable, displaying sizes in a more easily understandable format (e.g., "2.3M" instead of bytes).

Local Install​

To install local packages (packages not from the official repositories), you can use the following command:

local-install package.tar.zst

OR

sudo pacman -U package.tar.zst

The sudo pacman -U command is used to install packages in Arch Linux-based distributions, from local files or URLs. You would typically use this command to install packages that you have downloaded manually or obtained from sources other than the official repositories. For example, to install a package with the filename "package.tar.zst" located in your current directory, you would use the aliased command. Here's a brief explanation of the command:

  • -U: This flag is used to specify that you want to install a package from a local file or a URL.

LS​

To list files and directories in a directory with colored output based on file type, you can use the following command:

ls

OR

ls --color=auto

The ls command used for listing files and directories in a directory with colored output. Running this command in a directory will display a list of files and directories with color-coded formatting based on their types, making it easier to distinguish between different types of files. Here's an explanation of the flag used:

  • --color=auto: This flag enables colored output, but it only applies color when the output is directed to a terminal, not to a file or another program.

Package Info​

To obtain detailed information about a specific package installed on your system, you can use the following command:

pkg-info package_name

OR

sudo pacman -Qi package_name

The sudo pacman -Qi command is used to query information about a package. Replace package_name with the name of the package you want to obtain information about. This command will display detailed information about the specified package, including its version, description, installation status, and more.

Remove​

To remove packages from your system, you can use the following command:

remove package_name

OR

sudo pacman -R package_name

The sudo pacman -R command is used to uninstall packages. Replace package_name with the name of the package you want to remove. This command will prompt you to confirm the removal of the specified package. After confirmation, the package will be uninstalled from your system. This command will not remove the dependencies of the package. To remove the package with the dependencies use autoremove command.

Run Help​

To access manual pages for various commands and get detailed help and documentation, you can use the man command.

run-help command_name

OR

man command_name

Replace command_name with the name of the command or utility for which you want to access the manual page. The man command opens a page that displays the manual page, providing comprehensive information about the command's usage, options, and functionality. It's a valuable resource for learning how to use and understand various commands on your TCET Linux system. You can navigate through the manual page using keyboard commands like arrow keys and the "q" key to exit the pager.

To search for packages available in the official repositories that match a specific search query or keyword, you can use the following command:

search search_query

OR

sudo pacman -Ss search_query

The sudo pacman -Ss command is used to search for packages in Arch Linux-based systems. Replace search_query with the term you want to search for. This command will display a list of packages that match the search query, including their names and descriptions.

Search Local​

To search for packages installed on your system that match a specific search query or keyword, you can use the following command:

search-local search_query

OR

sudo pacman -Qs search_query

The sudo pacman -Qs command is used to search for installed packages. Replace search_query with the term you want to search for. This command will display a list of installed packages that match the search query, including their names and descriptions.

Sync​

Before installing or updating packages, it is recommended to synchronize your package database. You can achieve this by using the following command:

sync

OR

sudo pacman -Syyy

The sudo pacman -Syyy command is used to refresh the package databases with a full refresh. Here's the breakdown of the command:

  • The first y refreshes the sync databases, updating the package list from the repositories.
  • The second y refreshes the package lists again, checking for new versions of packages.
  • The third y refreshes the package lists a final time, ensuring that all databases are up to date.

Running this command helps ensure that your system's package information is current, allowing you to install or update packages with the most recent data from the repositories.

Unlock​

If you encounter issues related to a locked package database, you can use the following command to remove the lock:

unlock

OR

sudo rm /var/lib/pacman/db.lck

The sudo rm /var/lib/pacman/db.lck command is used to remove the lock file associated with the package database in Arch Linux-based systems, including TCET Linux. The lock file (db.lck) is created when a package management operation is in progress, and it prevents multiple package operations from occurring simultaneously to avoid conflicts.

Running this command is a way to unlock the package database if you believe it is locked incorrectly or if a package operation was interrupted or stalled. Be cautious when using this command and ensure that no other package operations are currently in progress before removing the lock.

Update​

To update the package databases and upgrade installed packages to their latest versions, you can use the following command:

update

OR

sudo pacman -Syyu

The sudo pacman -Syyu command is used for updating the system in Arch Linux-based systems.

  • -Syyu: These flags together specify that you want to synchronize the package databases (-Syy) and upgrade all installed packages (-u).

Running this command will refresh the package databases (-Syy) to ensure they are up to date and then upgrade (-u) all installed packages to their latest available versions. It's an essential command to keep your system software current and secure.

Version​

To display version information about your operating system based on the contents of the /etc/os-release file, you can use the following command sequence:

version

OR

sed -n 1p /etc/os-release && sed -n 7p /etc/os-release && sed -n 8p /etc/os-release

The sed command is used for stream editing and manipulation. Here's how the command sequence works:

  • sed -n 1p /etc/os-release: This part extracts and prints the first line of the /etc/os-release file, which typically contains the operating system's name and version.

  • sed -n 7p /etc/os-release: This part extracts and prints the seventh line of the /etc/os-release file, which often contains version-specific information.

  • sed -n 8p /etc/os-release: This part extracts and prints the eighth line of the /etc/os-release file, which often contains additional version or build information.

Running this command sequence will provide you with version-related information about your operating system based on the /etc/os-release file. It can be helpful for quickly checking your system's version details.

Which Command​

To find the location of a command in your system's PATH, you can use the whence command:

which-command command_name

OR

whence command_name

Replace command_name with the name of the command you want to locate. The whence command will display the full path to the executable of the specified command if it exists in your system's PATH.

All Default Installed Alias Commands
tip

You can visit on some learning resources listed on Resource Page of TCET Linux documentation.


The Alias Command was succesfully executed! Let's move on and see how we do System Maintenance of TCET Linux.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/application/getting-started-with-application/index.html b/docs/projects/tcet-linux/guides/application/getting-started-with-application/index.html index 799e4f07..21925489 100644 --- a/docs/projects/tcet-linux/guides/application/getting-started-with-application/index.html +++ b/docs/projects/tcet-linux/guides/application/getting-started-with-application/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Applications Guide

TCET Linux comes pre-loaded with a variety of applications to enhance your computing experience. Whether you're a beginner or an advanced user, these applications cover a wide range of tasks. Let's explore how to get started with them

Here are some examples of applications that are pre-installed and some optional applications in TCET Linux:

Welcome App​

Our system has welcome application which greets you and provide you menu for some most required features like install system, update system, fix screen resolution, update mirrors and many more.

Application Installer​

We provide a list of software in our software installer and by just selecting the required software those application will get installed in your TCET Linux system. This application installer is displayed in your application menu and also when you are installing the fresh TCET Linux system using bootable pendrive or installing the fresh system in your virtual machine. Hence, you can install any software provided in the list by just selecting and clicking the "Install" button

Web Browser​

Firefox is the default web browser in TCET Linux. Open it from the Applications Menu to browse the web and access online resources.

Office Suite​

LibreOffice provides a powerful office suite, including applications like Writer, Calc, and Impress. Create and edit documents, spreadsheets, and presentations. Many peoples dont require this software hence it is not being pre-installed we give you an option in our Application Installer and you can select to install LibreOffice in your system.

Code Editor​

Visual Studio Code (VS Code) is a powerful and versatile code editor that is not pre-installed in TCET Linux as many user dont require it. However, you can easily install it using our Application Installer

File Manager​

Thunar is the default file manager. Use it to navigate through your files, folders, and external drives.

Terminal​

Access the command line using the Terminal. This is a powerful tool for advanced users to execute commands and perform system tasks.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/application/troubleshoot-application/index.html b/docs/projects/tcet-linux/guides/application/troubleshoot-application/index.html index b9d16fb1..90ea5bce 100644 --- a/docs/projects/tcet-linux/guides/application/troubleshoot-application/index.html +++ b/docs/projects/tcet-linux/guides/application/troubleshoot-application/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Troubleshooting Applications

TCET Linux offers a range of applications and tools to enhance your computing experience. However, issues can sometimes arise. This section provides guidance on identifying and resolving common application-related problems in TCET Linux.

Application Not Launching​

If an application fails to launch, follow these steps:

  1. Check for Errors: Open a terminal and try launching the application from the command line. Look for any error messages or warnings that might provide insight into the issue.

  2. Reinstall the Application: If the application is still not working, try reinstalling it. Use the package manager, Pacman, to remove and then reinstall the application. For example:

    sudo pacman -Rns application-name
    sudo pacman -S application-name

  1. Dependency Issues: Sometimes, applications depend on specific libraries. Ensure that all necessary dependencies are installed. Use Pacman to install missing libraries if needed.

    sudo pacman -S missing-library

  2. Check for Updates: Ensure your system and the application are up-to-date. Run the following commands to update your system and the installed packages:

    sudo pacman -Syu

Slow Performance​

If you notice that applications are running slowly or consuming excessive resources, consider the following:

  1. Resource Monitoring: Open the system monitor or task manager to check which processes are consuming CPU, memory, or disk resources. Terminate any unneeded processes.

  2. Close Background Applications: Ensure that other applications running in the background are not causing performance issues. Close unnecessary applications and processes.

  3. Optimize System: Regularly maintain your TCET Linux system. Clean up temporary files, remove unnecessary packages, and optimize system services.

    sudo pacman -Sc

  4. Update Graphics Drivers: If your system has a dedicated graphics card, ensure that you have the appropriate graphics drivers installed and keep them up to date.

    sudo mhwd -a pci nonfree 0300

Application Crashes​

If an application frequently crashes or becomes unresponsive:

  1. Check for Updates: Ensure that the application is updated to the latest version. If not, update it using the package manager.

  2. Report Bugs: If the issue persists, consider reporting it to the application's developers. They may be able to provide a fix or a workaround.

  3. Check for Logs: Look for error logs in your home directory or in /var/log. These logs may contain information about the cause of the crashes.

  4. Use Alternatives: If the problem remains unresolved, consider using alternative applications that serve the same purpose.

Remember, troubleshooting may require a certain level of expertise, and it's always a good practice to back up your data before making significant changes to your system. In case you encounter complex or unique issues, consider seeking help from the TCET Linux community forums or support channels to resolve them efficiently.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/application/welcome-app/index.html b/docs/projects/tcet-linux/guides/application/welcome-app/index.html index a7ffff5b..8229fa3f 100644 --- a/docs/projects/tcet-linux/guides/application/welcome-app/index.html +++ b/docs/projects/tcet-linux/guides/application/welcome-app/index.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@

TCET Linux Welcome App

TCET Linux has a simple welcome app specifically written for TCET Linux but it can be used on Arch Linux and any Arch-based distributions. This guide will cover the features and usage of the Welcome App, installation and lastly troubleshooting common issues with the TCET Linux welcome app.

Application​

The TCET Linux Welcome App is designed to assist users in getting started with the operating system and accessing various helpful features and resources. It provides a convenient interface to access essential functions and information. Here's an overview of the Welcome App's features:

TCET Linux Welcome App

  • Update This PC

    • Ensure that your system stays up to date by using the "Update This PC" feature. This performs the full system update for your system.

  • Fix Screen Resolution

    • For users running TCET Linux, this option helps adjust the screen resolution to fit your display correctly.

  • Update Mirrors

    • Mirrors are servers from which your system downloads software packages. The "Update Mirrors" feature helps you select the fastest and most up-to-date mirrors, ensuring faster and more reliable package downloads.

  • Arch User Repository (AUR)

    • Access the Arch User Repository, a community-driven repository for Arch Linux packages. Install applications not available in the official repositories using the AUR.

  • Arch Wiki

    • Visit the Arch Wiki, a valuable resource for detailed information, tutorials, and troubleshooting related to Arch-based distributions.

  • Join Discord Server

    • Connect with the TCET Linux community on Discord. Interact with other users, seek assistance, and stay updated with discussions and announcements.

  • Contribute to TCET Linux

    • Interested in contributing to TCET Linux development? This option provides information on how to get involved with the project.

  • About Us

    • Learn more about TCET Linux, its development team, and the philosophy behind this Arch-based distribution.

  • Toggle Autostart in This App

    • This feature allows you to control whether the Welcome App automatically starts when you boot your computer. You can choose to enable or disable the autostart feature as per your preference.

By using the Welcome App, you can make the most of TCET Linux and easily access the tools and resources you need for a smooth and efficient computing experience.

Installation​

For Tcet-Linux:

You don't need to install the app as it is installed by default. But if for reason its not installed, you can install it using the following command:

install tcet-linux-welcome

OR

sudo pacman -Sy tcet-linux-welcome

For other Arch-based distributions:

You can go to Tcet Linux Repo and download the .zst file from there and install it using the following command:

sudo pacman -U <name of the zst file>

Troubleshoot​

The TCET Linux welcome app is designed to provide a helpful introduction whenever you start your computer. However, like any software, there may be instances where you encounter issues or want to customize its behavior.

Autostarting the Welcome App​

The welcome app is set to autostart by default, meaning it displays automatically when you boot up your system. You can control this behavior:

  1. Enabling Autostart:

    • If the welcome app isn't autostarting, you can ensure it's enabled by following these steps:
      • Click on the TCET Linux Applications Menu.
      • Navigate to Welcome App
      • In the TCET Linux Welcome App Click on Toggle Autostart

  2. Disabling Autostart:

    • If you prefer not to see the welcome app at startup, you can disable autostart by following these steps:
      • Click on the TCET Linux menu.
      • Navigate to Settings and select Session and Startup.
      • In the Application Autostart tab, uncheck Welcome App.

Yad and the Welcome App​

The TCET Linux welcome app is built using Yad and GTK-3.0, a utility for creating graphical dialogs in shell scripts. When you save your session and shut down or restart, Yad may appear instead of the welcome app. This behavior is expected, as Yad is the underlying tool used to create the welcome app.

Troubleshooting Common Issues​

While the welcome app generally works smoothly, there may be occasions where you encounter issues. Here are some steps to troubleshoot common problems:

  1. Welcome App Not Closing:

    • If the welcome app doesn't close as expected or remains on your screen, you can identify its process and force it to close:
      • Open a terminal.
      • Run the following command to find the process ID (PID) of the welcome app:
        pidof yad
      • Once you have the PID, terminate the process using the following command:
        killall -9 <PID>
        Replace <PID> with the actual process ID you obtained in the previous step. This will help you to turn off the Yad application.

  2. Welcome App Behavior Issues:

    • If you encounter any unexpected behavior or errors with the welcome app, it's a good idea to provide detailed information about the issue when seeking help from the TCET Linux community or support channels. Include any error messages to assist with troubleshooting.

By following these troubleshooting steps, you can effectively manage and resolve common issues related to the TCET Linux welcome app. If you encounter persistent problems or need further assistance, don't hesitate to reach out to the TCET Linux community for support.

tip
  1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.
  2. For additional help ask on the TCET Linux Discussions Channel group on TCET Linux Discord Server.

The Welcome App was successfully executed! Let's move on and see how we can Contribute to TCET Linux of TCET Linux.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/backup-restore-timeshift/index.html b/docs/projects/tcet-linux/guides/backup-restore-timeshift/index.html index ab0df1f1..dc29f8d7 100644 --- a/docs/projects/tcet-linux/guides/backup-restore-timeshift/index.html +++ b/docs/projects/tcet-linux/guides/backup-restore-timeshift/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Backup and Restore

Ensuring the safety of your TCET Linux system is paramount, and having a reliable backup solution is the key to a quick recovery in case of unexpected issues. Timeshift, a powerful backup tool, allows you to create snapshots of your system's files and settings, providing an efficient way to revert to a previous state. This guide will walk you through the process of installing, configuring, and using Timeshift for both backup and restoration on TCET Linux.

Installation of Timeshift on TCET Linux​

Before you embark on securing your system with Timeshift, ensure that it is installed. Here are the steps for installing Timeshift on TCET Linux, which is based on Arch Linux.

For Arch Linux and Derivatives​

  1. Enable AUR:

    • Timeshift is available in the Arch User Repository (AUR). Enable AUR in your package manager, or use an AUR helper like yay.
      yay -S timeshift

  2. Install Timeshift:

    • Use the AUR helper to install Timeshift on your system.

Now that Timeshift is installed, let's proceed with configuring and using it.

tip

You can see how to install yay in your TCET Linux System on Install AUR Packages of TCET Linux documentation.


Configuring Timeshift for Backup on TCET Linux​

Follow these detailed steps to set up Timeshift for creating backups on your TCET Linux system.

1. Launch Timeshift​

  • Open Timeshift from your application menu.

2. Select Snapshot Type​

  • Choose between RSync and BTRFS.
    • RSync: Recommended for systems using the default EXT4 filesystem.
    • BTRFS: Choose this only if your system uses BTRFS with an Ubuntu-type subvolume layout.

3. Select Storage Device​

  • Specify where the backups will be stored.
    • Use your computer's hard disk for automatic backups.
    • Use an external USB disk for manual backups.

4. Configure Scheduled Snapshots​

  • Set up scheduled backups with options like monthly, weekly, daily, etc.
  • Specify the number of copies to retain for each type of scheduled backup.

5. Select Files/Folders​

  • Choose which parts of your system to back up.
  • By default, user files are not backed up to avoid overwriting changes made after the backup.

6. Create the Backup​

  • After completing the setup, click on the "Create" button to initiate the backup process.
  • Monitor the progress through the provided window.

Advanced Timeshift Usage on TCET Linux​

Handpicking Files and Folders for Backup​

  • Timeshift allows you to select specific files or folders to include in the backup.
  • In Timeshift settings, go to the Filters tab and use the "Add Files/Folders" option to select additional items.

Backing Up Files with Specific Extensions​

  • If you want to backup files with specific extensions (e.g., .mp3, .pdf), Timeshift supports this.
  • In Timeshift settings, go to the Filters tab, use the "Add" button to provide extensions, and set them to be included in the backup.

Restoring Your TCET Linux System Using Timeshift​

Now, let's explore the process of restoring your TCET Linux system using the previously created Timeshift backups.

1. Restoring from the Same OS​

  • If you can still log into your TCET Linux OS and want to revert to a previous state, launch Timeshift from the menu.
  • Select a snapshot from the list and click "Restore."

2. Restoring when Unable to Log In​

  • For systems unable to log into the graphical environment, use a live Linux USB for restoration.

3. Install Timeshift in Live USB​

  • Boot into the live Linux session using a USB drive.
  • Install Timeshift in the live session.
    sudo add-apt-repository universe
    sudo apt install timeshift

4. Go through the Setup Wizard​

  • Launch Timeshift in the live session, select RSync, and choose the backup drive used previously.

5. Restore the Backup​

  • Select the backup to restore and follow the prompts to specify restore paths.
  • Let Timeshift install the bootloader again.

6. Confirmation and Completion​

  • Confirm suggested actions, acknowledge data modification warnings, and proceed with the restoration.
  • Once completed, reboot the system.

Conclusion​

In conclusion, Timeshift is a powerful tool for creating and restoring backups on your TCET Linux system. Following the steps outlined in this guide will help you safeguard your system against unforeseen issues and provide a straightforward method for recovery. Regularly creating backups is a good practice to ensure the security and stability of your TCET Linux environment.

tip

You can visit on some learning resources listed on Resource Page of TCET Linux documentation.


- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/chroot/index.html b/docs/projects/tcet-linux/guides/chroot/index.html index 5d878092..748ce672 100644 --- a/docs/projects/tcet-linux/guides/chroot/index.html +++ b/docs/projects/tcet-linux/guides/chroot/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Chroot Guide

Chroot (Change Root) is a powerful command in Unix-like systems that allows you to change the apparent root directory for a process and its children. This is particularly useful for system recovery, maintenance, and installation tasks, creating a secure and isolated environment for specific operations.

Prerequisites:​

  • Root Access: You need to be a superuser (root) to run chroot commands.

Basic Usage:​

1. Entering a Chroot Environment:​

sudo chroot /path/to/new/root

This command changes the "apparent root directory" to the specified path. Subsequent commands will operate within this new root, allowing you to access and modify files and directories as if they were the system's root.

2. Bind Mounting Essential Directories:​

Bind mounting allows accessing directories outside the chroot environment. Mount essential system directories like /proc, /dev, and /sys to ensure proper system functionality within the chroot:

sudo mount --bind /proc /path/to/new/root/proc
sudo mount --bind /dev /path/to/new/root/dev
sudo mount --bind /sys /path/to/new/root/sys

Note: Refer to your system's documentation for specific mount points and configurations.

3. Executing Commands:​

Run commands within the chroot environment as if it were the complete system's root:

sudo chroot /path/to/new/root command-to-execute

This allows you to install packages, modify system files, or perform other tasks within the isolated environment.

Performing Important Operations:​

1. Resetting a User Password:​

If you've forgotten a user password or need to reset it, you can use chroot to access the user database and change the password:

# Mount necessary directories
sudo mount --bind /proc /path/to/new/root/proc
sudo mount --bind /dev /path/to/new/root/dev
sudo mount --bind /sys /path/to/new/root/sys

# Enter the chroot environment
sudo chroot /path/to/new/root

# Change the password for the user 'username'
passwd username

# Exit the chroot environment
exit

2. Repairing a Broken System:​

In case your system is unbootable or experiencing issues, you can use chroot to repair it:

# Mount necessary directories
sudo mount --bind /proc /path/to/new/root/proc
sudo mount --bind /dev /path/to/new/root/dev
sudo mount --bind /sys /path/to/new/root/sys

# Enter the chroot environment
sudo chroot /path/to/new/root

# Perform system repair operations (e.g., reinstalling a kernel)
pacman -Syu linux

# Exit the chroot environment
exit

Advanced Usage:​

1. Setting Environment Variables:​

Set environment variables when entering the chroot for specific tasks:

sudo chroot /path/to/new/root env VAR1=value1 VAR2=value2 command-to-execute

This ensures the availability of required environment variables within the chroot.

2. Chrooting to a Different Architecture:​

To run commands in a chroot of a different architecture (e.g., 32-bit on a 64-bit system), use commands like linux32 or linux64:

sudo linux32 chroot /path/to/new/root

Replace linux32 with linux64 as needed.

Exiting the Chroot:​

To return to the original root directory:

exit

This command exits the chroot environment and restores the original root.

Conclusion:​

Chroot is a powerful tool for system administrators, developers, and users involved in system maintenance and recovery. Understanding its usage can enhance your ability to manage, install, and troubleshoot systems efficiently and securely.

Remember to always exercise caution when using chroot, as it grants access to sensitive system files. Refer to your system's documentation and specific use case for detailed instructions and configurations.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/getting-started/index.html b/docs/projects/tcet-linux/guides/getting-started/index.html index 36dcfbcd..4e5b6db5 100644 --- a/docs/projects/tcet-linux/guides/getting-started/index.html +++ b/docs/projects/tcet-linux/guides/getting-started/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Getting Started

TCET Linux is an Arch-based distribution designed to provide a user-friendly and efficient computing environment. It comes with the XFCE desktop environment and a range of pre-installed applications to enhance your computing experience. This guide will help you understand Desktop Environment, Power Options, System Controls, Delete, Trash, Wallpaper, Screenshot, Neofetch, Man Command, File System for TCET Linux system and in Arch based distributions. This is a very beginner-friendly guide that provides explanations for these topics so that you can perform your basic daily routine.

Desktop Environment​

A desktop environment is a graphical user interface (GUI) that provides a cohesive and user-friendly environment for interacting with your computer. TCET Linux uses the XFCE desktop environment, known for its simplicity and performance. XFCE offers a clean and organized interface, including a panel, application menu, and desktop icons. It allows you to customize your workspace to suit your preferences.

The desktop environment provides a user-friendly and efficient workspace for your computing needs.

  1. Work Area:

    • The work area is where users perform their tasks, store programs, documents, shortcuts and many more. Whenever a user launch a application the application window is opened within the work area.

  2. Start Button:

    • When the user clicks the start button a window is opened containing list of applications installed in your system. The application menu in TCET Linux is the access point for all your programs and special places like Profile, Settings and Power Option menu.

  3. Quick Launch:

    • This is a feature allowing you to access launchers quickly on your desktop for quick access to your daily needed applications like bluetooth, battery, sound, date and time and lastly multiple display. You can use multiple displays in the TCET Linux system which will help you to achieve your productivity to the max level.

  4. Taskbar:

    • The environment also has a taskbar, serving as an access point for running programs with a presence on the desktop. The taskbar in TCET Linux contains icons representing running & pinned̉ applications. This allows you to switch between open applications quickly. You can pin and remove the application to the taskbar as per your configuration.
Desktop Environment

Power Options​

This options are accessed by clicking on the start button on the taskbar and then top right of the application menu clicking on the power options button. This dialog window consists of:

  1. Shutdown:

    • When you choose to "shutdown" your computer, you are instructing the operating system to power off the computer completely. All running programs and processes are closed, and the computer's power is turned off.

  2. Log Off:

    • "Log Off" refers to the action of signing out of your user account on the computer. When you log off, your currently open user session is terminated, and you return to the login or user selection screen.

  3. Restart:

    • Choosing to "restart" your computer means that the operating system will close all running programs, shut down, and then immediately power on again.

  4. Sleep:

    • "Sleep" is a power-saving state that allows your computer to quickly resume its previous state without a full shutdown and startup.

  5. Switch User:

    • "Switch User" is a options that allows you to switch between different users. The current user gets logged out and user selection screen appears.

  6. Session Preservation:

    • The Save sessions for future logins feature comes in handy when you want to resume your previous work quickly after shutting down or restarting your system. Enabling this option will automatically reopen all the applications you were using. This feature is turned off by default.
Power Options

Delete & Trash​

TCET Linux system offer you trash folder so that you can delete any file and if needed retrieve them again. You have two ways to delete files and trash options:

  • Move to Trash: To temporarily remove a file from the system. This move files to the trash and if needed again then restoring them from trash folder. For this selecct the files you want to move and Right-click on the selection and choose the option Move to Trash.

  • Delete: To delete files permanently from your system. Select the files wanted to be deleted permanently and Right-click on the selection you want to delete permanently and then select "Delete" from the context menu.

  • Trash Options: By going to trash folder you can retrieve the files back. This can be done by:

    • Restore File: To restore a file from the trash, open the trash bin, select the desired file, and right-click to choose "Restore."

    • Delete & Empty Trash: To permanently delete a file from the trash open the trash bin then select the file you want to delete permanently and then Right-click and select "Delete." or else you can click on empty trash option.

Delete & Move To Trash

Trash Window: Delete & Restore

Wallpaper​

You can easily customize the look of your TCET Linux desktop. You can follow these simple steps to give your desktop a fresh and personalized appearance.

  1. Right-Click on the Desktop: To access the desktop settings, right-click anywhere on the desktop work area.
  2. Select "Desktop Settings": In the context menu that appears, choose the option labeled "Desktop Settings."
  3. Choose a Wallpaper: Inside the Desktop Settings menu, you'll find various wallpaper options. Browse through the available wallpapers and select the one that suits your preferences.

To get the updated TCET Linux wallpaper in your desktop settings, you can perform a full system upgrade. This ensures that your system stays up to date with the newest wallpaper options and other system improvements.

Wallpapers

Screenshot​

TCET Linux provides a straightforward and convenient screenshot tool that helps you capture and save screenshots with ease. Using the Screenshot Tool is as follows:

  1. Open the Screenshot Tool: You can access the screenshot tool with the following way:

    • Press the Print Screen key: This opens the Screenshot menu and now you can access the multiple type screenshots options here like caputer entire screen, capture active window and capture selected region. You can also select option of delay in screenshot. Capture the mouse pointer and capture the window border options are also very helpful.

  2. Save or Copy: After capturing the screenshot, you can choose to save the screenshot to a specific location or copy it to the clipboard for easy pasting into other applications.

Screenshot Dialog

Neofetch​

Neofetch is a command-line utility that displays system information and a distribution logo in your terminal. It's a fun and informative way to quickly see details about your TCET Linux system. Run Neofetch by enter the following command in the terminal.

 neofetch

Here's a breakdown of the information displayed by neofetch

  • Logo: You can replace the default distribution logo with a custom image. The default logo is of TCET Open Source and TCET Linux distribution.
  • User@Hostname: Your username and hostname.
  • OS: The name of your operating system (TCET Linux in this case).
  • Kernel: The Linux kernel version.
  • Uptime: The time since your system was last booted.
  • Packages: The number of installed packages.
  • Shell: The default shell you're using (bash in this example).
  • Resolution: Your screen resolution.
  • DE: The desktop environment (XFCE).
  • WM: The window manager (Xfwm4).
  • WM Theme: The window manager theme.
  • Theme: The GTK theme.
  • Icons: The icon theme.
  • Terminal: The default terminal emulator.
  • Terminal Font: The font used in the terminal.
  • CPU: Information about your CPU.
  • GPU: Information about your graphics processing unit.
  • Memory: RAM usage information.
Neofetch

Man Command​

The man command in TCET Linux is a powerful tool for accessing manual pages, also known as "man pages," for various commands and utilities available on the system. These manual pages provide detailed documentation and usage instructions for these commands.

To use this command open the terminal emulator and type man followed by the name of the command you want to learn more about. For example type man ls in the terminal and press enter then the manual page for the specified command will be displayed in the terminal. Once you are in the manual page, you can navigate through it using these common commands:

  • Arrow keys: Scroll up and down through the manual page.

  • Spacebar: Move forward one page.

  • B: Move backward one page.

  • Q: Quit and exit the manual page.

Man Command

File System​

Directories in the file system of TCET Linux and what each of them typically contains are explained in this section. It is not recommended to delete this directories as your system can break.

  1. bin: Essential programs needed for system functionality.
  2. boot: Boot-related files, including the kernel and boot configuration.
  3. dev: Device files for hardware interaction.
  4. etc: System-wide configuration files for applications and services.
  5. home: User home directories for personal files and settings.
  6. lib: Shared libraries for system and program functionality.
  7. lib64: 64-bit version of shared libraries on 64-bit systems.
  8. mnt: Historically used for mounting external storage devices.
  9. opt: Optional third-party software installations.
  10. proc: Virtual file system for process and kernel information.
  11. root: Home directory for the system administrator (root).
  12. run: Runtime data essential between reboots.
  13. sbin: System maintenance and administrative binaries.
  14. srv: Storage for site-specific data or services.
  15. sys: Interface for configuring and monitoring kernel settings.
  16. tmp: Temporary files used by applications and processes.
  17. usr: User-readable data and programs.
  18. var: Variable data, including log files and temporary files.
File System
tip
  1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.

The Getting Started Guide was succesfully executed! Let's move on and see how we use Package Management of TCET Linux.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/install-remove-update-package/index.html b/docs/projects/tcet-linux/guides/install-remove-update-package/index.html index 77046312..dba1ad36 100644 --- a/docs/projects/tcet-linux/guides/install-remove-update-package/index.html +++ b/docs/projects/tcet-linux/guides/install-remove-update-package/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Package Management

This guide will help you understand how to install, remove, and update packages on your TCET Linux system and in Arch based distributions. This distributions follows a package management system named pacman, making it efficient, user-friendly and easy to learn and operate. This distributions follows rolling releases of applications and packages hence packages are updated on regular basis hence it is important to synchronize the package database and update the application. Many times for troubleshooting and system maintenance you might need to remove a package, hence the guide will also help you there.

Pacman​

Packages in Arch based distributions is managed by package manager called pacman. The official releases of packages are published on the pacman package manager. Here sync, install, remove, autoremove are the shortcut command that is alias commands as mentioned in Alias Commands Section. In the commands mentioned below, sudo is used to run the command with superuser privileges, allowing you to install packages system-wide and pacman is the name of the package manger. The detailed explanation of this commands are covered in Alias Commands section of TCET Linux documentation.

Sync​

Before installing any package it is always recommened to synchronize your package database. For that use command:

sync

OR

sudo pacman -Syyy

The command sudo pacman -Syyy is used to refresh the package databases with a full refresh.

Install​

To install a package and its necessary depedencies use the following command,

install package_name

OR 

 sudo pacman -S package_name

The command sudo pacman -S is used to install packages from the official repositories of the applications and packages and also from TCET Linux repositories.

Remove​

To remove a package from your package database use command:

remove package_name

OR

 sudo pacman -R package_name

This command sudo pacman -R is used to remove packages from your system without removing dependencies installed along with it.

Autoremove​

Packages also come with dependencies on which package relies on in order to function properly. To remove package with its dependencies use command:

autoremove package_name

OR

 sudo pacman -Rns package_name

The sudo pacman -Rns command in TCET Linux, is used to remove a package along with its dependencies that are no longer required by any other installed packages.


Install & Autoremove htop


YAY AUR Helper​

The default package manager in TCET Linux is pacman but depending on circumstances you might need to install the packages form Arch User Repository (AUR) with AUR helper. There are many AUR helpers to install the AUR packages, but the most popular is YAY.

Installing YAY​

It is recommended to synchronize the package database and perform a system upgrade before proceeding further. To install the yay AUR helper, we need to install the git and base-devel group of package on the system. So to install the git and base-devel on the system, use the following command:

sudo pacman -S --needed base-devel git

Step 1 Base Devel and Git

To install yay on the TCET Linux, use the following commands:

git clone https://aur.archlinux.org/yay-git.git
cd yay-git
makepkg -sri

Step 2 Install YAY

Demo Installation​

Hence now we have installed the yay AUR helper on the TCET Linux system. YAY provide similar flags like Pacman to manage the packages. So to install the packages using the yay use -S option with yay command. That is yay -S package_name. This is demo installation of Google Chrome on TCET Linux. To install the google-chrome on TCET Linux with yay, use the following command:

yay -S google-chrome

Install Chrome using YAY

tip

You can visit on some learning resources listed on Resource Page of TCET Linux documentation.


The Package Management was succesfully executed! Let's move on and see how we use Alias Commands of TCET Linux.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/reset-password/index.html b/docs/projects/tcet-linux/guides/reset-password/index.html index e25768e9..6de7cd6f 100644 --- a/docs/projects/tcet-linux/guides/reset-password/index.html +++ b/docs/projects/tcet-linux/guides/reset-password/index.html @@ -9,8 +9,8 @@ - - + +
@@ -21,7 +21,7 @@

Reset Password

If you've forgotten the root password on your TCET Linux system, you can reset it using the following steps. This guide is tailored for in-drive installations of TCET Linux.

Steps to Reset Root Password​

  1. Reboot or Power On TCET Linux:

    • Reboot or power on your TCET Linux system. During the boot process, the first entry in the GRUB bootloader menu will be selected by default.

  2. Interrupt the Boot Process:

    • Interrupt the booting process by pressing the 'e' key on the keyboard. This allows you to make changes to the boot entry.

  1. Modify Boot Entry:

    • Locate a line that begins with:
    linux          /boot/vmlinuz-linux
    • Navigate to the end of this line, which ends with 'quiet'. Append the parameter init=/bin/bash to the end of the line.

    Example:

    linux          /boot/vmlinuz-linux init=/bin/bash

  2. Boot into Single-User Mode:

    • Press Ctrl + X to boot into single-user mode with the root filesystem mounted with read-only (ro) access rights.

  3. Remount Root Filesystem:

    • Remount the root filesystem with read and write rights:
    mount -n -o remount,rw /

  1. Reset Root Password:

    • Use the passwd command to reset the root password:
    passwd
    • Specify your new root password and confirm it. If the process is successful, you will see the output: 'password updated successfully'.

  1. Save Changes and Restart:

    • Run the following command to save the changes and start TCET Linux:
    exec /sbin/init

That's it! You've successfully reset the root password on your TCET Linux system. You should now be able to log in with the new root password.

If you encounter any issues or have further questions, feel free to seek assistance on the TCET Linux Discord server or refer to additional resources on the TCET Linux documentation.

tip
  1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.

The Reset Password Guide was succesfully explained! Let's move on and see how we use Package Management of TCET Linux.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/system-maintenance/index.html b/docs/projects/tcet-linux/guides/system-maintenance/index.html index 3fe920da..f76c1d07 100644 --- a/docs/projects/tcet-linux/guides/system-maintenance/index.html +++ b/docs/projects/tcet-linux/guides/system-maintenance/index.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@

System Maintenance

Here's a System Maintenance guide for TCET Linux, including a short guide with a full system upgrade command. System maintenance is essential to ensure the security, stability, and performance of your computer. Neglecting maintenance tasks can lead to security vulnerabilities, system instability, and decreased efficiency. By regularly maintaining your system, you can enjoy a more reliable and efficient computing experience while reducing the risk of data loss and security breaches.

Remember to back up your important data before performing system maintenance, especially if you are removing packages or making significant changes to your system configuration.

Basic System Maintenance Commands​

Here are some basic maintenance tasks:

  1. Clean Package Cache:

    • Over time, your system accumulates package cache files. To clean them and free up space, use:
      clr-cache
      OR
       sudo pacman -Scc

  2. Remove Unneeded Packages:

    • Review and remove any unnecessary packages to declutter your system:
      autoremove package_name
      OR
      sudo pacman -Rns package_name
      As explained in Alias Commands Section some packages come with dependencies essential to work them smoothly. Hence this command removes the package with their required dependencies from the system.

  3. Check Disk Space:

    • Keep an eye on your disk space usage with:
      df -h

  4. System Monitoring:

    • Check for the applications using more than required memory, disk space and CPU consumption and if not needed remove them.
    • To monitor this you can use system monitor software installed by default in the TCET Linux system or htop command line utility.

Full System Upgrade​

Performing a full system upgrade ensures that your TCET Linux system is running the latest software and security updates. Here's how to do it:

  1. Open a Terminal:

    • Launch a terminal emulator on your system.

  2. Run the Upgrade Command:

    • To perform a full system upgrade, use the following command:
      update
      OR
      sudo pacman -Syyu

The command sudo pacman -Syyu is used in Arch Linux-based distributions like TCET Linux for a full system upgrade. Here's a breakdown of what each part of the command does:

  • sudo: This prefix is used to run a command with superuser (administrator) privileges. It allows you to execute administrative tasks, like system upgrades.

  • pacman: This is the package manager used in Arch based distributions. It's used for installing, updating, and managing software packages.

  • -Syyu: These are options and parameters for the pacman command:

    • -S: This option specifies that you are installing or upgrading packages.
    • -yy: This option forces a refresh of the package databases, ensuring that the package lists are up to date.
    • -u: This option tells pacman to upgrade all installed packages to their latest available versions.

  1. Follow Instructions:

    • During the upgrade, you may be prompted to enter password, confirm package installations or resolve conflicts. Follow the on-screen instructions to proceed.

  2. Reboot Your System:

    • After the upgrade is complete, it's a good practice to reboot your system to ensure that any kernel updates take effect: Restart from the power options menu. OR
      sudo reboot

Performing this full system upgrade regularly helps keep your TCET Linux system secure, stable, and up to date with the latest features and improvements.

System Update
tip

You can visit to some learning resources listed on Resource Page of TCET Linux documentation.


The System Maintenance was successfully executed! Let's move on and see how we use Application Troubleshooting of TCET Linux.

- - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/guides/yay/index.html b/docs/projects/tcet-linux/guides/yay/index.html index 357af5bb..b4946c22 100644 --- a/docs/projects/tcet-linux/guides/yay/index.html +++ b/docs/projects/tcet-linux/guides/yay/index.html @@ -9,8 +9,8 @@ - - + +
@@ -28,7 +28,7 @@ Search for available visual-studio-code packages on the AUR:

yay -Ss visual-studio-code

  • Install visual-studio-code-bin: Choose the visual-studio-code-bin package and install it using the following command:

    yay -S visual-studio-code-bin

  • Remove visual-studio-code-bin: If you need to remove the visual-studio-code-bin package, use the following command:

    yay -R visual-studio-code-bin

    Now you've successfully searched, installed, and removed the visual-studio-code-bin package using yay on your Arch Linux or TCET Linux system.


    • - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/idea-behind-creating-tcet-linux/index.html b/docs/projects/tcet-linux/idea-behind-creating-tcet-linux/index.html index 0b1666d0..bc047b64 100644 --- a/docs/projects/tcet-linux/idea-behind-creating-tcet-linux/index.html +++ b/docs/projects/tcet-linux/idea-behind-creating-tcet-linux/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -22,7 +22,7 @@

    Idea Behind TCET Linux


    TCET Linux Home Page

    TCET Linux is a custom Linux distribution rooted in the Arch Linux ecosystem. Its creation is driven by a core idea: to provide an efficient, customizable, and user-friendly environment suitable for a diverse range of users. TCET Linux was conceived with several key goals in mind:

    Customization​

    The XFCE Desktop Environment that is provided with the distribution gives users the freedom to tailor their computing experience to their specific needs. This extends to the choice of desktop environment, software packages, and system configurations.

    Optimization​

    The distribution emphasizes efficiency and performance, ensuring that it runs smoothly on a variety of hardware configurations, from older machines to modern systems.

    Accessibility​

    TCET Linux is designed to be accessible to both newcomers and experienced Linux users, offering a balance between user-friendliness and advanced capabilities.

    Community​

    At its core, TCET Linux fosters a community of users and contributors who share a passion for open-source software and collaborative development.

    Promoting Linux in Academics​

    TCET Linux has a clear educational focus. It is built to promote the use of Linux in academic environments. It provides students with a Linux distribution that aligns with their needs and the requirements of educational institutions.

    Resource Efficiency​

    TCET Linux is designed to run smoothly even on low-end hardware. In contrast to resource-hungry operating systems, TCET Linux ensures that educational and academic tasks can be accomplished efficiently, even on less powerful computers.

    Department-Specific Configurations​

    TCET Linux is adaptable to different academic departments. In the future, it aims to have TCET Linux installed and configured according to departmental requirements, enhancing its utility in various educational settings.

    Community-DrivenDevelopment​

    TCET Linux is developed by a small group of individuals who are passionate about learning and enhancing the Linux ecosystem. It is a community-driven project that continually evolves to meet the needs of its users.

    TCET Linux is not just a Linux distribution; it's a reflection of a community's commitment to making Linux a valuable and accessible resource in the world of education and learning. You can include this expanded version in your "idea.md" Markdown file to provide a more comprehensive understanding of the motivation and goals behind TCET Linux.

    tip

    You can visit on some learning resources listed on Resource Page of TCET Linux documentation.


    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/installation/creating-bootable-USB/index.html b/docs/projects/tcet-linux/installation/creating-bootable-USB/index.html index f518becb..70081649 100644 --- a/docs/projects/tcet-linux/installation/creating-bootable-USB/index.html +++ b/docs/projects/tcet-linux/installation/creating-bootable-USB/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Steps to create bootable pendrive

    Welcome to the TCET Linux Installation guide! This comprehensive walkthrough will assist you in installing TCET Linux using a bootable pendrive. Follow this guide on the TCET Linux Website for a seamless installation experience.

    You can use tools like Rufus, Balena Etcher, or Win32 Disk Imager to create a bootable USB drive. Follow the instructions provided by your chosen tool to flash the TCET Linux ISO to the USB drive.

    Here's an example with Rufus

    Step 1: Download TCET Linux​

    Download the latest version from our official website.

    Download TCET Linux

    Step 2: Prepare the Bootable USB Stick with Rufus​

    1. Download and install Rufus on your Windows PC.
    Download Rufus

    1. Open Rufus, granting necessary permissions.
    Rufus Window

    1. Select your USB device under "Device" and choose the TCET Linux ISO by clicking on SELECT.
    Rufus ISO Selection

    1. Configure the settings:
      • Ensure the partition scheme is MBR for compatibility with both BIOS and UEFI systems.
      • Click START.
    Rufus Settings

    1. Choose DD mode in the pop-up menu and click OK. Be aware that all data on the USB will be erased.
    note
    Ensure you select the correct drive to avoid data loss.

    Step 3: Boot from USB​

    1. Insert the USB into your computer and restart.
    2. Access the BIOS menu (usually Delete, Escape, F9, or F10) before the Windows OS loads.
    3. Under "Boot Options," select "TCET Linux" and press Enter.
    4. If the screen freezes, wait for about 5 minutes; you should reach the login page.

    Linux Users​

    For Linux users, employ the 'dd' command in the terminal:

        sudo dd bs=4M if=/path/to/tcet-linux.iso of=/dev/sdX status=progress

    After completing the bootable pendrive installation, your USB is ready. Proceed to the next section to learn how to install TCET Linux using a virtual machine.

    Explore the potential of TCET Linux and enjoy a seamless open-source experience!

    After successfully implementing the bootable pendrive installation of TCET Linux, we were ready with a bootable drive. Next, we will be seeing how we can do partitioning of the drive.

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/installation/installation-in-vm/index.html b/docs/projects/tcet-linux/installation/installation-in-vm/index.html index d78bfbfa..723919b0 100644 --- a/docs/projects/tcet-linux/installation/installation-in-vm/index.html +++ b/docs/projects/tcet-linux/installation/installation-in-vm/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Installation in VM

    In this guide, we'll walk you through the steps to download and install TCET Linux on a Virtual Machine (VM). TCET Linux is a customizable Linux distribution based on Arch Linux, suitable for a wide range of use cases. By running it on a VM, you can explore its features without affecting your primary operating system.

    Prerequisites​

    Before you begin, make sure you have the following:

    • A Virtual Machine software (e.g., VirtualBox, VMware, or Hyper-V) installed on your host machine. In this guide we have considered virtual box as the virtual machine software.
    • The TCET Linux ISO image downloaded from the TCET Linux website.

    Steps to Install TCET Linux on a Virtual Machine​

    Additional Steps for Arch Linux Hosts​

    1. Check your Kernel:

      Before installing TCET Linux, it's essential to check your Linux kernel version. Open a terminal and run the following command:

      uname -r

      This command will display your current Linux kernel version.

    2. Installation Steps based on Kernel:

      • If you have a regular linux kernel, follow these steps:

        # Install necessary dependencies
        sudo pacman -S linux-headers

        # Install VirtualBox or your preferred VM software
        sudo pacman -S virtualbox

        # Install host modules
        sudo pacman -S virtualbox-host-modules-arch

      • If you have an LTS (Long-Term Support) or any other kernel, follow these steps:

        # Install necessary dependencies
        sudo pacman -S linux-lts-headers

        # Install VirtualBox or your preferred VM software
        sudo pacman -S virtualbox

        # Install host modules
        sudo pacman -S virtualbox-host-dkms

    Common Steps:​

    1. Create a New Virtual Machine:

      • Open your Virtual Machine software (e.g., VirtualBox).
      • Click on "New" to create a new virtual machine.
      • Choose a name for your VM (e.g., "TCET Linux").
      • Select the appropriate Type and Version (e.g., "Linux" and "Arch Linux 64-bit" if available).
      • Allocate at least 2GB of RAM to the VM.
      • Create a new virtual hard disk with a minimum of 20GB of space.

    2. Configure VM Settings:

      • Select your TCET Linux VM in the VM manager.
      • Go to "Settings."
      • In the "System" tab, under the "Processor" tab, assign multiple CPU cores if available.
      • In the "Storage" tab, under "Controller: IDE," add the TCET Linux ISO as a bootable CD/DVD.

    3. Start the Virtual Machine:

      • Start the VM and it will boot from the TCET Linux ISO you attached.
      • You'll see the TCET Linux boot menu. Select "Boot TCET Linux" to begin the installation process.

    4. Follow the Installation Process:

      • The TCET Linux installer will guide you through the installation process.
      • Choose your preferred language and keyboard layout.
      • Select the "Disk Setup" option to partition your virtual hard disk. You can choose to use the entire disk or create custom partitions.
      • When prompted, choose the desktop environment and software packages you want to install.

    5. Configure Network and User:

      • Set up your network connection. You can configure both wired and wireless connections during the installation.
      • Create a user account and set a password for it.

    6. Complete the Installation:

      • Let the installer complete the installation process. It will install the selected packages and set up the system.

    7. Eject the ISO and Reboot:

      • Once the installation is complete, the VM will prompt you to remove the ISO from the virtual CD/DVD drive.
      • Eject the TCET Linux ISO and reboot the VM.

    8. Log In:

      • After rebooting, you'll be presented with the login screen.
      • Log in with the username and password you set during the installation.

    9. Post-Installation Setup:

      • After logging in, follow the post-installation instructions to update the system and configure any additional settings.

    Congratulations, you've successfully installed TCET Linux on a Virtual Machine! You can now explore and customize your TCET Linux environment according to your needs and preferences.

    Troubleshooting​

    If you encounter any issues during the installation or have questions about using TCET Linux on your VM, you can refer to the troubleshooting section in the TCET Linux documentation or seek assistance from the TCET Open Source's Discord Server.

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/installation/installation-steps/index.html b/docs/projects/tcet-linux/installation/installation-steps/index.html index fc11b08a..ed6d63d1 100644 --- a/docs/projects/tcet-linux/installation/installation-steps/index.html +++ b/docs/projects/tcet-linux/installation/installation-steps/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -20,12 +20,16 @@ -

    Installation Steps

    Welcome Screen​

    Launch the installer by searching for 'Install TCET Linux.' The installer will greet you with a user-friendly interface.

    Welcome Page

    Set Your Location​

    Select your location by clicking on the timezones on the map. If you have an internet connection, this should happen automatically.

    Location Page

    Choose Keyboard Layout​

    Keyboard layout is automatically mapped by location. Verify the layout in the text box or make adjustments as needed.

    Keyboard Page

    Storage Partitioning​

    • Automatic Setup (Recommended):

      The installer defaults to an automatic setup, creating a Fat32 EFI System Partition and a root partition with the ext4 filesystem. This is recommended for most users.

    • Manual Partitioning (Advanced):

      For advanced users who want complete control over their disk partitions.

      • Select Disk: +

    Installation Steps

    Welcome Screen​

    Launch the installer by searching for 'Install TCET Linux.' The installer will greet you with a user-friendly interface.

    Welcome Page

    Set Your Location​

    Select your location by clicking on the timezones on the map. If you have an internet connection, this should happen automatically.

    Location Page

    Choose Keyboard Layout​

    Keyboard layout is automatically mapped by location. Verify the layout in the text box or make adjustments as needed.

    Keyboard Page

    Storage Partitioning​

    • Erase Disk (Recommended):

      The installer defaults to an automatic setup, creating partitions depending on the available storage. The home and root partitions will be on the same partition, and swap may or may not be created. This option is highly recommended for beginners.


    Partition Page

    • Manual Partitioning (Advanced): +For advanced users who want complete control over their disk partitions.

    • Select Disk: Choose the disk where TCET Linux will be installed. This could be your SSD or HDD.

    • Existing Partitions: -If there are existing partitions, you'll see them listed. Decide whether to modify, delete, or keep them.

    • Create Partitions:

      • EFI System Partition (ESP):
        • Size: Typically around 300MB.
        • Filesystem: FAT32.
        • Mount Point: /boot/efi.
      • Root Partition (/):
        • Size: Allocate a sufficient amount, at least 20GB.
        • Filesystem: ext4.
        • Mount Point: /.
      • Swap Partition (optional):
        • Size: Recommended to be equal to or double your RAM.
        • Filesystem: Swap.
      • Home Partition (optional):
        • Size: As per your storage needs.
        • Filesystem: ext4.
        • Mount Point: /home.

    • Filesystem and Mount Points: -Assign a filesystem (e.g., ext4) and mount points for each partition.

    • Finalize and Apply: -Confirm your choices and apply the changes. Double-check to avoid data loss.

    danger

    Important Note for Multiple OS Installation:

    • If you intend to have multiple operating systems on your disk, such as dual-booting with another OS, it is recommended to choose manual partitioning.
    • Use "Erase Full Disk & Install" only if you are installing TCET Linux as a Virtual Machine OR You Want TCET Linux to be the sole operating system on your machine. This option will erase the entire disk, including other operating systems and data.

    Partition Page

    User Details​

    Enter your desired username for the login screen. Set the administrator account password (root user). Opt for different passwords for enhanced security or keep them the same for convenience.

    User Page

    Summary​

    Review a detailed summary of your choices. Confirm that the partitioning details match your preferences before proceeding.

    Summary Page

    Installation Process​

    The installation will take approximately 5-10 minutes, depending on your SSD/HDD speed. The progress bar will keep you informed. Sit back, relax, and maybe grab a cup of coffee!

    Installation Process Page

    Installation Complete​

    Once done, you'll receive a notification. Restart your system to boot into your freshly installed TCET Linux. Welcome to a new and exciting computing experience!

    Finish Page

    tip
    1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.
    2. For additional help ask on the TCET Linux Discussions Channel group on TCET Linux Discord Server.
    3. You can see how we can resolve any issues while installation in Troubleshoot-Installation section for TCET Linux.
    4. You can also read the installation steps guide in our website TCET Linux.

    The Installation Steps was successfully executed! Let's move on and see how we can resolve any issues in Troubleshoot-Installation section for TCET Linux.

    - - +If there are existing partitions, you'll see them listed. Decide whether to modify, delete, or keep them.

  • Create Partitions:

    • EFI System Partition (ESP):

      • Size: Typically around 800MB.
      • Filesystem: FAT32.
      • Mount Point: /boot/efi. +

    • Root Partition (/):

      • Size: Allocate a sufficient amount, at least 12GB.
      • Filesystem: ext4.
      • Mount Point: /.

    • Home Partition (optional):

      • Size: As per your storage needs.
      • Filesystem: ext4.
      • Mount Point: /home. +

    • Swap Partition (optional):

      • Size: Recommended to be equal to or double your RAM.
      • Filesystem: Swap. +

    • Filesystem and Mount Points: +Assign a filesystem (e.g., ext4) and mount points for each partition correctly.

    • Finalize and Apply: +Confirm your choices and apply the changes. Double-check to avoid data loss.

    danger

    Important Note for Multiple OS Installation:

    • If you intend to have multiple operating systems on your disk, such as dual-booting with another OS, it is recommended to choose manual partitioning.
    • Use "Erase Full Disk & Install" only if you are installing TCET Linux as a Virtual Machine OR You Want TCET Linux to be the sole operating system on your machine. This option will erase the entire disk, including other operating systems and data.

    Partition Page

    User Details​

    Enter your desired username for the login screen. Set the administrator account password (root user). Opt for different passwords for enhanced security or keep them the same for convenience.

    User Page

    Summary​

    Review a detailed summary of your choices. Confirm that the partitioning details match your preferences before proceeding.

    Summary Page

    Installation Process​

    The installation will take approximately 5-10 minutes, depending on your SSD/HDD speed. The progress bar will keep you informed. Sit back, relax, and maybe grab a cup of coffee!

    Installation Process Page

    Installation Complete​

    Once done, you'll receive a notification. Restart your system to boot into your freshly installed TCET Linux. Welcome to a new and exciting computing experience!

    Finish Page

    tip
    1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.
    2. For additional help ask on the TCET Linux Discussions Channel group on TCET Linux Discord Server.
    3. You can see how we can resolve any issues while installation in Troubleshoot-Installation section for TCET Linux.
    4. You can also read the installation steps guide in our website TCET Linux.

    The Installation Steps was successfully executed! Let's move on and see how we can resolve any issues in Troubleshoot-Installation section for TCET Linux.

    + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/installation/partitioning/index.html b/docs/projects/tcet-linux/installation/partitioning/index.html index c8ccb6b3..a8f39b0f 100644 --- a/docs/projects/tcet-linux/installation/partitioning/index.html +++ b/docs/projects/tcet-linux/installation/partitioning/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Drive partitioning Guide

    Partitioning your drive is a crucial step when installing TCET Linux alongside Windows. This guide will walk you through the process of partitioning your drive to create space for TCET Linux while preserving your existing Windows installation.

    Prerequisites​

    Before you begin, ensure you have:

    • Backup: Create a backup of important data on your Windows machine to avoid data loss.

    Steps to Partition Drive for TCET Linux on Windows​

    1. Create Backup:

      • Before making any changes, back up your important data to prevent potential data loss during the partitioning process.

    2. Open Disk Management:

      • Press Win + X and select "Disk Management" from the menu.
      • Or you can do right click on This PC and click on manage and go to Disk Management.

    3. Shrink Existing Partition:

      • Right-click on the partition you want to shrink (usually C:), and select "Shrink Volume."
      • Enter the amount of space to shrink (15 GB atleast is recomended). This will create unallocated space for TCET Linux.

    4. Create a New Partition:

      • Right-click on the unallocated space and select "New Simple Volume."
      • Follow the wizard, assigning a drive letter or path and formatting the partition (choose NTFS).

    5. Format the New Partition:

      • Right-click on the newly created partition and select "Format."
      • Choose the file system as NTFS, set a volume label (e.g., TCET-Linux), and perform a quick format.

    6. Boot from TCET Linux USB:

      • Restart your computer with the TCET Linux USB drive inserted.
      • Enter the BIOS/UEFI settings to set the USB drive as the first boot device.
      • If your system has to option of secure boot then turn it off.

    7. Start TCET Linux Installer:

      • Once the system boots from the USB drive, select "Boot TCET Linux" from the menu.

    8. Follow Installation Steps:

      • During installation, choose the option to install TCET Linux alongside Windows.
      • Select the partition you created for TCET Linux when prompted.

    9. Complete the Installation:

      • Let the installer complete the initiate process.

    10. Installation Setup:

      • Follow installation instructions to set up your system.

    Congratulations! You've successfully done partitioning of your drive. Let's move on and see how we can proceed with Installer of TCET Linux.

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/installation/requirements-download-verify/index.html b/docs/projects/tcet-linux/installation/requirements-download-verify/index.html index 39beb2af..af8f4a49 100644 --- a/docs/projects/tcet-linux/installation/requirements-download-verify/index.html +++ b/docs/projects/tcet-linux/installation/requirements-download-verify/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -20,8 +20,8 @@ -

    Requirements, Download & Verify

    System Requirements​

    Before you begin your journey with TCET Linux, it's essential to ensure that your system meets the minimum requirements:

    • 64-bit processor
    • At least 2GB of RAM
    • 15GB of free disk space
    • An internet connection for updates and software installation

    These requirements ensure that TCET Linux runs smoothly on your computer, whether it's a modern system or a resource-constrained machine.

    Downloading TCET Linux​

    To get started with TCET Linux, you can download the latest ISO file from the TCET Linux website. We recommend the following steps for downloading and creating a bootable USB drive:

    1. Visit the TCET Linux website at TCET Linux Website.
    2. Locate the download section and select the latest TCET Linux ISO file.
    3. Download the ISO file to your computer.

    Verify​

    Step 1: Verify the Integrity of the TCET Linux ISO​

    Before proceeding with the installation, it's crucial to verify the integrity of the downloaded TCET Linux ISO file.

    • The verification is performed to guarantee the integrity of the downloaded file and to prevent potential corruption during the download process.
    • TCET Linux provides a unique checksum for each OS release, enhancing security and ensuring that users have an authentic and unaltered file.

    Follow these steps based on your operating system:

    Windows:

    1. Open the Windows Terminal (PowerShell) in the directory where the ISO file is located.

    2. Type the following command and press Enter:

      certutil -hashfile iso-name.iso sha256

    MacOS:

    1. Open the Terminal in the directory where the ISO file is located.

    2. Type the following command and press Enter:

      shasum -a 256 iso-name.iso

    Linux:

    1. Open the Terminal in the directory where the ISO file is located.

    2. Type the following command and press Enter:

      sha256sum iso-name.iso

    Step 2: Compare the Hash Value​

    After running the verification command, compare the returned hash value with the provided SHA256SUM below. Ensure that they match to confirm the authenticity of your download.

    The Updated SHA256SUM for TCET Linux ISO is provided on the TCET Linux Website Verify Section of the TCET Linux Website.

    By following these steps and confirming the match of the hash values, you can proceed with confidence, knowing that your TCET Linux installation file is genuine and secure. If the hash values do not match, consider re-downloading the ISO file to avoid potential issues during installation.

    tip
    1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.

    The Requirements Download & Verify was succesfully executed! Let's move on and see how we can Create a Bootable Pendrive & Partitioning of Drive of TCET Linux.

    - - +

    Requirements, Download & Verify

    System Requirements​

    Before you begin your journey with TCET Linux, it's essential to ensure that your system meets the minimum requirements:

    • 64-bit processor
    • At least 2GB of RAM
    • 20GB of free disk space
    • An internet connection for updates and software installation

    These requirements ensure that TCET Linux runs smoothly on your computer, whether it's a modern system or a resource-constrained machine.

    Downloading TCET Linux​

    To get started with TCET Linux, you can download the latest ISO file from the TCET Linux website. We recommend the following steps for downloading and creating a bootable USB drive:

    1. Visit the TCET Linux website at TCET Linux Website.
    2. Locate the download section and select the latest TCET Linux ISO file.
    3. Download the ISO file to your computer.

    Verify​

    Step 1: Verify the Integrity of the TCET Linux ISO​

    Before proceeding with the installation, it's crucial to verify the integrity of the downloaded TCET Linux ISO file.

    • The verification is performed to guarantee the integrity of the downloaded file and to prevent potential corruption during the download process.
    • TCET Linux provides a unique checksum for each OS release, enhancing security and ensuring that users have an authentic and unaltered file.

    Follow these steps based on your operating system:

    Windows:

    1. Open the Windows Terminal (PowerShell) in the directory where the ISO file is located.

    2. Type the following command and press Enter:

      certutil -hashfile iso-name.iso sha256

    MacOS:

    1. Open the Terminal in the directory where the ISO file is located.

    2. Type the following command and press Enter:

      shasum -a 256 iso-name.iso

    Linux:

    1. Open the Terminal in the directory where the ISO file is located.

    2. Type the following command and press Enter:

      sha256sum iso-name.iso

    Step 2: Compare the Hash Value​

    After running the verification command, compare the returned hash value with the provided SHA256SUM below. Ensure that they match to confirm the authenticity of your download.

    The Updated SHA256SUM for TCET Linux ISO is provided on the TCET Linux Website Verify Section of the TCET Linux Website.

    By following these steps and confirming the match of the hash values, you can proceed with confidence, knowing that your TCET Linux installation file is genuine and secure. If the hash values do not match, consider re-downloading the ISO file to avoid potential issues during installation.

    tip
    1. You can visit on some learning resources listed on Resource Page of TCET Linux documentation.

    The Requirements Download & Verify was succesfully executed! Let's move on and see how we can Create a Bootable Pendrive & Partitioning of Drive of TCET Linux.

    + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/installation/troubleshoot-installation/index.html b/docs/projects/tcet-linux/installation/troubleshoot-installation/index.html index 22e595aa..b88284a7 100644 --- a/docs/projects/tcet-linux/installation/troubleshoot-installation/index.html +++ b/docs/projects/tcet-linux/installation/troubleshoot-installation/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Troubleshooting While Installation

    This section provides guidance on identifying and resolving common installation-related problems in TCET Linux. If you encounter issues during the installation process, follow these steps to troubleshoot and overcome them.

    Installation Process Issues​

    1. Booting from USB Drive​

    Problem: You're unable to boot from the USB drive containing the TCET Linux installation image.

    Solution:

    • Ensure that your BIOS/UEFI settings are configured to boot from a USB drive. Access the boot menu during startup and select the USB drive as the boot device.

    • Verify that the TCET Linux installation image on the USB drive is correctly created. Use tools like Rufus on Windows or dd on Linux to create a bootable USB drive.

    • You can usually access the boot menu by pressing one of the function keys (F10, F11, F9, etc.) during the initial stages of your computer's startup. The specific key might vary depending on your laptop manufacturer, so consult your laptop's manual or look for on-screen prompts.

    2. Installation Hangs or Freezes​

    Problem: The installation process freezes or hangs at a certain point, and progress is halted.

    Solution:

    • Check your system's hardware compatibility with TCET Linux. Ensure that your CPU, RAM, and other components meet the minimum requirements.

    • Test the installation media for errors or corruption. The ISO image may be damaged. You can verify the integrity of the image using checksums. TCET Linux provide checksums (MD5, SHA1, or SHA256) on their download pages. Compare the checksum of your downloaded ISO file with the provided checksum to ensure it's not corrupted.

    • Try booting into the "safe mode" or "nomodeset" option if available. This can help bypass hardware-related issues. These modes use generic drivers and minimal settings, which can be useful if your hardware is causing compatibility issues.

    3. Disk Space Insufficient​

    Problem: The installation process reports insufficient disk space.

    Solution:

    • Confirm that you have at least 10GB of free disk space on the target drive. If not, free up space or select a different drive with sufficient space for installation.

    • During the installation process, you can choose to manually partition the disk. Ensure that you allocate sufficient space for the root partition ("/"), home partition and any other necessary partitions.

    Post-Installation Issues​

    1. Unable to Log In​

    Problem: After installation, you are unable to log in with the provided credentials.

    Solution:

    • Double-check the username and password you entered during the installation process. Ensure that the Caps Lock key is not enabled.

    • If you suspect a password issue, you can reset the password from a recovery mode or using the Live USB environment.

    2. Internet Connection Not Working​

    Problem: You do not have an internet connection after installing TCET Linux.

    Solution:

    • Verify your network hardware. Ensure that your Ethernet or Wi-Fi adapter is recognized and functioning correctly.

    • Check your network settings in the system preferences or use the ip command in the terminal to diagnose network issues.

    1. Check Network Manager status.

      sudo systemctl status NetworkManager.service

    2. If status is inactive then enable and start Network Manager.

      sudo systemctl enable NetworkManager.service
      sudo systemctl start NetworkManager.service
    tip
    1. If you choose manual partitioning, ensure you have knowledge about partitioning and correctly set up boot, root, home, and swap partitions.
    2. Make sure you are using the latest TCET Linux ISO for installation. Downloading the latest ISO ensures that you benefit from the most recent updates, bug fixes, and improvements.

    These troubleshooting steps should help you resolve common installation issues in TCET Linux. If you encounter complex or unique problems, consider seeking assistance from the TCET Linux community forums or discord channel for more personalized help and solutions.

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/iso-profile/bootloaders/index.html b/docs/projects/tcet-linux/iso-profile/bootloaders/index.html index 7be5f471..53a51ebb 100644 --- a/docs/projects/tcet-linux/iso-profile/bootloaders/index.html +++ b/docs/projects/tcet-linux/iso-profile/bootloaders/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Bootloaders used in Live ISO

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/iso-profile/index.html b/docs/projects/tcet-linux/iso-profile/index.html index c5001716..ac27a699 100644 --- a/docs/projects/tcet-linux/iso-profile/index.html +++ b/docs/projects/tcet-linux/iso-profile/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    ISO Profile

    The following is the TCET Linux ISO profile directory structure.

    ├── airootfs
    │   ├── etc
    │   │   └── Live ISO Configuration
    │   ├── root
    │   └── usr
    │       └── Live ISO binaries, scripts & libraries
    ├── bootableusb.sh ## script to create a bootable USB
    ├── cleanup.sh ## script to cleanup work folders
    ├── efiboot
    │   └── loader
    │       ├── entries
    │       │   └── 01-archiso-x86_64-linux.conf
    │       └── loader.conf
    ├── grub
    │   └── grub.cfg ## UEFI/GPT Systems
    ├── LICENSE
    ├── packages.x86_64
    ├── pacman.conf
    ├── profiledef.sh ## profile definition script
    ├── README.md
    ├── services.sh ## script to enable systemd services
    └── syslinux
        ├── archiso_head.cfg
        ├── archiso_pxe.cfg
        ├── archiso_pxe-linux.cfg ## Legacy/MBR Systems
        ├── archiso_sys.cfg
        ├── archiso_sys-linux.cfg
        ├── archiso_tail.cfg
        ├── splash.png
        └── syslinux.cfg
    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/iso-profile/rootfs/index.html b/docs/projects/tcet-linux/iso-profile/rootfs/index.html index 744318e4..1d023cfc 100644 --- a/docs/projects/tcet-linux/iso-profile/rootfs/index.html +++ b/docs/projects/tcet-linux/iso-profile/rootfs/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Undertanding the Root File System

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/iso-profile/scripts/index.html b/docs/projects/tcet-linux/iso-profile/scripts/index.html index 2a6b4cac..27b1b4d3 100644 --- a/docs/projects/tcet-linux/iso-profile/scripts/index.html +++ b/docs/projects/tcet-linux/iso-profile/scripts/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Undertanding scripts

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/references-credits/index.html b/docs/projects/tcet-linux/references-credits/index.html index 201549e2..dcaa95b5 100644 --- a/docs/projects/tcet-linux/references-credits/index.html +++ b/docs/projects/tcet-linux/references-credits/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -24,7 +24,7 @@ We are extremely thankful to all the organisations and individuals who have helped us with their tutorials, documentations and open source work.

    They are linked below-

    1. Neofetch Repository

    2. Arch Linux

    3. Thunar Repo

    4. XFCE

    5. Libre Office

    6. Starship

    7. VS Code

    8. Mozilla Firefox

    9. Calamares Repo

    10. Arch Linux GUI

    There is never an end to what you can build by learning on your own and everything you'll ever need is just one google search away. But always remember to give a shoutout and the credits to all the ones who deserve it! Keep building, Keep exploring!

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/releases/index.html b/docs/projects/tcet-linux/releases/index.html index 08fba45c..63cdbded 100644 --- a/docs/projects/tcet-linux/releases/index.html +++ b/docs/projects/tcet-linux/releases/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Releases

    In the world of Linux, variant releases refers to the different distributions or distros in linux. These may be developed by the organisation, or a community or an individual and further they keep on updating. These distributions include the Linux kernel along with supporting system software and libraries to create a complete operating system.

    In context to TCET Linux, there have been 3 major release phases, namely OPEN ALPHA, BETA RELEASE ENGINEERING and OFFICIAL RELEASE.

    Here is a brief about all of them-

    1. Open Alpha​

    Under this release phase, there were 3 major releases consecutively.

    • Open Alpha Build 1
    • Open Alpha Build 5
    • Open Alpha Build 9
    • Final Open Alpha [ After the commencement of Beta Testing Phase]

    The prime chnges included GRUB being recognised and print TCET Linux on the boot menu, INSTALLER correctly being lauched from the menu and the containment of Stock XFCE and Linux Zen Kernel.

    2. Beta Release Engineering​

    With this release phase, TCET Linux got successfully in the beta testing phase.

    There have been 3 major releases as of now and the prime changes include:

    • Default shell changed from Bash to Zsh along with Zsh being completed.
    • Keyring issue fixed.
    • Autosuggestions and UI/UX improvements along with new default wallpapers.
    • Fixed resolutions for virtual machine.

    Several other issues and bugs have been fixed and new improvements have been made in this release phase.

    3. Official Release​

    The Official Release marks a significant milestone for TCET Linux, representing a stable and feature-rich version ready for widespread use. Each official release undergoes rigorous testing and includes a curated set of enhancements, fixes, and new features.

    tip
    1. You can visit here get the latest information on Official Releases for TCET Linux.

    Stay tuned in for more updates as there's no stopping to it!
    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/resources/index.html b/docs/projects/tcet-linux/resources/index.html index 99b15b87..e6fb9c7b 100644 --- a/docs/projects/tcet-linux/resources/index.html +++ b/docs/projects/tcet-linux/resources/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    TCET Linux Resource Guide

    This guide provides a collection of resources for both basic and advanced users of TCET Linux. Whether you're a beginner looking to learn the basics or a seasoned coder seeking advanced topics, you'll find relevant resources here.

    Basic Resources​

    These resources are ideal for users who are new to TCET Linux or those who want to understand the basics:

    1. TCET Linux Documentation: Official documentation for TCET Linux.
    2. CLI Handbook: A comprehensive guide to the command line interface.
    3. Linux Basics: A collection of tutorials on Linux basics from DigitalOcean.
    4. Git Book: An in-depth guide to using Git, the version control system.
    5. Git Tools: Additional resources for using Git.
    6. Arch Build System: A guide to the build system used by Arch Linux, which TCET Linux is based on.

    Advanced Resources​

    For coders and advanced users, these resources delve into more complex topics:

    1. Docker Tutorials: A collection of tutorials on using Docker, a platform for deploying applications in containers.
    2. DevOps Repository: A GitHub repository dedicated to DevOps practices.
    3. Neofetch: A command-line system information tool.
    4. PKGBUILD: A guide to creating PKGBUILDs for Arch Linux.
    5. Arch User Repository: A community-driven repository for Arch Linux users.
    6. XFCE Getting Started: A guide to getting started with XFCE, a lightweight desktop environment.
    7. LibreOffice Documentation: Official documentation for LibreOffice, a free and open-source office suite.
    8. VS Code Basics: Introductory videos for Visual Studio Code, a popular code editor.
    9. AUR: This is a wiki page on the Arch User Repository. The Arch User Repository is a community-maintained repository of Arch Linux packages.
    10. Arch Wiki: This is the official Arch Linux wiki. The Arch Linux wiki is a great resource for learning about Arch Linux.

    Youtube Videos​

    For additional resources and discussions, please visit the TCET Linux Discord Server.

    tip
    1. You can visit Github Repository of TCET Linux.

    The TCET Linux Resource Guide was succesfully executed! Let's move on and see iso-profile of TCET Linux.

    - - + + \ No newline at end of file diff --git a/docs/projects/tcet-linux/variant/index.html b/docs/projects/tcet-linux/variant/index.html index 9de07c9a..87d37313 100644 --- a/docs/projects/tcet-linux/variant/index.html +++ b/docs/projects/tcet-linux/variant/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    TCET Linux Variants

    TCET Linux provides different variants tailored for specific environments. Choose the variant that best suits your needs. This documentation covers the XFCE variant, specifically designed for college and computer networking lab environments.

    Environment XFCE​

    1) College Variant​

    TCET Linux XFCE - College Variant is crafted to meet the requirements of college environments. It offers a customizable and efficient computing experience for academic activities and projects.

    Features:​

    • XFCE Desktop Environment: Known for its lightweight design, XFCE ensures smooth performance even on older hardware.
    • Thunar File Manager: A user-friendly file manager to manage your academic documents efficiently.
    • Starship Terminal Theme: Enhance your terminal experience with the modern and informative Starship prompt.
    • Mozilla Firefox: A fast and privacy-focused web browser for research and web-based activities.
    • Basic System Usage: Navigate the system, perform file operations, and manage software packages using Pacman.

    2) Computer Networking Lab Variant​

    The TCET Linux XFCE - Computer Networking Lab Variant is specifically configured for computer networking lab environments. It provides essential tools and an optimized environment for networking-related tasks and experiments.

    Additional Features:​

    • Networking Tools: Pre-installed networking tools for lab activities and experiments.
    • Customized Desktop: Tailored XFCE desktop settings for a focused networking environment.
    • Terminal Configuration: Additional configurations in the terminal for networking commands and scripts.
    • Wireshark: A powerful network protocol analyzer for in-depth network analysis.

    Future Environments​

    TCET Linux is continuously evolving, and future variants are planned for Plasma and Gnome desktop environments. These variants will provide users with more options and features for diverse computing needs.

    Plasma Variant​

    The Plasma variant of TCET Linux will offer the advanced and feature-rich Plasma desktop environment. It aims to provide a visually appealing and highly customizable interface for users who prefer the Plasma experience.

    Gnome Variant​

    The Gnome variant of TCET Linux will feature the Gnome desktop environment, known for its modern and user-friendly design. It will cater to users who appreciate the Gnome workflow and integrated features.

    Stay tuned for updates on these future variants as TCET Linux expands its offerings to provide a broader range of choices for users.

    Choose the TCET Linux variant that aligns with your environment and preferences, and enjoy a powerful and efficient computing experience.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/about-tnp-website/index.html b/docs/projects/tnp-website/about-tnp-website/index.html index c3c8527c..8bad88d1 100644 --- a/docs/projects/tnp-website/about-tnp-website/index.html +++ b/docs/projects/tnp-website/about-tnp-website/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    TCET Training and Placement Website

    This is the official documentation of the Training and Placement cell of TCET Mumbai, maintained by the TCET Open Source Documentation team.



    The Training and Placement department serves as a bridge between the academic environment and the industry by establishing connections with various companies and organizations. The ultimate aim of the T&P webiste is to make available the resources students need to know, to achieve their career goals. The website promotes student benefits and oppurtunities from Placements point of view. We have displayed every information in detail through the website, in order to provide the students with relevant first hand information.

    Approach​

    Here is the set of approach we kept in mind while designing our website:

    1. Header & Navbar Redesigned​

    • Header and Navbar are supposed to be easy to use and are very important for User Experience (UX).
    • In comparison with the previous clunked Navbar design, we ensured that the new one works swiftly.
    • We redesigned the header and navbar with complete responsiveness to make it look clean and extremely easy to use.

    2. Statistics​

    • Redesigning the statistics to give us an edge of transparency.
    • As Statistics holds an important place to determine the credibility of our services.

    3. Recruiters​

    • Displaying top recruiters to the right in the main page above the hero section for instant visibility.
    • To grab students and parents attention visiting our website reflecting many good companies visit our college for placements.

    4. Reflecting more credibility​

    • Display of awards received by T&P Cell of our college is beautifully reflected in the website.
    • Displaying students achievements as well as top placed students.
    • Ensured displaying the testimonials of not just companies but also students.

    5. Training Page​

    • We have smartly increased the focus from just pre-placements programs to each and every T&P program which helps students with a better learning process.
    • We are also displaying the professional bodies under T&P cell who have their own set of sessions and programs conducted whivh has helped students in developing skills.
    • Special mention of TCET Open Source because contributing to open source will provide anyone with a high edge over competition in the market.
    • We have also emphasized the fact that college level OSS org apart from TCET only exist in IIT Mumbai.
    • Constantly updating the site by mentioning the huge events happening in our college performed by various Professional Bodies of T&P.
    • All the above points states how well we train our students to be industry ready and achieve an edge in the competition.

    6. Placements & Internship Page​

    • We have made changes in how we display the companies list.
    • We have included their logos which are under creative commons license and can be used by anyone.
    • We have also displayed statistics of all placed students and companies for proper transparency.

    7. Industry Interaction & Events​

    • Many industries visit our campus and talk to our students and interact with them. We display these interactions and experience of the industry expert in our website.
    • Promoting all the events conducting by T&P Cell such as SDP, CCP, ACT etc.
    • Created a specific page for each event to provide detailed information, pictures and statistics.
    • All these factors will determine the prospective companies of how active we are.
    • These points will give industries the insights about our students being highly skilled and will influence them to reach out to us.

    If you're ready to get started with contributing to TCET Open Source, head over to our installation guide for step-by-step instructions on how to Get Started with the TNP Website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/directory-structure/index.html b/docs/projects/tnp-website/directory-structure/index.html index d25d8ed2..dd628aab 100644 --- a/docs/projects/tnp-website/directory-structure/index.html +++ b/docs/projects/tnp-website/directory-structure/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@
    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/about-us/index.html b/docs/projects/tnp-website/frontend-components/about-us/index.html index f2f36354..0ffb6b7e 100644 --- a/docs/projects/tnp-website/frontend-components/about-us/index.html +++ b/docs/projects/tnp-website/frontend-components/about-us/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    About Us

    The About Us page of the website provides information about the training and placement organization. It is often one of the most visited pages as it helps visitors understand the purpose, history, and values of the entity. It is accesible through the navigation bar of the TNP Website.

    Adding Contact Form​

    Here are the steps on how we integrated Contact Form in About Us Component

    1. Opening ContactForm.tsx file in our projects root directory.

    2. Declared a functional component called ContactForm having it's <form> element with the various attributes of the form. The email address that the form data will be sent to when submitted is specified here.

      ContactForm.tsx
      const ContactForm = () => {
          return (
              <form className="flex flex-col gap-4"
              action="mailto:tcet.tnp@thakureducation.org" method="GET"
          >
          )
      }

    3. Inside the <form> element, there are several form fields. The <label> elements provide a description for each form field, and the <input> and <textarea> elements are the actual input fields where the user can enter their data. There are used to fill firstname, lastname, subject and messege into the form. Each field has specific attributes like type, placeholder, name, cols, and rows to define its behavior and appearance. There's a <button> element at the end of the form with styling classes.

      ContactForm.tsx
      const ContactForm = () => {
          return (
              <form className="flex flex-col gap-4"
              action="mailto:tcet.tnp@thakureducation.org" method="GET"
          <label className="text-sm pb-1 text-slate-600">First Name</label>
          <input
              placeholder="Eg: John Doe"
              type="text"
              className="h-11 bg-gray-50 border border-gray-200 rounded-lg p-3"
          />
          // Similar for Last Name and Subject
          <span className="flex flex-col">
              <label className="text-sm pb-1 text-slate-600 ">Message</label>
              <textarea
              name="body"
              id="text-area"
              cols={15}
              rows={5}
              className="bg-gray-50 border border-gray-200 rounded-lg p-3"
              placeholder="Enter your message"
              />

          <button
              className="flex w-max justify-center items-center bg-blue-500 rounded-lg py-2 px-12 text-white text-base hover:bg-blue-400 mt-2"
              placeholder="message"
              type="submit"
              >
              Submit
              </button>
          </form>
          );
      };

    4. Save the changes.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the form look like this:



    Adding Staff Cards​

    How to add Staff and their Information to the page

    1. Opening Staff.tsx file in our projects root directory.

    2. An array of staff data in the format is defined by the StaffTNP type. The StaffTNP type defines the structure of each staff member's information, such as staffPhoto, StaffName, designation, and experties. This information can be changes using these attributes.

      Staff.tsx
      const Staff: React.FC<{
      data: StaffTNP[];
      }> = ({ data }) => {
      return <div className="md:flex grid grid-cols-1  md:justify-between pt-4 flex-wrap gap-8">{data.map(staff => <StaffPost {...staff}/>)}</div>;
      };

      export default Staff;

      const StaffPost = (staffInfo: StaffTNP) => {
          return (
              <div className="border bg-[#f9fafb] rounded-lg p-4 flex flex-col justify-center items-center gap-2">
                  <img src={"/Testimonials/"+staffInfo.staffPhoto} alt="staffFoto" className="w-52 rounded-xl"/>
                  <div className="font-semibold">{staffInfo.StaffName}</div>
                  <div>{staffInfo.designation}</div>
                  <div className="bg-[#E4E7EC] px-3 py-2 rounded-lg text-sm w-full text-slate-600 text-center">{staffInfo.experties}</div>
              </div>
          )
      }

    Add the staff images in the appropriate directory (/Testimonials/) relative to the staff.

    1. Save the changes to the file.

    2. Run yarn dev on the terminal to see the changes made in your local environment.

    tip

    Similar steps were carried out for adding multiple cards Staff Cards.

    On executing the above steps, the staff section looks like this:



    After successfully implementing the About Us component of the TNP (Training and Placement) website, the next step we did was to move forward with the implementation of Footer component.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/attendance-chart/index.html b/docs/projects/tnp-website/frontend-components/attendance-chart/index.html index 853d041c..dc4a28a4 100644 --- a/docs/projects/tnp-website/frontend-components/attendance-chart/index.html +++ b/docs/projects/tnp-website/frontend-components/attendance-chart/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Attendance Chart

    The Attendance-Chart component provided is a reusable component designed to display attendance data in the form of a bar chart.It is accesible through the TNP Website.

    Adding Attendance Chart​

    Let's understand how to add the Attendance Bar Chart to the Page

    1. Opening index.tsx of the Attendance-Chart component file in our projects root directory.

    2. Define the AttendanceChart component using the React.FC type. It accepts props of type { data: ChartData<"bar">, title: string }. The data prop represents the chart data, and the title prop represents the chart title.

      index.tsx
      const AttendanceChart: React.FC<{
      data: ChartData<"bar">;
      title: string;
      }> = ({ data, title }) => {
          // Component code goes here
      };

    3. Render the Bar component from Chart.js within the <div> element. Pass the data prop to provide the chart data, and use the optionGenerator function to generate the `chart options based on the title` prop.

      index.tsx
      <Bar data={data} options={optionGenerator(title)} />

    4. Save the file.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the individual attendance bar charts look like this:



    We inserted this Attendance Chart in many of our events and other pages of TNP Website. Next we will be seeing on how we integrated the Placements component.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/companies/index.html b/docs/projects/tnp-website/frontend-components/companies/index.html index 3ca30ada..f118711e 100644 --- a/docs/projects/tnp-website/frontend-components/companies/index.html +++ b/docs/projects/tnp-website/frontend-components/companies/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Companies

    The Companies page of the website gives you information about various companies that visit the institute for the placement procedure. It is accesible through the Placement section on the navigation bar of the TNP Website.

    Adding Company Card to the page​

    How to add the Company Card to the page

    1. Opening CompanyCard.tsx file in our projects root directory.

    2. The CompanyCard component is defined as a functional component that accepts two props: img and name.

      CompanyCard.tsx
      const CompanyCard: React.FC<{} & CompanyCardType> = ({ img, name }) => {
          return (
              <div className="flex flex-col items-center justify-center gap-3">
              <img src={"/InternshipHero/" + img} alt="company-logo" />
              <p className="lg:text-base text-xs text-center text-slate-600">{name}</p>
          </div>
          );
      };

    3. An <img> element is added to display the company logo. The alt attribute is set to "company-logo" for accessibility purposes. The name prop is used to populate the content of the <p> element.

    4. The companies section is divided into different sub sections including Super Dream Companies, Dream Companies, Normal and Core Companies. The company card is added to the page as per the category of the company.

    5. Save the changes.

    6. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the Company cards look like this:



    Adding Read More Button​

    How to display the company in the ReadMore section

    1. Opening ReadMore.tsx file in our projects root directory.

    2. The ReadMore component is defined as a functional component that accepts two props: companies (an array of CompanyCardType) and title (a string representing the section title). The useState hook is imported which determines whether the "Read More" section is expanded or collapsed.

      ReadMore.tsx
      const ReadMore: React.FC<{
          companies: CompanyCardType[];
          title: string;
      }> = ({ companies, title }) => {
          const [readMore, setReadMore] = useState(false);
      }

    3. A <button> element is added and it has a click event handler attached to the onClick attribute, which toggles the readMore state when clicked. Inside the <button> element, there is a text label "Read More" and an SVG icon representing an arrow.

      ReadMore.tsx
      return (
      <div>
        <button
          className="w-max py-2 px-4 flex text-slate-600 gap-x-2 items-center border rounded-full 
        bg-gray-50 hover:bg-gray-100 active:bg-gray-50 transition-all ml-auto mr-8 mb-4"
          onClick={() => setReadMore(!readMore)}
        >
          Read More
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={2}
            stroke="currentColor"
            className="w-6 h-6  text-slate-500 "
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"
            />
          </svg>
        </button>
      // Other parts of the code
      )

    4. A grid layout is used to display the company cards. The grid is responsive and adapts the number of columns based on screen size. The companies prop is mapped over to render multiple CompanyCard components, passing the name and img props.

      ReadMore.tsx
      // Code from last section
      {readMore && (
          <>
            <div
              onClick={() => setReadMore(false)}
              className="w-screen h-screen bg-black bg-opacity-60 fixed transition-opacity top-0 left-0 "
            />
              // Styling
              <div className="pb-4 lg:pb-6 xl:pb-10 ">
                <h1 className=" text-2xl 2xl:text-3xl text-center font-title">
                  {title}
                </h1>
              </div>
              <div className="grid max-h-[70%] overflow-scroll grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 justify-around gap-6 xl:gap-12">
                {companies.map((c) => (
                  <CompanyCard name={c.name} img={c.img} />
                ))}
              </div>
            </div>
          </>
        )}
      </div>

    5. Save the changes.

    6. Run yarn dev on the terminal to see the changes made in your local environment.

    tip

    Similar steps were carried out for adding multiple categories of Companies.

    On executing the above steps, the Read More Section look like this:



    Adding Company Details​

    How to add the company details

    1. Opening index.astro file in the Companies component in our projects root directory.

    2. The Props interface is defined, which specifies the prop types expected by the component. It is used to edit properties such as companies (an array of CompanyCardType), title (a string representing the section title), subtitle (an optional string for a subtitle), and background (a string representing the background color).

      index.astro
      interface Props {
          companies: CompanyCardType[];
          title: string;
          subtitle?: string;
          // readMore?: boolean;
          background: string;
      }
      const { companies, title, subtitle, background } = Astro.props;

    3. The strippedCompanies array is mapped over to render CompanyCard components, passing the img and name props. Conditional rendering is used to display the ReadMore component if the companies array length is greater than 12. The title and companies props are passed to the ReadMore component.

      index.astro
      {
        strippedCompanies.map((d) => {
          return <CompanyCard img={d.img} name={d.name} />;
        })
      }
      </div>
      {
          companies.length > 12 && (
          <ReadMore title={title} client:load companies={companies} />
          )
      }

    4. Save the changes.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    The Companies section was succesfully executed! Let's move on and see how we created the Top Recruiters section of the TNP Website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/components/index.html b/docs/projects/tnp-website/frontend-components/components/index.html index 51b813ba..e172a399 100644 --- a/docs/projects/tnp-website/frontend-components/components/index.html +++ b/docs/projects/tnp-website/frontend-components/components/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@
    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/event-page/index.html b/docs/projects/tnp-website/frontend-components/event-page/index.html index d0a179da..26ddb597 100644 --- a/docs/projects/tnp-website/frontend-components/event-page/index.html +++ b/docs/projects/tnp-website/frontend-components/event-page/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Event Page

    The Event page of the website gives you information about various training and placement events falling under aptitude training and student development programs. It is accesible through the navigation bar of the TNP Website.

    Here are the steps we performed to add a Caraousel in our Event page

    1. Opening HeroCarousel.tsx file in our projects root directory.

    2. The array of objects named heroSlideObj that contains the image links and alt text for the event, will be loacted. For each object in the array, it generates a <SwiperSlide> component with an <img> element inside.

      HeroCarousel.tsx
      const heroSlideObj = [
          {
              img: "EventPage.png",
              alt: "Event 1",
          }
      ]

    3. The <Swiper> component is rendered, which is a container for the event images. It accepts several props to configure its behavior and appearance.

      HeroCarousel.tsx
      const heroSlide = heroSlideObj.map((data) => {
          return (
              <SwiperSlide>
                  <img
                  src={`/EventsPage/${data.img}`}
                  className="object-cover h-full w-full"
                  alt={data.alt}
              />
          </SwiperSlide>
          );
      });

    4. The modules prop is used to specify additional modules for the Swiper library. The autoplay prop is used to enable autoplay for the slideshow. The spaceBetween prop defines the spacing between each slide. The slidesPerView prop sets the number of slides to display at once. The onSwiper and onSlideChange props are optional event handlers.

      HeroCarousel.tsx
      return (
          <Swiper
              className="h-auto xl:w-[540px] lg:w-[480px] md:w-full border rounded-lg xl:rounded-xl "
              // install Swiper modules
              modules={[Autoplay]}
              autoplay={{
                  delay: 3000,
              }}
              spaceBetween={30}
              slidesPerView={1}
              onSwiper={(swiper) => console.log(swiper)}
              onSlideChange={() => console.log("slide change")}
          >
              {heroSlide}
          </Swiper>
      );

    5. Each object should have a img property that specifies the image file name and analt property that specifies the alternative text for the image.

    6. Save the changes.

    7. Run yarn dev on the terminal to see the changes made in your local environment.

    Adding Purpose of the Event Section​

    After adding Carousel, let's have a look at how we implemented the Purpose of the Event Section

    1. Opening index.astro file inside the Hero component our projects root directory.

    2. Locate the following code snippet inside the component or section where you want to display it.

      index.astro
      <div>
        //Other styling
          <div class="md:w-1/2 pr-8">
            <h1 class="text-[42px] font-title">Purpose</h1>
            <p class="lg:text-lg text-sm  font-sans font-light text-[#475466]">
              {purpose}
            </p>
          </div>
          <div class="md:w-1/2 w-full h-full lg:mt-0 mt-6">
            <Hero heroSlideObj={heroSlideObj} client:load />
          </div>
        // Other parts of the component
      </div>

    3. Replace the {/* Add your purpose text here */} comment with the actual purpose text you want to display.

    4. Save the changes.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the individual cards look like this:



    Adding Objective of the Event Section​

    Let's have a look at how we integrated this section in our Event page.

    1. Opening index.astro file inside the Testimonial component our projects root directory.

    2. Insert the following code snippet into your HTML or JSX file where you want to display the objective:

      index.astro
      <div>
        // Other parts and styling of the container
          <h1 class="font-title text-[42px] mb-[15px]">Objective</h1>
          <p class="lg:text-lg text-sm  font-sans font-light text-[#475466] lg:w-[60%] md:w-[70%]">
              {objective}
          </p>
        // Other parts of the container
      </div>

    3. Replace {objective} in the code with the actual variable or string that contains the objective content. This is where you provide the objective text that you want to display on the page.

    4. Save the file.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    Adding Testimonial Section​

    Let's understand how we add the statistics testimonial to the event page

    1. Opening Testimonial.jsx file in our projects root directory.

    2. Create a new functional component called Testimonial and pass the data prop to it.

      Testimonial.jsx
      function Testimonial({ data }) {
        // ... code continues

      ```}

    3. Inside the Testimonial component, map through the data array to create SwiperSlide components dynamically. This will generate a testimonial slide for each item in the data array.

      Testimonial.jsx
      const TestiSlide = data.map((data) => {
        return (
          <SwiperSlide
            className=" h-auto border-none rounded-lg xl:rounded-xl"
            style={{
              background:
                "radial-gradient(61.56% 85.33% at 50% 100%, rgba(212, 185, 255, 0.7) 0%, rgba(241, 232, 255, 0.3) 100%)",
            }}>
            {/* ... testimonial content */}
          </SwiperSlide>
        );
      });

      Here, you can edit objects containing testimonial information such as review, photo, position, name, and department. Update the paths of the images or adjust the styling as desired.

    4. Configure the Swiper component's properties such as autoplay, pagination, and breakpoints according to your requirements.

      Testimonial.jsx
      return (
      <div>
        <Swiper
          className="h-auto my-7"
          modules={[Autoplay, Pagination]}
          autoplay={{
            delay: 3000,
          }}
          pagination={{ clickable: true }}
          spaceBetween={32}
          slidesPerView={1}
          breakpoints={{
            640: {
              slidesPerView: 1,
            },
            // Other config properties
          }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log("slide change")}
        >
          {TestiSlide}
          {/* ... other elements */}
          <div className="swiper-pagination" />
        </Swiper>
      </div>
      );

    5. Save the file to update the changes.

    6. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the individual cards look like this:



    How to add information to the testimonial

    1. Opening index.astro file in Testimonial component in our projects root directory.

    2. Inside the testiObj array of the code, add a faculty's details which would be defined as follows:

      index.astro
          const testiObj = 
          [
              {
                  name: "Name of the Faculty",
                  photo: "/faculty-image.jpg",
                  review:
                      "Reviews and detail about the Faculty",
                  position: "Position of the Faculty",
                  department: "Department of the Faculty"
              }
          ]

    3. Edit the above terms name. photo, review, position, department to include the faculty information to the testimonial.

    4. Save the file.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    Adding Outcome Section​

    Let's understand how to add the Outcome Section to the Event Page

    1. Opening index.astro file in Outcome component in our projects root directory.

    2. Define an interface called Props that includes a property outcomes of type string[].

      index.astro
      interface Props {
        outcomes: string[];
      }

    3. Use the map function to iterate over the outcomes array and generate a <p> element for each outcome.

      index.astro
      {outcomes.map((item, index) => (
        <p
          className="lg:text-lg text-sm font-sans font-light text-475466 lg:w-60% md:w-70% py-1"
          key={index} >
          {item}
        </p>
      ))}

    4. Save the file.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the individual cards look like this:



    Congratulations, we have successfully implemented the Event Page. Let's continue to find out how we implemented the Companies Section of the TNP website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/footer/index.html b/docs/projects/tnp-website/frontend-components/footer/index.html index 7818b2a4..8716e472 100644 --- a/docs/projects/tnp-website/frontend-components/footer/index.html +++ b/docs/projects/tnp-website/frontend-components/footer/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Footer

    The footer component is a section of a web page that is placed at the bottom and is separate from the main content area. It serves as a container for information that is relevant to the entire page. In the footer component, we have included Google map of the institution as well as the written address, navigation links, contact details, copyright notices, and other supplementary information.

    Map Component​

    This component is represented by the HTML program which includes a map embedded from Google Maps and an address description.

    Here's the implemented code:

    index.astro
        {/* Map And Address */}
             <div class="w-full lg:w-1/3 xl:w-1/3 m-2">
                 <div>
                         <iframe
                             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3767.7457229439237!2d72.87241691481825!3d19.20630535285474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b0e57647569d%3A0xc0aec329c82d3555!2sThakur%20College%20of%20Engineering%20and%20Technology!5e0!3m2!1sen!2sin!4v1680794472903!5m2!1sen!2sin"
                             style={{ border: 0, width: "100%", height: "27vh" }}
                             loading="lazy"
                             referrer-policy="no-referrer-when-downgrade"></iframe>
                 </div>
                 <div class="mt-4 text-sm">
                     <p class="text-justify">
                         Thakur College Of Engineering And Technology. A-Block, Thakur
                         Educational Campus, Shyamnarayan Thakur Marg, Thakur Village,
                         Kandivali(E). Mumbai - 400101.
                     </p>
                 </div>
             </div>

    Here's a breakdown explanation of the map component:

    1. The first div element is applied with multiple CSS classes. These are defined with attributes for styling puposes.

    2. The div element in the next line contains <iframe> element, which is added in the code to embed content from another source. Here, the src atribute is Google Maps embed URL, which is used to display map of the college in the footer. The CSS classes have been applied.

    3. The loading attribute is set to lazy, which indicates that iframe should be loaded only when it becomes fully visible.

    4. The referrer-policy is set to no-referrer-when-downgrade which is used to restrict the referrer information when loading the embedded Google Maps content. This helps in protecting user's privacy and security.

    5. The next div element introduces the <p> paragraph element. It represents the paragraph of text that describes the college address. There are CSS classes applied to the element as per our specifications.

    Map Component

    The code for this section is represented by the HTML language which creates a navigation menu.

    Here's the implemented code:

    index.astro
         {/* Nav as */}
             <div class="mt-10 md:mt-0 w-full lg:w-1/3 m-2" >
                 <div class="grid grid-rows gap-2 text-left md:text-center">
                     <a class="hover:underline" href="/about">Home</a>
                     <a class="hover:underline" href="/download">Download</a>
                     <a class="hover:underline" href="/media">Media</a>
                     <a class="hover:underline" href="/news">News</a>
                     <a class="hover:underline" href="/mandatory-disclosure">Mandatory Disclosure</a>
                     <a class="hover:underline" href="/disclaimer">Disclaimer</a>
                     <a class="hover:underline" href="/content-policy">Content Policy</a>
                 </div>
             </div>

    Here's a breakdown explanation of the navigation component:

    1. The div element in the code is used for styling purposes with multiple CSS classes applied. The next div element have classes which is responsible for layout & alignment of the navigation links.

    2. There are <a> anchor elements present in the incoming code which represents the navigation links. Each link is wrapped inside the <a> element with hover effect applied to it.

    3. The href attribute specifies the destination URL for each link.

    4. The overall section of the code generates a navigation menu with several links which is used to navigate different pages of the website.

    Navigation Component

    Contact & Copyrights Component​

    The code for this section is represented by the HTML language which displays contact information and copyright details.

    Here's the implemented code:

    index.astro
         {/* Contacts and CopyRight */}
             <div class="w-full lg:w-1/3 mt-10 md:mt-0 m-2">
                 <div class="text-base">
                     <div>
                         <img class="inline mr-2" src="/misc/phone.svg" alt="phone" />
                         <p class="inline">
                             <a class="underline" href="tel:022-28461891"> 022 - 28461891</a>{
                                 " "
                             }
                             /{" "}
                             <a class="underline" href="tel:022-67308000"> 022 - 67308000</a>
                             ,{" "}
                             <a class="underline" href="tel:022-67308106"> 67308106</a>{" "}
                             /{" "}
                             <a class="underline" href="tel:022-67308107"> 07</a>
                         </p>
                     </div>
                      <div class="mt-2">
                         <img class="inline mr-2" src="/misc/email.svg" alt="email" />
                         <p class="inline">
                          <a class="underline" href="mailto:tcet.tnp@thakureducation.org">
                             tcet.tnp@thakureducation.org
                          </a>
                         </p>
                      </div>
                  <div class="mt-2">
                          <img class="inline mr-2" src="/misc/website.svg" alt="website" />
                          <p class="inline">
                             Websites:{" "}
                              <a class="underline" href="https://www.tcetmumbai.in">
                              www.tcetmumbai.in
                              </a>{" "}
                              /{" "}
                              <a class="underline" href="https://www.thakureducation.org">
                                  www.thakureducation.org
                              </a>
                          </p>
                      </div>
                  </div>
                  <div class="mt-8">
                      <p class="">
                          © 2023 Thakur College of Engineering and Technology. All Rights Reserved.
                      </p>
                      </div>
                  </div>
              </div>
          </div>

    Here's a breakdown explanation of this component:

    1. There the div elements with multiple CSS classes. Majorly for styling purposes and to set the font for the content inside it.

    2. The below section of the code is to display the phone contact information. the <img> element is used to display the image of the phone icon. The src element is used to define the source or file path. There is inline CSS used to make the image and the content display inline.

    3. The <p> element in the code conatins theb <a> elements which represents phone numbers. Each phone number is wrapped inside the <a> anchor element and has the underline attribute applied.

    4. The underline attribute adds an underline to the content. Here, href attribute is set to the respective phone number links.

    tip

    Similar steps were carried out for adding tcet.tnp@thakureducation.org, www.tcetmumbai.in & www.thakureducation.org in this section.

    1. To display the copyright content, a div element with <p> paragraph element inside it is used. The content "© 2023 Thakur College of Engineering and Technology. All Rights Reserved." is wrapped inside the paragraph element.
    Contacts & Copyrights Component

    Let's take a view of the complete Footer Component:

    Footer Component

    After successfully implementing the Footer component of the TNP (Training and Placement) website, we were ready with out frontend part of the website. Next, we will be seeing on how we incorporated the backend of TNP (Training and Placement) website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/header/index.html b/docs/projects/tnp-website/frontend-components/header/index.html index 7c249ef8..7a4e80f0 100644 --- a/docs/projects/tnp-website/frontend-components/header/index.html +++ b/docs/projects/tnp-website/frontend-components/header/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Header

    The Header section is an informative element which is present at the top of every page of the website. With its navigational features, it facilitates easy access to each and every page of the Training and Placement Website. It consists of TCET Logo, Thakur Educational Group Logo, Title & Description and a Menu presenting a list of links to different pages. Hence providing essential information and contributing to user-friendly experience.

    Mobile Navigation Menu​

    In order to create a menu for smaller screens for TNP website, we need to create a react functional component "MobileNav" which will display collapsible section.

    Here's how we did it:

    1. Opening the "MobileNav.tsx" file.

    2. Inside the component, two props are defined primaryLinks and secondaryLinks which correspond to the primary and secondary links respectively.

      MobileNav.tsx
              const MobileNav: React.FC<{
                      primaryLinks: link[];
                      secondaryLinks: link[];
              }

    3. navOpen is a state variable used to indicate whether the menu is opened or closed. The useOnClickOutside hook is used to detect clicks outside the menu and closes the menu accordingly.

      MobileNav.tsx
              const [navOpen, setNavOpen] = useState(false);
              const ref = useRef(null);
              const ref2 = useRef(null);
              useOnClickOutside(ref, () => setNavOpen(false), ref2);

    4. The MobileNav component returns the navigational menu. The <button> element inside the <div> serves as a switch to open and close the menu. The onClick() event handler changes the value of navOpen whenever the button is clicked.

      MobileNav.tsx
           <div className="relative" >
              <button
                  data-collapse-toggle="mobile-menu-2"
                  type="button"
                  // Styling
                  onClick={() => setNavOpen(!navOpen)}
              >
          </div>

    5. The button displays an svg icon that is defined according to the condition whether the value of navOpen is "true" or "false".

      MobileNav.tsx
      // Other sections of code
          {!navOpen ? ( // when the navOpen is set to false
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="w-6 h-6"
              >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                />
            </svg>
          ):(<svg
              //defines the <svg> component when the menu is open
            >
            <path
            //...
            >
            </svg>)}

    6. After the <button> element, <aside> displays the menu when navOpen variable is set to true. It contains two <nav> elements, one for the primary links section. This section also links to thakureducation.org. It maps over primaryLinks array to display each link as an anchor element.

      MobileNav.tsx
              {primaryLinks.map((p) => (
                <a
                  key={p.title}
                  href={p.link}
                  className=" text-sm w-full  text-slate-900 hover:underline"
                >
                  {p.title}
                </a>
              ))}
      tip

      In the same way, the secondary <nav> is used to display secondaryLinks. If a link has subLinks, an Accordian component is rendered for each sublink.

    7. Save the file.

    8. Run yarn dev to see the changes in your local environment.

    Main Menu on smaller screens will look like this:

    Accordian Component​

    A collapsible menu is created for sublinks of Placement and Events using react functional component called "Accordian". We created this collapsible menu in following ways:

    1. Open the "Accordian.tsx" file.

    2. The "Accordian" component contains a <span> element which serves as a container for the accordian item. It contains <p> element to display the title of the sublink and an <svg> element which is responsible for displaying an arrow pointing downwards when isOn is set to false and a cross when isOn is set to true.

      Accordian.tsx
           {!isOn ? ( //when isOn is set to false
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-4 h-4 lg:w-4 lg:h-4 cursor-pointer"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M19.5 8.25l-7.5 7.5-7.5-7.5"
            />
          </svg>
        ) : (
          <svg
            // defined when isOn is set to true
          >
            <path
              //...
            />
          </svg>
        )}

    3. When the isOn is set to true, it renders a <span> element which maps over links in links array and displays each link as an anchor element.

      Accordian.tsx
          {links.map((l) => (
              <a
                href={l.link}
                className=" text-xs xl:text-sm  text-slate-900 hover:underline border-b border-slate-200 pb-2 last:border-0 last:pb-0 w-full"
              >
                {l.title}
              </a>
            ))}

    4. The Accordian element also handles mouse events. When the mouse hovers over the menu, the isOn is set to true which opens the collapsible section. When the mouse is out of the accordian menu, the isOn is set to false which closes the section.

      Accordian.tsx
          onMouseOver={() => {
              // console.log("mouse over");
              setIsOn(true);
              }}

    5. Save your progress.

    6. Run yarn dev to see the changes in your local system.

    The Accordian Component looks like this:

    1. The links for ERP, Alumni and Careers are defined in the primaryLinks array of type link[] in "index.astro" file. To add links for Alumni and Career pages, create objects in the following way with "title" and "link" properties:

      index.astro
              const primaryLinks: link[] = [
                  {
                      title: "ERP",
                      link: "http://erp.tcetmumbai.in/",
                  },
                  // Other links
              ]
      tip

      In the same way secondaryLinks array is created with "title" and "link" properties. This array lists links of various pages of the TNP website. Some links also have sublinks. The sublinks have the same properties as secondaryLinks objects. To add sublinks, create link objects in the following way:

      index.astro
              const secondaryLinks: link[] = [
                  {
                      title: "Placement",
                      link: "/placement",
                      subLinks: [
                          {
                              title: "Placement",
                              link: "/placement",
                          },
                      ],
                  },
                  // Other links and sublinks
              ]

    Displaying Navigational Menu​

    To display the main menu, we executed the follwing steps:

    1. A <div> element in the <header> of "index.astro" file is created where the secondaryLinks array is iterated. Inside the <span> element, it checks if there are any sub-links. In case of no sub-links, it displays the anchor tag <a> with the link and title of the item. If there are sub-links, it renders an <Accordian> component.

      index.astro
              <div class="hidden lg:flex text-slate-800 justify-evenly py-2 border-b">
              {
                  secondaryLinks.map((s) => (
                  <span class="flex items-center gap-2">
                      {!s.subLinks && <a class="text-xs xl:text-sm   hover:underline" href={s.subLinks?"":s.link}>
                      {s.title}
                      </a>}
                      {s.subLinks && <Accordian title={s.title} client:load links={s.subLinks} />}
                  </span>
                  ))
              }
              </div>
    info

    The primary links are listed in the same container where the site's logo and title are placed. Refer the index.astro file.

    1. Open index.astro file.

    2. TNP logo is displayed in the extreme left of the header. Within the <div> element of <header>, anchor tags are used. This is how it was executed:

      index.astro
          <div class="space-y-2 md:flex md:mr-4">
            <a href="/">
              <img
                src="/Images/TCET Logo.png"
                class="object-contain w-14 lg:w-24"
                alt="TCET Logo"
              />
            </a>
          </div>
      info

      Similar steps were carried out for displaying Thakur Education Group logo for smaller screens.

    tip

    To see how we added title and description on the header, refer index.astro file from the TNP Website repository.

    After adding Logo, creating Menu and adding Title & Description, the header section can be seen like this:

    Header Section

    The Header Section is succesfully executed! Let's move on and see how we created the Hero Section of the TNP Website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/hero/index.html b/docs/projects/tnp-website/frontend-components/hero/index.html index dcbe5cb3..df3653d3 100644 --- a/docs/projects/tnp-website/frontend-components/hero/index.html +++ b/docs/projects/tnp-website/frontend-components/hero/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Hero

    The Hero component represents the first section of the T&P Home page. It is one of the most crucial component as it is designed in a certain way which can grab attention of the target audience. The page likely presents data on the number of students successfully placed, the count of companies that have visited and the count of students securing 10+ LPA packages. This page provides a perfect platform to display the pictures of the namely events conducted. The above factors of this components emphasizes it to be the Hero component of the website.

    CountUp Component​

    The program for this component is a React component in JavaScript which uses the react-countup library to display a count-up animation of numbers.

    Here's a breakdown of the code to understand it's functionality:

    1. Imported the CountUp component from the react-countup library. This library renders a simple way to create attractive count-up animations in React.

      CountUpComponent.jsx
          import CountUp from "react-countup";

    2. This line of the program defines a functional component called CountUpComponent. It receives the props: start, end, and title. These props are used to configure the count-up animation.

      CountUpComponent.jsx
          const CountUpComponent = ({ start, end, title }) => {
              return (
            // Sections of CountUp component
            );
        };

    3. The underlying div element represents the main container of the component. It has several CSS classes that apply styling to the container, such as background color, padding, border, and spacing between child elements. In the empty curly brackets, the required content is filled in.

      CountUpComponent.jsx
         const CountUpComponent = ({ start, end, title }) => {
            return (
                  // Other Sections of CountUp component
               <div className="bg-slate-50 p-4 pr-12  rounded-2xl border  border-slate-200 space-y-2">
                   {" "}
                  // Other Sections of CountUp component
               );
         };

    4. The div element used in the below code itself contains the Count-up number. It has CSS classes applied. The <div> element includes the start and end props used with the Count-upcomponent. These props are used to animate the number from the start value to the end value.

      CountUpComponent.jsx
         const CountUpComponent = ({ start, end, title }) => {
            return (
                  // Other Sections of CountUp component
               <div className="font-title text-2xl">
                  <CountUp start={start} end={end} />+
               </div>
                  // Other Sections of CountUp component
               );
         };

      The + used above is a static text that follows the count-up number, it indicates that the number is increasing.

    5. This div element displays the title passed on to the component. It has CSS class applied to set the specific shade.

      CountUpComponent.jsx
         const CountUpComponent = ({ start, end, title }) => {
            return (
                  // Other Sections of CountUp component
               <div className="text-slate-500">{title}</div>
                  // Other Sections of CountUp component
               );
         };

    6. The last line of the code exports the CountUpComponent as the default export of the module, making it available to use in other parts of the application.

      CountUpComponent.jsx
         import CountUp from "react-countup";

            const CountUpComponent = ({ start, end, title }) => {
               return (
                  // Sections of CountUp component
               );
            };
         export default CountUpComponent;

    Hero Section​

    The code involved in this section is a blend of JavaScript and HTML language. JavaScript is used for the dynamic logic and functionality, while HTML is used to structure and display the content on the web page.

    Here's a breakdown of the code to understand it's functionality:

    1. Here, we have imported the CountUpComponent and HeroSwiper components.

      HeroSection.astro
          import CountUpComponent from "./CountUpComponent.jsx";
          import HeroSwiper from "./HeroSwiper.tsx";

      The detailed information about the CountUpComponent is provided in the above section of this document. Whereas, the description regarding HeroSwiper component will be explained in the further document.

    2. An array is created with the name data which contains the images names. This data will be passed as a prop element to HeroSwiper component.

      HeroSection.astro
          const data = [
            "swiperImage1.png",
            "swiperImage1.png",
            "swiperImage1.png",
            "swiperImage1.png",
          ];

    3. Here's the description of the below code section:

      HeroSection.astro
         <section class="space-y-4 xl:space-y-8 2xl:space-y-12 3xl:space-y-24 " >
            {/* Text of the HeroSection */}
               <div class="flex flex-col md:flex-row gap-6 lg:gap-20 ">
                  <div class="w-full space-y-2 md:w-2/4">
                     <button
                     class="flex items-center bg-gray-100 text-sm lg:text-base px-2 py-1 rounded-full
                     hover:bg-gray-200 active:bg-gray-100 transition-all "
                     >
                        <a href="/guidelines" class="px-3">Visit Our Guidelines</a>
                           {/* Svg for arrow in button */}
                       <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                       >
                        <rect width="24" height="24" rx="12" fill="#E4E7EC"></rect>
                        <path
                           d="M6.16663 12H17.8333M17.8333 12L12 6.16669M17.8333 12L12 17.8334"
                           stroke="#101828"
                           stroke-width="1.5"
                           stroke-linecap="round"
                           stroke-linejoin="round"></path>
                       </svg>
                     </button>
         </section>

    • The button element in this section represents a clickable button. It has styles applied as per our requirements. It is represented by the lines 5-8.

    • Inside this section there is an <a> anchor element representing the hyperlink wrapped in the button. It has the text displaying "Visit Our Guidelines" which is linked to the Guidelines. It is represented by line 9.

    • Introducing the svg icon, it is a graphical icon which has made in use for the arrow in button. It's code is provided with the specifications of svg's structures and attributes. It is represented by the lines 11-25.

    The result of this code represents the SVG as a rounded rectangle with a light gray fill, and it has three lines forming an arrow shape. The arrow points horizontally in a direction from left to right, and its lines have a dark gray stroke with rounded endpoints and corners.

    1. The div element used here is for the purpose to display a custom font with varying text size based on screen size. It displays quoted text. We have used it to define the Headlines and paragraph in our web page.

      HeroSection.astro
         <section
         // Other Sections of HeroSection component
            <div class="font-title text-2xl lg:text-3xl xl:text-[2.75rem] xl:leading-tight">
               "Unlock Your Career Potential with Training And Placement Cell - Where Dreams Meet Opportunities!"
            </div>
         // Other Sections of HeroSection component
         </section>

    2. The View more element in this section, is programmed using the <a> anchor element. The CSS classes are applied to it including the hover effect. The anchor element here is representing the hyperlink which is redirecting to About Us.

      HeroSection.astro
         <section
            // Other Sections of HeroSection component
               <div>
                  <a
                     href="/about-us"
                     class="px-4 py-2 text-slate-600 rounded-xl mr-auto border border-gray-300 
                     hover:bg-gray-100 active:bg-gray-50 transition-all "
                  >
                 View More
                  </a>
               </div>
            // Other Sections of HeroSection component
         </section>

    3. The CountUpComponent displayed in the code handles the counting animation of numbers. There are props passed to CountUpComponent, which are as follows:

    • client:only="react": It has a specific purpose within the CountUpComponent component. It is used to determine whether the code is running or not on the client side with React.

    • title="Number of students placed": This provides title for the count. Here it represents the number of students placed.

    • start={0}: It determines the starting value of the count.

    • end={}: This prop determined the ending value.

      HeroSection.astro
      <section
            // Other Sections of HeroSection component
               <div>
                  <CountUpComponent
                     client:only="react"
                     title="Number of students placed"
                     start={0}
                     end={852}
                  />
               </div>
            // Other Sections of HeroSection component
      </section>
    tip

    Similar steps were carried out for adding multiple CountUp Components.

    Hero Section

    HeroSwiper Component​

    The code for the HeroSwiper Component is programmed using Swiper library for creating a swiper carousel. It is a custom implementation based on Swiper library.

    1. Importing the necessary components and modules from the "swiper" library. SwiperSlide and Swiper are components used for creating a swiper carousel. For enabling autoplay functionality we have used Autoplay module. To import the CSS styles in swiper library, "swiper/css" is imported.

      HeroSwiper.tsx
           import { SwiperSlide, Swiper } from "swiper/react";
           import { Autoplay } from "swiper";
          
           import "swiper/css";

    2. The below code declares the name HeroSwiper to a functional component and take data as imput. data is an array of strings.

      HeroSwiper.tsx
           const HeroSwiper = ({ data }: { data: string[] }) => {
              return (
               // Other Sections of HeroSwiper component
               );
         };

    3. The Swiper component is used here to create carousel. The program between the opening and closing tags of the Swiper component will enclose the content of the carousel in it.

      HeroSwiper.tsx
         const HeroSwiper = ({ data }: { data: string[] }) => {
            return (
               <Swiper
                  // Other Sections of HeroSwiper component
                  >
               </Swiper>
               );
         };

    4. Here's the code description for the below code section:

      HeroSwiper.tsx
         const HeroSwiper = ({ data }: { data: string[] }) => {
            return (
               <>
                  <Swiper

                     autoplay={{
                        delay: 2500,
                     }}
                     slidesPerView={1}
                     // added breakpoints to swiper. mobile one photo, tablet 2 photos
                     breakpoints={{
                        1024: {
                           slidesPerView: 2,
                        },
                        1720: {
                           slidesPerView: 3,
                        }
                     }}
                     spaceBetween={50}
                     loop={true}
                     modules={[Autoplay]}
                     className="rounded-xl"
                     // onSwiper={(swiper) => console.log(swiper)}
                     // onSlideChange={() => console.log("slide change")}
                  >
                  </Swiper>
                </>
            );
         };

    • The below code describes the autoplay prop. This prop accepts various options. Here, the delay option is set to 2500 ms, which means it will directly transition to the next slide in every 2.5 secs. It is represented by lines 6-8.

    • The slidesPerView prop component to 1 means only one slide will be visible at a particular time. It is represented by line 9.

    • The spaceBetween prop of the Swiper component to 50 means it adds a space of 50 pixels between each slide. It is represented by line 19.

    • The loop prop set to true enables the carousel to loop continuously. Once it reaches the last slide, it will jump back to the first one. It is represented by line 20.

    • The modules prop containing Autoplay enables the autoplay functionality. It is represented by line 21.

    1. In the code, we have used mapping function which iterates over the data array. For each item in data, it creates SwiperSlide component. The key prop is set to d, which uniquely identifies each slide. There is an img element rendered inside the SwiperSlide. There is also an src attribute which is used to generate the URL for the image used. There are CSS classes applied to the img element.

      HeroSwiper.tsx
         const HeroSwiper = ({ data }: { data: string[] }) => {
            return (
               <>
                  <Swiper
                     // Other Sections of HeroSwiper component
                  >
                     {data.map((d) => (
                        <SwiperSlide key={d} >
                           <img className="w-full md:w-3/4 lg:w-max mx-auto" src={`/Hero/${d}`} alt="image" 
                           width={844} height={448} />
                        </SwiperSlide>
                     ))}
                  </Swiper>
               </>
                  );
         };

      export default HeroSwiper;

    2. The code statement represented by line 18 exports the HeroSwiper component as the default export of this module. Which means it is allowed to be imported and used in other parts of the program.

    Hero SwiperSlide
    info

    For more comprehensive and detailed information, you can refer the official Swiper library documentation-Swiper.js

    The Hero Section of Home Page was succesfully executed! Let's move on and see how we created the Training component of the TNP Website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/industry-interaction/index.html b/docs/projects/tnp-website/frontend-components/industry-interaction/index.html index 6284de85..e2419c03 100644 --- a/docs/projects/tnp-website/frontend-components/industry-interaction/index.html +++ b/docs/projects/tnp-website/frontend-components/industry-interaction/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -22,7 +22,7 @@

    Industry Interaction

    To bridge the gap between academics and expectations from industries, TNP cell of TCET facilitates students to engage with various industries, gain practical exposure and develop industry relevant skills. The Industry Interaction page of TNP website provides you insights on various programmes and interactions taking place between industries and students in TCET. This page is accesible through the navigation bar of TNP website.

    Creating a layout​

    To set up a basic layout of the page and to create a section that would briefly describe the content of the page, following steps are executed:

    1. Creating a "industry-interaction.astro" file.

    2. We need to define an array which will store all the information that will be used throughout the page. The IndustryInteractionData array is defined with the following properties:

      industry-interaction.astro
          const IndustryInteractionData: IndustryInteractionType[] = [
              {
                  companyLogo: //company logo comes here,
                  companyName: //company name,
                  themeColor: //define the theme of the card,
                  description: //brief description of the event,
                  subdescription: //subdescription of the event,
                  eventImages: [ //array of images along with alt text
                   {
                      img: ,
                      alt: ,
                  },
                  {...}
                  ],
              },
          ]

    3. The next step is to set the main layout of the page. Within the <Layout> component, the title and description of the page is defined. The classes are defined under <main> component defining the spacing and padding.

      industry-interaction.astro
         <Layout
              title= // Title of the page
              description= //Description of the page
              >
              <main class="block !space-y-6 md:!space-y-12 lg:!space-y-24 w-full px-8 md:px-16"
              >
               // Define the layout of the page
              </main>
          </Layout>

    4. The Industry Interaction section of the page is wrapped in a <div> component with a class defining a flex container. Within this container, the first <div> element contains <p> elements with the title "Industry Interaction" and a description text.

      industry-interaction.astro
          <div class="w-full flex flex-col-reverse md:flex-row">
              <div class="h-full xl:w-1/2 md:w-1/2 sm:w-full p-3">
                  <p class="text-4xl 2xl:text-6xl font-title mb-4">Industry Interaction</p>
                  <p class="text-slate-600">
                  // description text
                  </p>
              </div>
              // other elements
          </div>

    5. The second <div> element inside the container defines classes to create background circles for creating a visually pleasing page.

      industry-interaction.astro
              <div class="absolute bg-gray-400 w-96 h-96 -left-14 top-25 -z-10 rounded-full flex justify-center bg-gradient-to-l from-gray-100 to-white">
              <div class="bg-white w-72 h-72 rounded-full mt-12"></div>
              </div>

    6. The third <div> element is defined with a flex layout to create a container in which the data in IndustryInteractionData array will be iterated over to create cards for each data item.

      industry-interaction.astro
          {
              IndustryInteractionData.slice(0,2).map((data) => (
                <div class={`...`} // a class defining the size and flex layout
                  style={{...}} > //setting the border color and bg color according to the theme color
                  <img src={data.companyLogo} class="rounded-full w-12" />
                  <p class=" mb-1 mt-3 ">{data.companyName}</p>
                  <p class="text-slate-600 font-light text-sm">
                    {data.subdescription}
                  </p>
                  <a
                    href={'#'+data.companyName}
                    class={`...`} 
                  >
                    Read More ↓
                  </a>
                </div>
              ))
          }

    Each card contains company logo, name, subdescription and Read More link.

    1. After the "Industry Interaction" section, a container is defined where event sections for each company will be described based on the array data.

      industry-interaction.astro
           {
            IndustryInteractionData.map((data) => (
              <div class={`...`}
                   id={data.companyName}
                   style={{'...'}} //set the background color according to the theme color of the data
              >
              <div class={`...`} >
                <img
                    class="rounded-full w-12 mb-4 mt-4"
                    src={data.companyLogo}
                 />
                  <p class="text-3xl font-title mb-4">
                    {data.companyName} Industry Interaction
                  </p>
                  <p class="text-sm xl:text-base text-slate-600 ">{data.description}</p>
                </div>
                <div class=" flex justify-center w-full lg:w-1/2">
                  <IndustryInteractionSwiper client:load data={data.eventImages} />
                </div>
              </div>
            ))
           }

    Each event section will contain logo, name, description and IndustryInteractionSwiper component. The IndustryInteractionSwiper component is rendered for each event item using the data.eventImages as data drop.

    1. Save your progress.

    This is what the page's hero section looks like:



    In the next part, we are going to see how we created "IndustryInteractionSwiper" component.

    Creating IndustryInteractionSwiper​

    In order to create slides of images, we need to create a react functional component.

    Here's how we implemented this component:

    1. Creating a IndustryInteractionSwiper.tsx file.

    2. Importing all the required dependencies, imageLink from ../../env module and necessary CSS styles for Swiper.

      IndustryInteractionSwiper.tsx
          import { Swiper, SwiperSlide } from "swiper/react";
          import { Pagination, A11y, Autoplay } from "swiper";
          import type { imageLink } from "../../env";
          import "swiper/css";
          import "swiper/css/pagination";

    3. Creating a react functional component IndustryInteractionSwiper in the following way:

      IndustryInteractionSwiper.tsx
          const IndustryInteractionSwiper: React.FC<{
              data: imageLink[];
          }> = ({ data }) => {
              return (
                  // Component JSX goes here
              );
          };

          export default IndustryInteractionSwiper;

    4. Creating a Swiper component within the component defined above to define the behaviour and appearance of the component. This can be done in the following way:

      IndustryInteractionSwiper.tsx
          <Swiper
              modules={[A11y, Autoplay]}
              autoplay={{
              delay: 2500,
              }}
              spaceBetween={50} //Defining the space between slides
              slidesPerView={1} //Specifying how many slides should be visible at a time
          >
          {/* Slides go here */}
          </Swiper>

      In this step, "modules" prop is used to enable additional features like accesibility and autoplay. The autoplay prop is defined to advance every other slide in 2.5 seconds.

    5. Thedata array is mapped inside the Swiper component and SwiperSlide component is structured for each data array item.

      IndustryInteractionSwiper.tsx
          {data.map((d) => (
              <SwiperSlide key={d.alt}>
                  {/* Slide content goes here */}
              </SwiperSlide>
          ))}

    6. SwiperSlide component is created to define the content for each slide. An <img> element is defined as follows:

      IndustryInteractionSwiper.tsx
          {data.map((d) => (
              <SwiperSlide key={d.alt}>
                  <span className="w-full h-[130%] block" >

                  <img src={d.img} alt={d.alt} width={600} height={400}className="w-full aspect-video rounded-2xl" />

                  </span>
              </SwiperSlide>
          ))}

      The src prop is set to the img and alt property of the current data item.

    7. Custom CSS is defined to style the component slides.

    8. Save the changes.

    9. Run yarn dev to see the changes in your local environment.

    Here's the event section with the Swiper component:



    Congratulations, we have successfully implemented the Industry Interaction page. Let's continue to find out how we implemented the Event Page of the TNP website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/internships/index.html b/docs/projects/tnp-website/frontend-components/internships/index.html index e3df8478..deba064c 100644 --- a/docs/projects/tnp-website/frontend-components/internships/index.html +++ b/docs/projects/tnp-website/frontend-components/internships/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Internships

    The Internship page of the website gives you information on various corporations that visit TCET to recruit students. To be more transparent, the website provides statistics on the number of companies that have visited and the number of students who got hired. It is accesible through the navigation bar of the TNP Website.

    Adding Company Details​

    To add a company's information to the website, we need to edit the data array in the InternshipCompanies.tsx file. The data array is a collection of company information where each item represents a company and contains the name and image of the company's logo.

    Here's how those changes were made:

    1. Opening InternshipCompanies.tsx file in our projects root directory.

    2. Locating the data array. To add a company's details, we created a new object which would be defined as follows:

      InternshipCompanies.tsx
         const data = [
          {
              caption:  "Name of the company",
              imgLink: "company-logo.svg",
          }
         ]

    3. Editing the caption property to include the name of the company and imgLink property with the name of the file or URL for the company's logo.

    4. Save the file.

    5. Run yarn dev on the terminal to see the changes made in your local environment.

    Creating Company Card​

    Now that we have created data array, we need to create a card for each company featuring the company name and logo.

    Here's how we proceeded with the steps:

    1. Opening CompanyCard.tsx file.

    2. Props is defined with two properties: imgLink and caption both of type "String".

      CompanyCard.tsx
         type Props = {
               imgLink: String;
               caption: String;
         };

    3. The functional component CompanyCard is created which uses these props to display company logo and name.

      CompanyCard.tsx
          const CompanyCard = ({ imgLink, caption }: Props) => {
          return (
              //Define the UI of the component
          );
          };

    4. The component will return a <div> element which will create a vertical container with centered content and gap between child elements.

      CompanyCard.tsx
         const CompanyCard = ({ imgLink, caption }: Props) => {
         return (
             <div className="flex flex-col items-center justify-center gap-3">
             //Other elements comes here
             </div>
         );
         };

    5. Within the <div> element, <img> is used to display company logo and <p> element contains the name of the company as caption.

      CompanyCard.tsx
          const CompanyCard = ({ imgLink, caption }: Props) => {
          return (
              <div className="flex flex-col items-center justify-center gap-3">
                  <img src={"/InternshipHero/" + imgLink} alt="company-logo" />
                  <p className="lg:text-base text-xs text-center text-slate-600">{caption}</p>
              </div>
          );
          };

    6. Save the file.

    7. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the individual cards look like this:



    Displaying Companies​

    In this step, we need to create a card to display all the company cards created in the previous step. This step will help in listing all the companies that have conducted internship drives in TCET.

    1. Opening InternshipCompanies.tsx file in our projects root directory.

    2. Creating a react functional component InternshipCompanies which will be defined as follows:

      InternshipCompanies.tsx
        const InternshipCompanies: React.FC<{}> = () => {
          return (
             //Define the UI of the component
           );
        };

    3. A <div> element is created which uses inline CSS style to set the background of the component. Within outer <div>, <h1> is created for the heading of the section-"Companies Offering Internships". It also contains nested <div> element with a class which serves as an underline below the heading.

      InternshipCompanies.tsx
         const InternshipCompanies: React.FC<{}> = () => {
              return (
                  <div style={{ background: "radial-gradient(42.83% 57.11% at 50% 100%, rgba(255, 225, 185, 0.7) 0%, rgba(255, 245, 232, 0.3) 100%)" }}>
                      <h1 className="relative pb-3 text-2xl 2xl:text-3xl text-center mb-12 font-title">
                      Companies offering Internships 
                      <div className="absolute sm:top-12 top-16 left-1/2 -translate-x-1/2 lg:w-1/5 md:w-1/3 sm:w-1/2 w-full border-b border-slate-200"></div>
                      </h1>
                  </div>
              );
          };

    4. A <div> is created below <h1> element to create grids for the company cards. A javascript expression "{data.map((d, index) => {.....})}" is used to map data array to display each company card.

      InternshipCompanies.tsx
          const InternshipCompanies: React.FC<{}> = () => {
              return (
                  <div style={{ background: "radial-gradient(42.83% 57.11% at 50% 100%, rgba(255, 225, 185, 0.7) 0%, rgba(255, 245, 232, 0.3) 100%)" }}>
                      <h1 className="relative pb-3 text-2xl 2xl:text-3xl text-center mb-12 font-title">
                          Companies offering Internships 
                          <div className="absolute sm:top-12 top-16 left-1/2 -translate-x-1/2 lg:w-1/5 md:w-1/3 sm:w-1/2 w-full border-b border-slate-200"></div>
                      </h1>
                      <div className="grid grid-cols-2 md:grid-rows-5 md:grid-cols-5 2xl:grid-cols-6 gap-x-6 gap-y-8 mb-12 pb-12">
                          {data.map((d, index) => {
                              return <CompanyCard key={index} imgLink={d.imgLink} caption={d.caption} />;
                          })}
                      </div>
                  </div>
              );
          };

    5. Save the file.

    6. Run yarn dev on the terminal to see the changes made in your local environment.

    After completing the above steps, the Internship Companies card looks like this:



    We have successfully created Internships page. Let's proceed with the Industry Interaction section.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/placed-students/index.html b/docs/projects/tnp-website/frontend-components/placed-students/index.html index 71ae9939..b216df59 100644 --- a/docs/projects/tnp-website/frontend-components/placed-students/index.html +++ b/docs/projects/tnp-website/frontend-components/placed-students/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -34,7 +34,7 @@ containing information about individual students.

    index.astro
        const starPerformers = [
            {
                batch: 2023,
                color: "#FFFAEB",
                data: [
                    {
                        img: "/studentPlaced/student_image.jpg",
                        name: "Student Name1",
                        branch: "Branch Name",
                        company: "Meta",
                        package: "23 Lakhs",
                    },
                    // Other student objects...
                ],
            },
            // Other batch objects...
        ];

    StarPerformers component is rendered for the corresponding data for each batch as we saw in Super Star Performers.

    All Star Performers​

    This section contains downloadable links of pdf containing information about all the star performers from each batch. Each container is a <button> which contains an svg icon and anchor tag linking to a pdf that can be downloaded upon mouse click.

    index.astro
        <button>
        <span class="font-title text-lg">
                <a href={item.link} download>
                  {item.batch} PDF
                </a>
        </span>
        </button>
    tip

    To create svg icon for each batch, refer: index.astro

    This is how different sections of the page looks like:

    In this section, we saw how we created Placed Students page. Let's see how we implemented Student Awards page in the next section!

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/placement/index.html b/docs/projects/tnp-website/frontend-components/placement/index.html index e9133616..1bc60b8a 100644 --- a/docs/projects/tnp-website/frontend-components/placement/index.html +++ b/docs/projects/tnp-website/frontend-components/placement/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Placement

    The Training and Placement page showcases the placement activities at Thakur College of Engineering and Technology in Mumbai. It provides comprehensive information about the placement process, services, and objectives of the Training and Placement department. The page likely presents data on the number of students successfully placed, the count of companies that have visited the campus for recruitment, and may also categorize companies into different tiers such as super dream, dream, normal, and core companies. By visiting the page, visitors can access valuable information and insights into the placement activities at TCET.

    Placement Hero Section​

    The Placement Hero Section tell us about the placements scenarios in TCET, and also the statistics like Number of students placed and Number of companies visited.

    Here are the steps we followed to achieve this:

    1. Opening the PlacementHero.astro file.

    2. The first child contaier of <div> showcases the headings and a short description about the Placements in TCET.

    3. Next up we inserted a <button> tag which redirects to the Guidelines of placements.

      PlacementHero.astro
      <div class="flex space-x-10 lg:flex-row flex-col items-center gap-12 w-full mt-12 mb-12">
          <div class="w-full order-1">
              <h1 class="lg:text-4xl text-3xl mb-4 font-title">About Placement</h1>
              <p class="mb-8 lg:text-base text-md text-slate-500">
                  The Training and Placement department serves as a bridge between the
                  academic environment and the industry by establishing connections with
                  various companies and organizations. The ultimate aim of the T&P
                  department is to ensure that students are well-prepared for the job market
                  and have access to the resources they need to achieve their career goals.
              </p>
              <button
              class="text-slate-500 hover:bg-slate-100 active:bg-slate-50 transition-all border border-gray-300 rounded-xl px-4 py-2"
              >Visit our Guidelines</button>
          </div>
          <!-- Other containers>

    4. Next we added an <img> tag in another <div> container specifying its attributes.

      PlacementHero.astro
      <div class="flex space-x-10 lg:flex-row flex-col items-center gap-12 w-full mt-12 mb-12">
          <!-- First About Us Container -->

          <div class="w-3/4 order-2">
          <div class="mb-6 flex flex-col justify-center gap-6 rounded-xl">
              <img
                  src="/Placement/placement.png"
                  class="w-full aspect-auto rounded-xl"
                  alt="image-of-a-female-student-pointing-towards-a-laptop-screen"
              />
          </div>
      </div>

    5. Now we added the CountUp Components by specifiyng the configuration properties like the start and end and the title of the CountUp Component.

      PlacementHero.astro
          <!-- First About Us Container -->
          <div class="flex space-x-10 lg:flex-row flex-col items-center gap-12 w-full mt-12 mb-12">
              
              <!-- Image Container -->
              <div class="mb-6 flex flex-col justify-center gap-6 rounded-xl">

                  <!-- CountUp Component -->
                  <div class="flex justify-between sm:flex-row flex-col items-center gap-3">
                      <div class="w-full md:w-max">
                      <CountUpComponent
                          client:only="react"
                          start={0}
                          end={852}
                          title="Number of students placed"
                      />
                      </div>
                      <!-- Another CountUp Component -->
                  </div>
              </div>
          </div>
      tip

      Similar steps were carried out for multiple CountUp Components.

    After completing the above steps, we successfully implemented the Hero section of Placements in our website. You can see the snapshot below:

    Placements Hero Section

    Companies Categories​

    This page section provides detailed statistics on the successful placements of students and the number of companies that actively participate in campus recruitment. Moreover, these companies are often classified into distinct tiers based on their significance and desirability for students. This categorization includes tiers such as super dream, dream, normal, and core companies. This classification helps students gauge the level of competition and prioritize their preferences during the placement process.

    This sections are already made in our Internships and Companies component.

    tip

    Similar steps were carried out for adding multiple Companies Category Sections.


    After successfully implementing the Placement component of the TNP (Training and Placement) website, the next step is to move forward with the implementation of the Top Placed Students component.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/student-award/index.html b/docs/projects/tnp-website/frontend-components/student-award/index.html index 49e521c7..1b8bff31 100644 --- a/docs/projects/tnp-website/frontend-components/student-award/index.html +++ b/docs/projects/tnp-website/frontend-components/student-award/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Student Award

    The Student Award section aims at recognizing the contributions of the students and showcasing their achievements. This section is situated below the Hero Section of TNP Home Page.

    Creating Achievement and Award Slides​

    In order to implement Student Award Section, we need to create react functional components for both achievement and award slides.

    The following steps are executed:

    1. Opening the StudentAward.jsx file.

    2. All the dependencies and relevant modules are imported.

      StudentAward.jsx
          import { Swiper, SwiperSlide } from "swiper/react";
          import {
              Navigation,
              Pagination,
              Scrollbar,
              A11y,
              FreeMode,
              Autoplay,
          } from "swiper";

          import "swiper/css";
          import "swiper/css/navigation";
          import "swiper/css/pagination";
          import "swiper/css/scrollbar";
          import "swiper/css/free-mode";

    3. A StudentAward component is structured as below:

      StudentAward.jsx
          const StudentAward = () => {
              // Component logic goes here

          return (
              <div className=" gap-4 flex flex-col md:flex-row">
              {/* Render Swiper components */}
              </div>
          );  
      };

    4. Two data arrays, achievementSlideObj and awardSlideObj are defined in the above component to store and edit data for achievement and award slides.

      StudentAward.jsx
          const achievementSlideObj = [
              studentImg: //image comes here,
              achievementType: //define type of achievement,
              studentName: //student name comes here,
              caption: //Description of the achievement,
          ];

          const awardSlideObj = [
              awardImg: //image comes here,
              awardName: //Name of the award,
              caption: //Description comes here,
          ];

    5. In the next step, JSX elements for achievementSlides are defined using the achievementSlideObj data and the structure is customized as needed.

      StudentAward.jsx
          const achivementSlides = achievementSlideObj.map((data) => {
          return (
              <SwiperSlide key={data.studentName}>
                  {/* Render achievement slide content */}
              </SwiperSlide>
          );
          });

      In the same way, awardSlides using awardSlideObj data are defined.

      StudentAward.jsx
          const awardSlides = awardSlideObj.map((data) => {
              return (
                  <SwiperSlide key={data.awardName}>
                      {/* Render award slide content */}
                  </SwiperSlide>
              );
          });
    tip

    To understand more about JSX, refer the JSX documentation properly.

    1. Swiper Components by passing the JSX for achievements and award slides are defined in this step. This is done in the following way:

      StudentAward.jsx
          const StudentAward = () => {
              // Component logic goes here

          return (
              <div className="gap-4 flex flex-col md:flex-row">
                  {/*Left section*/}
                  /* Swiper for Awards */
                  <Swiper className="h-auto w-full lg:w-[48%] border rounded-lg xl:rounded-xl" 
                  modules={[Navigation, A11y, Autoplay]} 
                  spaceBetween={30} 
                  slidesPerView={1} 
                  navigation={...}>
                  {awardSlides}
                  </Swiper>

                  {/*Right Section*/}
                  {/* Swiper for Achievements */}
                  <Swiper className="h-auto w-full lg:w-[48%] border rounded-lg xl:rounded-xl"
                  modules={[Autoplay]} 
                  spaceBetween={30} 
                  slidesPerView={1} 
                  navigation={...}>
                  {achivementSlides}
                  </Swiper>
              </div>
          );
          };

    2. Component's appearance and functionality are customized according to the requirements.

    3. Save the file.

    4. Run yarn dev to see the changes in your local system.

    The above steps results into the following output:



    In this page, we saw how the Student Awards section was put together. Let's go on towards the next stage, the Testimonials Page, to see how the component was implemented.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/tech-stacks/index.html b/docs/projects/tnp-website/frontend-components/tech-stacks/index.html index e64efdf2..219d4231 100644 --- a/docs/projects/tnp-website/frontend-components/tech-stacks/index.html +++ b/docs/projects/tnp-website/frontend-components/tech-stacks/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Tech Stacks

    Astro is an open-source framework for generating web applications on top of popular UI frameworks like React, Preact, Vue, or Svelte. It offers a modern and flexible approach to web development, enabling developers to create fast, scalable, and engaging websites and applications. Read More

    Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. It is a versatile CSS framework that offers a pragmatic and efficient approach to web development.
    Read More

    Swiper is a powerful and popular JavaScript library for creating touch-enabled, responsive sliders, carousels, and swiper components on the web. It provides a wide range of features and customization options to build interactive and engaging content sliders for websites and web applications. Read More

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/testimonials/index.html b/docs/projects/tnp-website/frontend-components/testimonials/index.html index 6ef20325..8fb63974 100644 --- a/docs/projects/tnp-website/frontend-components/testimonials/index.html +++ b/docs/projects/tnp-website/frontend-components/testimonials/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -22,7 +22,7 @@

    Testimonials

    Introducing Testimonials of TNP Website!

    The Student Testimonials and Company Testimonials section of the website provides you feedbacks and experiences shared by the students and the companies visiting in TCET. It is a responsive and touch-enabled slider which includes data like feedback, student's image or company logo, name and position. It supports slide touch gestures and is situated at the bottom of the Home Page of TNP website.

    Adding Testimonials​

    To add reviews on the website, we need to edit "studentTestimonials" or "companyTestimonial" array in index.astro file. Both of these array contain multiple testimonial objects of the type TestimonialType.

    Here's how we made those changes:

    1. Opening index.astro file in our projects root directory.

    2. Locating the studentTestimonials or companyTestimonial array.

    3. To add a new testimonial, we created a new object which would be defined as follows:

      index.astro
          {
             info: //Testimonial content,
             photo: //file name or url of an image,
             name: //name of the student/company,
             position: //position or role of the student/company recruiter,
           }

    4. To add or change the testimonial content, we edited the info property and also, updated the photo property with the required name of the file or url of the image.

      index.astro
        {
           info: "As I stare out the window, I can see the leaves of the trees rustling in the wind. The sun is setting, freshly cut grass. I take a deep breath and let it out slowly, feeling the tension in my body release. In this moment, everything feels perfect, and I am grateful for the simple joys in life.",
           photo: "pfp-pixelated.png",
           name: //name of the student/company,
           position: //position or role of the student/company recruiter,
         }

    5. To add the name of the reviewer and position they hold, we located the name and position property of the array.

      index.astro
         {
            info: //Testimonial content,
            photo: //file name or url of an image,
            name: "Rahil",
            position: "badeLog",
          }

    6. Save the index.astro file.

    Displaying Testimonials​

    To display a testimonial slider, a data prop is given to the TestimonialSwiper component in "TestimonialSwiper.tsx" file. TestimonialSwiper is a react functional component that recieves an array of TestimonialType objects.

    1. Swiper and SwiperSlide components are used within the TestimonialSwiperprovided by the Swiper.js library. Within the Swiper component, the behaviour and appearance of the component is configured.

      TestimonialSwiper.tsx
           <Swiper
             modules={[Navigation, Pagination, Scrollbar, A11y]}
             spaceBetween={50}
             slidesPerView={1}
             pagination={{ clickable: true }}
             // onSwiper={(swiper) => console.log(swiper)}
             // onSlideChange={() => console.log("slide change")}
           >

    2. For each testominial object, a SwiperSlide component is rendered to define the content for individual slides within the Swiper component.

      TestimonialSwiper.tsx
             {data.map((testimonial) => (
           <SwiperSlide key={testimonial.name}>
             <Testi
                 info={testimonial.info}
                 photo={testimonial.photo}
                 name={testimonial.name}
                 position={testimonial.position}
             />
            </SwiperSlide>
             ))}

      The Testi component represents an individual testimonial. It receives the testimonial's info, photo, name, and position as props and renders them accordingly. The component includes HTML elements and CSS classes to structure and style the testimonial content.

    3. Save the file and run yarn dev on the terminal to see the changes made in your local environment.


    After following the above steps, the Testimonials section looks like this:



    info

    Check out the official documentation for more information on Swiper.js


    Now that we have completed implementing Testimonials section, let's move forward to see how we implemented Internships page in our TNP Website.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/top-placed-students/index.html b/docs/projects/tnp-website/frontend-components/top-placed-students/index.html index eb3cfba2..5954c5d7 100644 --- a/docs/projects/tnp-website/frontend-components/top-placed-students/index.html +++ b/docs/projects/tnp-website/frontend-components/top-placed-students/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -29,7 +29,7 @@ breakpoints is a prop defined that denotes the change in the number of slides based on the width of the screen.
    TopPlacedStudents.jsx
        <Swiper
            //swiper modules
             breakpoints={{
              420: {
                slidesPerView: 2,
              },
              640: {
                slidesPerView: 3,
                spaceBetween: 30
              },
              768: {
                slidesPerView: 4,
              },
              1024: {
                slidesPerView: 5,
              },
              1280: {
                slidesPerView: 6,
              },
            }}
            //swiper modules
            >
        </Swiper>

    navigation prop specifies navigation elements and their associated classes. The elements which are defined with these classes will identify as either previous button or next button.

    TopPlacedStudents.jsx
        <Swiper
            //swiper modules
            navigation={{
              prevEl: ".swiper-prev", //previous button.
              nextEl: ".swiper-next", //next button.
              disabledClass: "swiper-button-disabled", 
            }}
            //swiper modules
        >    
        </Swiper>
    1. Two div elements for the previous and next navigation buttons are defined. These elements contain image elements for the navigation buttons which can be seen in TopPlacedStudents.jsx. Also, refer index.astro to see how we displayed the heading of the section.

    The above steps gives the following output:

    Top Placed Students Section

    Let's move on to the next section, where we will see how we implemented Placed Students section.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/top-recruiters/index.html b/docs/projects/tnp-website/frontend-components/top-recruiters/index.html index e55f61af..c3452d8b 100644 --- a/docs/projects/tnp-website/frontend-components/top-recruiters/index.html +++ b/docs/projects/tnp-website/frontend-components/top-recruiters/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Top Recruiters

    The Top Recruiters page of the website gives you information about the top companies and the recuiters during the placement procedure. It is accesible through the Home Page of the TNP Website.

    Adding Marquee component to the page​

    *Steps to add a Marquee Component:

    1. Opening LogosMarquee.tsx file in our projects root directory.

    2. A functional component called LogosMarquee and this component accepts two props: data and oppDirection.

      LogosMarquee.tsx
      const LogosMarquee: React.FC<{
          data: { imgUrl: string; name: string }[];
          oppDirection?: boolean | false;
      }> = ({ data, oppDirection })

    3. The Marquee component accepts two props: direction specifies the direction of the marquee animation. If oppDirection is true, the direction is set to "right", otherwise, it is set to "left", speed specifies the speed of the marquee animation.

      LogosMarquee.tsx
      <Marquee  direction={oppDirection ? "right" : "left"} speed={30}>

    4. The data prop is an array of objects, where each object has two properties: imgUrl (string) and name (string). The mapping iterates over each object in the data array and generates an <img> element for each logo image. The key prop is set to the name property for efficient rendering.

      LogosMarquee.tsx
      // Other part of section
      return (
      <Marquee  direction={oppDirection ? "right" : "left"} speed={30}>
        {data.map((d) => (
          <img
            key={d.name}
            className="h-8 object-contain"
            src={d.imgUrl}
            alt={d.name}
          />
        ))}
      </Marquee>

    5. Save the changes.

    6. Run yarn dev on the terminal to see the changes made in your local environment.

    Adding Logo and Content​

    Here's how we added logo and content of the company in the Top Recruiters section

    1. Opening index.astro in the 'Top Recruiters` component file in our projects root directory.

    2. An array called data, which contains multiple objects representing different logos. Each object has two properties: name (the name of the company) and imgUrl (the URL of the company's logo image).

      index.astro
      const data = [
          {
              name: "Accenture",
              imgUrl:
                  "https://images.squarespace-cdn.com/content/v1/5d23ae890b7dee000180ec51/1586367987659-BZ5L8BA1UZBLNVFMATYK/ke17ZwdGBToddI8pDm48kPjg6bM-W17gCtBWJ8Mjp2AUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYwL8IeDg6_3B-BRuF4nNrNcQkVuAT7tdErd0wQFEGFSnBItPiluyZS-UhYJJ6omcW3Y-2_8y8J8iHad74oPUfQWBOqOCHXbC31Z0m-iT7ZRQQ/accenturelogo.png",
          }
          // Repeated multiple times in a marquee
      ]

    3. This div element contains a text section with information about top recruiters. The text can be added added or edited from this section.

      index.astro
      <div class="flex flex-col mt-4 flex-initial xl:w-1/2 md:w-1/2 sm:w-full">
          <div class="m-8">
              <p class="text-3xl font-title pb-4">Top Recruiters</p>
              <p class="text-slate-700 font-Inter">
              TCET has an enviable record in placement of students. The institute has been accredited by major companies like Infosys, Tata Consultancy Services, iGATE, and Tech mahindra, etc.
              </p>
          </div>
      </div>

    4. The four LogosMarquee components are rendered within the carousel container. They are responsible for displaying the marquee of logos. Each LogosMarquee component receives the data prop, which is set to the data array defined earlier.

      index.astro
      <LogosMarquee client:only="react" data={data} />
      <LogosMarquee client:only="react" data={data} oppDirection />
      <LogosMarquee client:only="react" data={data} />
      <LogosMarquee client:only="react" data={data} oppDirection />

    5. Save the changes.

    6. Run yarn dev on the terminal to see the changes made in your local environment.

    On executing the above steps, the individual cards look like this:



    After successfully implementing the Top Recruiters component of the TNP (Training and Placement) website, the next step is to move forward with the implementation of the About Us component.

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/frontend-components/training/index.html b/docs/projects/tnp-website/frontend-components/training/index.html index a16c48ad..33b77c9c 100644 --- a/docs/projects/tnp-website/frontend-components/training/index.html +++ b/docs/projects/tnp-website/frontend-components/training/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Training

    The Training page on our website showcases a variety of training activities conducted by Training and Placement Cell along with professional student bodies under the T&P department. It highlights the initiatives aimed at enhancing the skills and knowledge of students, preparing them for future careers. Additionally, the page features major events organized by these student bodies, providing valuable opportunities for networking and career development.

    Huge Events Section​

    The HugeEvents Component, defined in the index.astro file, is a flexible and responsive section that showcases various events organized by Training and Placement Cell. . It allows displaying event details such as the event name, an associated image, and a description. This component is designed to provide an engaging and visually appealing way to present event information on the T&P Website.

    Lets take a look at how we implemented this component in our website.

    1. Open index.astro file.

    2. We now added the different events that are conducted by the organizations under T&P.

    3. The <div> classes in the provided code snippet define the styling and layout of the elements within the component.

    4. We them mention the event name, and event description in the code as shown below.

      We will see how we implemented those changes:

      index.astro
      <div class="flex flex-col md:flex-row md:justify-center gap-y-4">
          <div class="flex flex-col md:w-1/2">
              <div class="py-3 pl-3 text-3xl font-title bg-blue-50 rounded-lg text-blue-600">
                  <!-- Event name goes here -->
                  Hacktoberfest - GDSC-TCET
              </div>
              <div>
                  <img class="mt-4 object-contain w-full rounded-t-xl" src="../../events/pic_1.png" alt="pic_1">  
              </div>
              <div class="bg-blue-100 text-slate-700 font-Inter text-sm sm:text-base rounded-b-xl p-4">
                  <!-- Event description goes here -->
                  College level Hacktoberfest event was conducted to encourage students to
                  contribute to open source projects and to learn about the open source
                  community.
              </div>
          </div>
          <!--Other Huge Events--> 
      </div>

    5. Also, we added an image section in the middle to include some event pictures or banners.

    tip

    Similar steps were carried out for multiple Huge Events.

    After completing the above steps, we successfully incorporated the Huge Events section in our website. You can see the snapshot below:

    Huge Events Section

    Professional Bodies Section​

    This section showcases the professional student bodies of the Training and Placement Cell. It provides information about the different student bodies and their respective logos.

    It was implemented in a similar way as the Huge Events Section. Lets have a look at the changes that were made to achieve this.

    1. Opening index.astro file for Professional Bodies Section.

    2. The first <div> container contains the main heading of the section.

    3. Then, next we added the tagline of the section as shown in line number 8.

    4. After this we defined another parent container <div> which then included the images of the professional bodies withing the <img> and their name mentioned in the <span> tags.

      index.astro
      <div class="flex flex-col justify-center align-middle sm:w-2/6">
          <div class="font-semibold text-2xl xl:text-3xl font-Inter pb-2 uppercase">
              <!-- Title of the student bodies section -->
              professional student bodies of training and placement cell
          </div>
          <div class="text-slate-700 font-Inter text-lg">
              <!-- Description of the student bodies section -->
              Working together for a better Future!!
          </div>
      </div>
      <div class="md:flex-col sm:w-3/5 mt-4">
          <!-- Student body section 1 -->
          <div class="flex justify-left xl:justify-center gap-x-4 items-center bg-gray-50 rounded-lg p-6">
              <img 
                  class="w-10 object-contain" 
                  src="../../logos/tcet_shastra.png" 
                  alt="tcet_shastra" 
              />
              <span class="text-lg">TCET Shastra Coding Club</span>
          </div>
          <!-- More student body sections can be added here -->
      </div>
    tip

    Similar steps were carried out to add multiple Professional Student Bodies.

    After completing the above steps, we successfully incorporated the Professional Bodies section in our website. You can see the snapshot below:

    Professional Bodies Section
    ℹ️IMPORTANT

    Similarly, we have also included the TCET Open Source section in the Professional Bodies.
    You can refer it here: TCET Open Source section.

    Hero Section​

    While implementing Hero Section, we wanted to add a Carousel Section where we can display different images, so we created an Carousel.jsx file to implement a Swipe Carousel.

    Below are the steps for implementation:

    1. An array called data is defined, containing objects with caption and imgLink properties. Each object represents a slide in the Swiper component and holds the caption and image link for the slide.

      Carousel.jsx
      const data = [
          {
              caption: "Massa elementum mi sed magnis",
              imgLink: "student-workshop.png",    
          },
      // Other Image Links and Captions
      ],

    2. We then defined a Swiper component in our code to set various configurations and properties. The navigation configurations were updated in this component as we can shee in the highlighted part of the code below:

      Carousel.jsx
      export default () => {
      return (
          <Swiper
          // install Swiper modules
          navigation={{
              prevEl: ".swiper-prev",
              nextEl: ".swiper-next",
              disabledClass: "swiper-button-disabled",
          }}
          >

    3. Now we headed over to the index.astro file to add other components in the section.

    4. We added the Carousel component from the Carousel.jsx file, and in the next container we defined various activities under training with a short description about the same. The svg icons denoting the activites were also added.

      index.astro
      <div class="grid lg:grid-rows-2 lg:grid-cols-3 sm:grid-rows-3 sm:grid-cols-2 grid-cols-1 grid-rows-6 gap-4">
          <div>
              <Carousel client:load />
          </div>
          <div class="flex flex-col gap-y-3 p-4 rounded-2xl border border-[#CCC6FF] bg-[#EEECFF]">
              <div class="w-14 h-14 bg-[#A488F0] p-4 flex items-center justify-center rounded-full">
                  <img src="/misc/stacks.svg" alt="stack-of-books-icon" />
              </div>
              <h2 class="lg:text-2xl md:text-2xl text-xl font-title font-normal">
                  Aptitude Training
              </h2>
              <p class="lg:text-base md:text-sm text-[#475467] text-sm">
                  The main objective of this program is to make students employable by
                  providing them training on aptitude skills and soft skills. Under this,
                  we conduct various mock activities like Aptitude test, Group discussion
                  and personal interviews and more!
              </p>
          </div>
          <!-- Other activites added -->
      </div>
    tip

    Similar steps were carried out to add multiple Training Activities.

    After completing the above steps, we successfully incorporated the Hero section in our website. You can see the snapshot below:

    Hero Section of Training Component


    With the successful implementation of the provided code, we have successfully incorporated the Training page into our website. Moving forward, let's now explore how we integrated the Attendance Chart page into the T&P Website

    - - + + \ No newline at end of file diff --git a/docs/projects/tnp-website/getting-started/index.html b/docs/projects/tnp-website/getting-started/index.html index 7a4be6d6..f5c0e1cc 100644 --- a/docs/projects/tnp-website/getting-started/index.html +++ b/docs/projects/tnp-website/getting-started/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Getting Started

    info

    The TCET Training and Placment page is built using AstroJS, an all-in-one web framework designed for speed.

    Steps to run the site on your local system:​

    These are the steps you need to follow to get this site on your local system.

    Install Git in your computer​

    Follow these steps to install git in your computer.

    1. Go to https://git-scm.com/downloads.
    2. Click on Windows. Download should start.
    3. Go to downloads and install the package.

    Clone the repo​

    Open Git Bash in any folder and paste the following command

    git clone https://github.com/tcet-opensource/tnp-website

    Install NodeJS​

    1. Go to https://nodejs.org/en/download
    2. Select Current.
    3. Download the 64-bit .msi version. Follow the steps and install NodeJS.
    note

    It is important to have NodeJS in your system

    Open the folder in VS Code​

    1. Install VS Code if not installed.
    2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

    Install Important Packages/Dependencies​

    Install yarn globally 

    npm install -g yarn

    You can make changes to your respective files and changes will be shown once you have saved the file.

    Commands used to run locally​

    1. To run the commands, make sure that you have installed yarn globally first.
    2. All commands are run from the root of the project, from a terminal

    Here are a set of commands used to run locally:

    CommandAction
    yarnInstalls dependencies
    yarn devStarts local dev server at localhost:3000
    yarn buildBuild your production site to ./dist/
    yarn previewPreview your build locally, before deploying
    yarn astro ...Run CLI commands like astro add, astro check
    yarn astro --helpGet help using the Astro CLI

    Steps to run after a Pull / Merge:​

    1. To install all dependencies
    yarn
    1. To run local dev environment
    yarn dev
    - - + + \ No newline at end of file diff --git a/docs/resources/workflows/external-workflow/index.html b/docs/resources/workflows/external-workflow/index.html index b66b37b2..d97b80a1 100644 --- a/docs/resources/workflows/external-workflow/index.html +++ b/docs/resources/workflows/external-workflow/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Organization's External Workflow

    This document discusses the Git workflow for the contributors outside the Organization. All contributors are requested to be thorough with this workflow in order to keep up with the fast paced developement/production life cycle of our software.

    Pre-requisites​

    You need to have Git installed on your device in order to use the Git commands in the terminal. Visit GitHub's documentation to set-up Git on your device.

    As an IDE, Visual Studio Code being the best recommendation, must also be installed.

    Raising issues​

    Issues are the standard way to for communication between maintainers, contributors and end users on GitHub. They can be raised by anyone highlighting task allocation, bug reports, feature request, security vulnerablity, etc.

    If you wish to contribute to a specific part of the project, raise an issue and request the maintainers to assign it to you. This is where your work within the project begins.

    Forking the repository​

    As an outside contributor, you do not have an access to directly push changes to our repositories. Hence you need to have a copy of the same repository on your account in order to work on the project.

    Note

    There is no Git command required for this particular action, as the GitHub interface itself provides a Fork tab in the top right of the repository page as shown below.

    Forking the repository

    Upon creating a fork, a copy of the repository will be available on your GitHub account.

    Working on your repository​

    Cloning the repository​

    The next step involves cloning the system to your local repository. In the terminal, use the command git clone and paste your repository's URL to make changes in the project.

    Cloning the repository

    The clone command would look like the following. Note that your repository's URL would have your account's name in it.

    git clone <your repository url>

    Keeping your repository and local up-to-date​

    • While you are working on your project, several versions of code are scattered within the main repository in the Organization. You need to make sure that you always have the updated code before pushing to GitHub to avoid merge conflicts.
    • Before starting to work on your code, you must ensure that your repository is up-to-date with the main repository.
    info
    • Referring the above screenshot, the forked repository is not up-to-date with the repository.
    • If your repository is n commits behind main, you need to click on Sync Fork to fetch the changes from main repository to yours.
    • To bring these changes in your local, use the following command:
    git pull

    It is a good developer practice to always pull updated code before pushing your modified code to the repository.

    Reflecting your changes on GitHub​

    At any given time, you can check the status of your modifications on the local:

    git status

    Staging Area​

    • Staging Area in Git is is the middle ground between what you have done to your files and what was last committed in the repository.
    • Before reflecting your changes on GitHub, all files are needed to be added to this staging area.
    • To add files to staging area, use the following command:
    git add index.html
    • This adds index.html to the staging area. If you want to add all files, use git add .

    Commits and Pushes​

    • GitHub is a version control tool. To track all past versions, GitHub uses commits made by contributors to show changes made to the files.
    • To reflect your local changes on GitHub, they need to be committed first with the following command:
    git commit -m "<your commit message>"
    • You must ensure that <your commit message> is a valid explanation of the changes you have made to the files.

    Finally, once all of the above are done, push your changes to GitHub:

    git push

    Creating a Pull Request​

    As you keep pushing changes on your repository, GitHub will start adding the number of commits you are ahead of main. To reflect these changes in the Organization, you need to create a Pull Request upon pushing all the changes done on your local by clicking on Contribute.

    Creating a pull request

    By following the above step, you will be able to edit the PR on GitHub's editor.

    Writing good Pull Requests
    • Your pull request title should suggest what changes you have done in your repository.
    • The title should start with a prefix within square brackets. It can reflect [FEATURE], [FIX], [MINOR], [MAJOR], [PAGE], [DEPLOYMENT], etc.
    • As a good developer practice, you should elaboratively describe what changes you have made to the code and highlight them in the description.
    • Upon submitting the pull request, the administrator is notified of your changes and can approve, reject or request changes to your pull request.
    • You can also notify repository maintainers and engage conversations with them on the pull request. An example of such conversation can be observed here:

    Conversation

    The Next Steps​

    If the maintainer requests changes in your pull request, you can add further commits on the pull request and mark the changes as resolved for further approval from the maintainer.

    Once a maintainer approves your changes, then finally your pull request will be merged to the Organization repository.

    This is the entire developer cycle for a contributor working from outside the Organization. Every time a maintainer approves your issue, you should follow the same make meaningful contributions to our projects.

    - - + + \ No newline at end of file diff --git a/docs/resources/workflows/internal-workflow/index.html b/docs/resources/workflows/internal-workflow/index.html index 095afa9a..edbb3329 100644 --- a/docs/resources/workflows/internal-workflow/index.html +++ b/docs/resources/workflows/internal-workflow/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -22,7 +22,7 @@

    Organization's Internal Workflow

    This document discusses the Git workflow for members of the Organization. All members are requested to be thorough with this workflow in order to keep up with the fast paced developement/production life cycle of our software.

    GitHub Pre-requisites​

    Assuming you already are a part of the Organization, you might not need to do this. But if you don't have Git set-up on your local system, visit GitHub's documentation to set-up everything before beginning work in the projects.

    Understanding Issues​

    Issues are the standard way to for communication between maintainers, contributors and end users on GitHub. They can be raised by anyone highlighting task allocation, bug reports, feature request, security vulnerablity, etc. Team Leads are responsible to assign an issue to you. This is where your work within the project begins.

    Branches - Your personal workspace​

    Let's say your Team Lead has assigned you an issue. It would look something like this:

    Team Lead assigning issues

    Comments within an issue can be used by the Team Lead to explain to you the task assigned and how to approach it. Your issue may also contain labels to highlight what kind of work you'll be doing and what's the expectations of the end user.

    To work on the task assigned to you, the very first thing you need to do is to Create a Branch which is linked to your issue. It is necessary to do so in order to link your work to the issue. You can do this within the issue itself.

    Creating a branch

    Important

    Naming your branch must be according to the following guidelines:

    • The branch name must always start with issue number. It is always written beside the issue title (ex: #64).
    • The branch name should not be too big and highlight the purpose of the branch.
    • For the above screenshot attached, the branch name would be 64-resources or something similar.

    Working on your branch​

    Upon creating the branch, the very first thing you need is that branch's contents within your local system.

    Cloning the repository​

    You must always ensure that you are working on your branch in the repository. Branches are a great way to get the privacy in the codespace to make your changes without affecting the main project code. This ensures that you can experiment as much as you want without harming the project at all.

    While cloning the project, you should specify the branch which you will be working on in your local using -b command. Your clone command would look similar to the following:

    git clone -b <your-branch-name> <repository-url>

    Now you can work on the project on your local repository.

    Keeping your branch and local up-to-date​

    • Now that you have your branch and several versions of code scattered around GitHub and your local storage. You need to make sure that you always have the updated code before pushing to GitHub to avoid merge conflicts.
    • Before starting to work on your code, you must ensure that your branch is up-to-date with the main branch. Keep your branch up-to-date
    • If your branch is n commits behind main, you need to open a pull request to merge main branch content to your branch.
    • To bring these changes in your local, use the following command:
    git pull

    It is a good developer practice to always pull updated code before pushing your modified code to the repository.

    Reflecting your changes on GitHub​

    At any given time, you can check the status of your modifications on the local:

    git status

    Staging Area​

    • Staging Area in Git is is the middle ground between what you have done to your files and what was last committed in the repository.
    • Before reflecting your changes on GitHub, all files are needed to be added to this staging area.
    • To add files to staging area, use the following command:
    git add index.html
    • This adds index.html to the staging area. If you want to add all files, use git add .

    Commits and Pushes​

    • GitHub is a version control tool. To track all past versions, GitHub uses commits made by contributors to show changes made to the files.
    • To reflect your local changes on GitHub, they need to be committed first with the following command:
    git commit -m "<your commit message>"
    • You must ensure that <your commit message> is a valid explanation of the changes you have made to the files.

    Finally, once all of the above are done, push your changes to GitHub:

    git push origin <your-branch-name>

    Creating a Pull Request​

    • In all projects under TCET Open Source, the main branch is locked by the repository admin to ensure that no outside contributor directly edits the main source code of the project.
    • Upon pushing to your branch, you would be able to see updates on GitHub:

    Updates in your branch

    • You can click on Compare and Pull Request (or alternatively, visit your branch and click on Contribute) to create a Pull Request.

    By following the above step, you will be able to edit the PR on GitHub's editor.

    Writing good Pull Requests
    • The main branch is only merged into by your Team Lead. You should push to staging or any other branch decided by the Team to work on.
    • Your pull request title should suggest what changes you have done in your branch.
    • The title should start with a prefix within square brackets. It can reflect [FEATURE], [FIX], [MINOR], [MAJOR], [PAGE], [DEPLOYMENT], etc.
    • As a good developer practice, you should elaboratively describe what changes you have made to the code and highlight them in the description.

    Pull request

    • Upon submitting the pull request, the administrator is notified of your changes and can approve, reject or request changes to your pull request.
    • You can also notify repository maintainers and engage conversations with them on the pull request. An example of such conversation can be observed here:

    Conversation

    The Next Steps​

    If the maintainer requests changes in your pull request, you can add further commits on the pull request and mark the changes as resolved for further approval from the maintainer.

    Once a maintainer approves your changes, then finally your pull request will be merged to the main branch.

    This is the entire developer cycle for a team member contributing within the Organization. Every time a new issue is raised, you should follow the same to work with the rest of the team efficiently.

    - - + + \ No newline at end of file diff --git a/index.html b/index.html index 625d160e..34aca593 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,13 @@ - - + +
    tcet-icon

    TCET Open Source

    Empowering students via
    Open Source, in Education

    Community-driven efforts by the students of TCET
    to create, build and promote open source software.

    View Projects
    arrow-down
    hero-section-lefthero-section-centerhero-section-right
    Developed Projects
    T&P Website
    A necessary website for all students to be aware of the current placement activities and upcoming opportunities.
    project-img
    project-img
    project-img
    project-img
    project-img
    prev-image-btn
    next-image-btn

    Under Development Projects

    These are some projects under development
    Project Image
    TCET Linux

    TCET Linux is Custom Linux distribution, based on Arch Linux built for enhancing college infrastructure and promoting Linux in software engineering education. Checkout the the project and official release of TCET Linux now!

    Github
    Project Image
    Resume Screener

    FAANGM like ATS which uses AI to analyse your resume and give you recommendations on how to improve. It provides a standardized and unbiased approach to screening resumes.

    Github
    Project Image
    ERP System

    A software to store, analyze, manage and supervise the college data in an efficient way. It covers all aspects; administration, infrastructure, and employee, teacher and student activity.

    Github
    prev-image-btn
    next-image-btn
    img
    About
    TCET-OPEN SOURCE
    The motivation behind formation of the Organization was simple. An initiative undertaken for the students, by the students to streamline software engineering education and development under the banner of a single Organization, and to provide visibility to the projects being undertaken by the student community.
    0+
    Number of projects incubated
    0+
    Number of contributors

    Teams

    Frontend Team
    Frontend Team
    Works on designing, developing, and maintaining the user experience aspects of the software.
    Backend Team
    Backend Team
    Works on creating and maintaining the server-side of the software and API development.
    UI/UX Team
    UI/UX Team
    Provides positive user experience, visual layouts and aesthetics to the software.
    Docs Team
    Docs Team
    Maintains the updated information of the projects and makes it accessible and user-friendly.
    DevOps Team
    DevOps Team
    Works on efficient development, testing, deployment, and maintenance of the software.
    Production and Linux Team
    Production and Linux Team
    Plays a crucial role in development, maintenance of TCET Linux.
    AI Team
    AI Team
    Works on automation, data analytics and development in AIML technologies.
    Graphics Team
    Graphics Team
    Works on branding, content creation and curation, and project management aspects.
    tcet-icon
    TCET Open Source
    DocsBlogLive ProjectsCooking ProjectsAbout usTeamContact
    Copyright 2022-2023 @ TCET Opensource.
    - - + + \ No newline at end of file diff --git a/search/index.html b/search/index.html index a472e3b7..c2f862f5 100644 --- a/search/index.html +++ b/search/index.html @@ -9,8 +9,8 @@ - - + +
    @@ -21,7 +21,7 @@

    Search the documentation

    - - + + \ No newline at end of file