diff --git a/src/components/ArticleNavigation.astro b/src/components/ArticleNavigation.astro index a82ff92..4763d62 100644 --- a/src/components/ArticleNavigation.astro +++ b/src/components/ArticleNavigation.astro @@ -10,7 +10,7 @@ let currentChapterIndex = chapters.findIndex((c) => path.includes(c.slug)); currentChapterIndex > 0 && (

previous

- + {chapters[currentChapterIndex - 1].data.title}
@@ -20,7 +20,7 @@ let currentChapterIndex = chapters.findIndex((c) => path.includes(c.slug)); currentChapterIndex < chapters.length - 1 && (

next

- + {chapters[currentChapterIndex + 1].data.title}
diff --git a/src/components/client/CourseContents.svelte b/src/components/client/CourseContents.svelte index d10eef0..6aaff5d 100644 --- a/src/components/client/CourseContents.svelte +++ b/src/components/client/CourseContents.svelte @@ -12,7 +12,7 @@ {#if content.depth === 1}
  • {content.data.title} @@ -20,7 +20,7 @@ {#each findSubChapters(content.slug) as cont}
  • {cont.data.title} diff --git a/src/content/101-git/asennus.md b/src/content/101-git/asennus.md new file mode 100644 index 0000000..4a331aa --- /dev/null +++ b/src/content/101-git/asennus.md @@ -0,0 +1,14 @@ +--- +title: Asennusohjeet +chapter: 1 +description: Asennusohjeet Gitille +--- + +# Git asennusohjeet + +## Windows 10/11 +Windows ohjeet tähän +## MacOS +Mac ohjeet tähän +## Linux +Linux ohjeet tähän \ No newline at end of file diff --git a/src/content/101-git/index.md b/src/content/101-git/index.md new file mode 100644 index 0000000..ffdca2d --- /dev/null +++ b/src/content/101-git/index.md @@ -0,0 +1,22 @@ +--- +title: Git perusteet +chapter: 0 +desc: Tervetuloa Git-perusteiden kurssille! +--- + +# Git perusteet + +Tervetuloa hauskimmalle Git kurssille. Tämän kurssin jälkeen Git ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi. + +## Oppimistavoitteet + +- Kartoitetaan, missä määrin Git-osaamista tarvitaan työelämässä. +- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa. +- Ymmärrät, Git-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*). +- Osaat hyödyntää Gitin peruskomentoja VS Codessa tai terminaalissa. +- Tiedät mikä on Github ja Gitlab, ja miten ne eroavat Git-versiohallinnasta. + +## Edellytykset + +- Toimiva kone, Win/Mac/Linux +- Git-asennettuna (kts. seuraava luku) \ No newline at end of file diff --git a/src/content/testi/html.md b/src/content/101-web/html/html.md similarity index 98% rename from src/content/testi/html.md rename to src/content/101-web/html/html.md index bb5919e..9e37c26 100644 --- a/src/content/testi/html.md +++ b/src/content/101-web/html/html.md @@ -1,6 +1,7 @@ --- title: 'HTML alkeet' -pubDate: 'Oct 5 2023' +chapter: 1 +desc: 'Tähän on heitetty vähän alkeita HTML:stä' --- # Tehtävät diff --git a/src/content/101-web/html/index.md b/src/content/101-web/html/index.md new file mode 100644 index 0000000..bdd680d --- /dev/null +++ b/src/content/101-web/html/index.md @@ -0,0 +1,22 @@ +--- +title: Hötömölöt +chapter: 0 +desc: Tervetuloa HTML-perusteiden kurssille! +--- + +# Hötömölöt + +Tervetuloa hauskimmalle HTML kurssille. Tämän kurssin jälkeen HTML ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi. + +## Oppimistavoitteet + +- Kartoitetaan, missä määrin HTML-osaamista tarvitaan työelämässä. +- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa. +- Ymmärrät, HTML-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*). +- Osaat hyödyntää HTMLin peruskomentoja VS Codessa tai terminaalissa. +- Tiedät mikä on HTMLhub ja HTMLlab, ja miten ne eroavat HTML-versiohallinnasta. + +## Edellytykset + +- Toimiva kone, Win/Mac/Linux +- HTML-asennettuna (kts. seuraava luku) \ No newline at end of file diff --git a/src/content/101-web/index.md b/src/content/101-web/index.md new file mode 100644 index 0000000..f34bcd4 --- /dev/null +++ b/src/content/101-web/index.md @@ -0,0 +1,22 @@ +--- +title: Web perusteet +chapter: 0 +desc: Tervetuloa Web-perusteiden kurssille! +--- + +# Web perusteet + +Tervetuloa hauskimmalle Web kurssille. Tämän kurssin jälkeen Web ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi. + +## Oppimistavoitteet + +- Kartoitetaan, missä määrin Web-osaamista tarvitaan työelämässä. +- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa. +- Ymmärrät, Web-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*). +- Osaat hyödyntää Webin peruskomentoja VS Codessa tai terminaalissa. +- Tiedät mikä on Webhub ja Weblab, ja miten ne eroavat Web-versiohallinnasta. + +## Edellytykset + +- Toimiva kone, Win/Mac/Linux +- Web-asennettuna (kts. seuraava luku) \ No newline at end of file diff --git a/src/content/101-web/js/index.md b/src/content/101-web/js/index.md new file mode 100644 index 0000000..d41f01f --- /dev/null +++ b/src/content/101-web/js/index.md @@ -0,0 +1,22 @@ +--- +title: JavaScript perusteet +chapter: 0 +desc: Tervetuloa JS-perusteiden kurssille! +--- + +# JS perusteet + +Tervetuloa hauskimmalle JS kurssille. Tämän kurssin jälkeen JS ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi. + +## Oppimistavoitteet + +- Kartoitetaan, missä määrin JS-osaamista tarvitaan työelämässä. +- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa. +- Ymmärrät, JS-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*). +- Osaat hyödyntää JSin peruskomentoja VS Codessa tai terminaalissa. +- Tiedät mikä on JShub ja JSlab, ja miten ne eroavat JS-versiohallinnasta. + +## Edellytykset + +- Toimiva kone, Win/Mac/Linux +- JS-asennettuna (kts. seuraava luku) \ No newline at end of file diff --git a/src/content/testi/js.md b/src/content/101-web/js/js.md similarity index 97% rename from src/content/testi/js.md rename to src/content/101-web/js/js.md index 95926ef..ac73622 100644 --- a/src/content/testi/js.md +++ b/src/content/101-web/js/js.md @@ -1,6 +1,7 @@ --- title: 'JS alkeet' -pubDate: 'Oct 10 2023' +chapter: 1 +desc: Tervetuloa JS-perusteiden kurssille! --- # Tehtäviä diff --git a/src/content/blogi/16-11-2023/npm-vs-pnpm.md b/src/content/blogi/16-11-2023/npm-vs-pnpm.md new file mode 100644 index 0000000..0ed73a0 --- /dev/null +++ b/src/content/blogi/16-11-2023/npm-vs-pnpm.md @@ -0,0 +1,42 @@ +--- +title: npm vs pnpm +author: wesenbergg +readTime: 4 +puDate: '16.11.2023' +desc: '5 syytä miksi pnpm lyö npm:n kanvaasille' +tags: ['node', 'js', 'ohjelmistokehitys', 'package manager', 'vertailu', 'devex', 'dx'] +--- +# Mikä JS pakettijärjestelmä sopii tarpeisiisi pnpm vs npm + +Pakettihallintajärjestelmät, kuten npm (Node Package Manager), ovat keskeinen osa nykyaikaista JavaScript-kehitystä, ja niillä on vaikutusta projektien hallintaan ja riippuvuuksien käsittelyyn. pnpm on yksi vaihtoehtoinen pakettihallintajärjestelmä, ja sen käyttäminen voi tarjota joitakin etuja verrattuna perinteiseen npm:ään. + +Tässä viisi hyvää syytä, miksi kannattaa siirtyä pnpm. + +## Levyn tilan optimointi: +pnpm käyttää linkitystä ja symbolisia linkkejä vähentääkseen levyn käyttöä. Tämä voi olla erityisen hyödyllistä suurissa projekteissa, joissa on paljon riippuvuuksia. pnpm jakaa yhteiset riippuvuudet ja säästää siten tilaa. + +## Hyvästi globaalit paketit: +pnpm ei tarvitse globaaleja paketteja, toisin kuin npm. Tämä tarkoittaa, että projektit voivat olla eristettyjä toisistaan, eikä yhteen projektiin asennetut paketit vaikuta muihin projekteihin. + +## Ei node_module duplikaatteja: +pnpm jakaa paketit eri projektien välillä, mikä vähentää tarvetta duplikaatti node_modules-kansioille. Tämä voi säästää sekä aikaa että levytilaa. + +## Nolla installaatio: +pnpm ei vaadi erillistä asennusvaihetta, kuten npm:n npm install. Tämä tarkoittaa, että projektit ovat nopeampia pystyttää, ja kehittäjän ei tarvitse odottaa riippuvuuksien asennusta. + +## Yhteensopivuus npm:n kanssa: +pnpm on yhteensopiva npm:n kanssa, joten voit käyttää sitä olemassa olevissa projekteissa, jotka on alun perin luotu npm:llä. + +On tärkeää huomata, että valinta npm:n ja pnpm:n välillä riippuu monista tekijöistä, kuten projektin tarpeista, tiimin kokemuksesta ja henkilökohtaisista mieltymyksistä. Jos projekti hyötyy pnpm:n tarjoamista eduista, se voi olla harkitsemisen arvoinen vaihtoehto. + +## Yhteenveto + +Työkalu sopii erinomaisesti vapaa-ajan projekteihin. Niitä kun tuppaa kasaantumaan kymmenittäin, niin pnpm karsii node_module duplikaattiviidakkoa kuin machete. Lisäksi muistelen aloittelevana koodarina, kun unohti pari kertaa asentaa riippuvuudet `npm install` komennolla, siitä seurasi hämmennystä ja debuggausta. pnpm:llä aloittelevan koodarin ei tarvitse tietää tätä tuskaa. + +### pnpm:n hyödyt +- Säästää tilaa kiintolevyllä. +- Yksinkertaistettu devauskokemus. +- Hyvä yhteensopivuus, Node.js:n oletus (npm)pakettijärjestelmän kanssa. +### pnpm:n puutteet +- Ei ole oletuksena, joten vaatii erillisen asennuksen. +- Suhteellisen vähän käytetty yrityksissä. \ No newline at end of file diff --git a/src/content/blogi/17-11-2023/10-askelta-web-kehitykseen.md b/src/content/blogi/17-11-2023/10-askelta-web-kehitykseen.md new file mode 100644 index 0000000..6db16a1 --- /dev/null +++ b/src/content/blogi/17-11-2023/10-askelta-web-kehitykseen.md @@ -0,0 +1,49 @@ +--- +title: 10 askelta web kehitykseen +author: wesenbergg +readTime: 5 +puDate: '17.11.2023' +desc: 'Web-kehityksen urapolun aloittaminen voi tuntua aluksi haastavalta, mutta se on saavutettavissa vaiheittain. Tässä on muutama askel, jotka voivat auttaa sinua aloittamaan web-kehityksen urapolun.' +tags: ['node', 'js', 'ohjelmistokehitys', 'package manager', 'vertailu', 'devex', 'dx'] +--- + +Web-kehityksen urapolun aloittaminen voi tuntua aluksi haastavalta, mutta se on saavutettavissa vaiheittain. Tässä on muutama askel, jotka voivat auttaa sinua aloittamaan web-kehityksen urapolun: + +1. Opi Perusteet: +Aloita oppimalla perusteet web-tekniikoista, kuten HTML, CSS ja JavaScript. Nämä ovat välttämättömiä rakentaessasi verkkosivuja ja -sovelluksia. + +2. Harjoittele Projektien Kanssa: +Paras tapa oppia on käytännön harjoittelu. Luo omia projekteja, kuten henkilökohtainen verkkosivu tai yksinkertainen verkkosovellus. Tämä auttaa sinua soveltamaan oppimiasi taitoja. + +3. Syvennä JavaScript-osaamistasi: +Koska JavaScript on keskeinen web-kehityskieli, syvennä osaamistasi sen suhteen. Opettele käyttämään moderneja JavaScript-kehyksiä ja kirjastoja, kuten React, Angular tai Vue.js. + +4. Tutustu Versionhallintaan: +Opi käyttämään versionhallintaa, kuten Git. Tämä auttaa sinua seuraamaan muutoksia koodissasi, tekemään yhteistyötä muiden kanssa ja hallitsemaan projektien kehitystä. + +5. Ymmärrä Responsiivinen Suunnittelu: +Opettele responsiivisen suunnittelun periaatteet, jotta voit luoda sivustoja, jotka näyttävät hyvältä eri laitteilla. + +6. Tutustu Backend-kehitykseen: +Tutustu backend-kehitykseen oppimalla jokin backend-kielistä, kuten **Node.js (JavaScript)**, Java, C#, Python tai PHP. Ymmärrä perusteet tietokannoista (Mongo, Firebase tai SQL) ja REST-rajapinnan suunnittelusta. + +*Node.js on vahva suositus, koska sitä käytetään lähes väistämättömästi kaikissa moderneissa web-projekteissa. React, Svelte, Vue tms JS-frameworkit hyödyntävät Node ekosysteemiä.* + +7. Opi Tietoturva-asioista: +Ymmärrä perusteet web-tietoturvasta. Opi, miten suojata verkkosivusi haittaohjelmilta, tietomurroilta ja muita yleisiltä tietoturvaongelmilta. Perusasioihin kuuluu: +- Käyttäjän todennus ja valtuutus +- Käyttäjäsyötteen tarkastus ja sanitointi +- Yleisempien tietoturva uhkien tunnistaminen (injektio, XSS tms) + +8. Rakenna Portfoliota: +Luo portfolio, joka sisältää projektisi, taitosi ja mahdollisesti linkkejä verkkosivuihisi. Portfolion avulla voit näyttää taitosi potentiaalisille työnantajille. + +9. Osallistu Yhteisöihin (verkostoidu): +Liity web-kehitysyhteisöihin, Discord-servereihin, Reddit-foorumiin, Slack-ryhmiin tai GitHubiin. Voit oppia muiden kokemuksista ja saada apua ongelmatilanteissa. Parhaat työpaikat löytyvät verkostoista! + +10. Jatkuva Itsensä Kehittäminen: +Web-kehitys on ala, jossa teknologiat muuttuvat nopeasti. Pysy ajan tasalla uusimmista trendeistä, kirjastoista ja kehyksistä. Opi jatkuvasti ja ole valmis sopeutumaan muutoksiin. + +Älä unohda, että kärsivällisyys ja säännöllinen harjoittelu ovat avainasemassa. Aloittaminen voi tuntua ylivoimaiselta, mutta vähitellen voit kehittää taitojasi ja rakentaa menestyksekkään uran web-kehityksessä. Aseta itsellesi tavoitteita ja deadlineja. Avainasemassa on löytää miellyttävä tapa oppia, ja ympäröidä itsesi ihmisillä, jotka jakavat kanssasi saman tavoitteen. + +**Onnea matkaan!** \ No newline at end of file diff --git a/src/content/config.ts b/src/content/config.ts index d167e98..4c50c75 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,6 +1,6 @@ import { defineCollection, z } from 'astro:content'; -const blog = defineCollection({ +const blogi = defineCollection({ // Type-check frontmatter using a schema schema: z.object({ title: z.string(), @@ -19,4 +19,15 @@ const testi = defineCollection({ }) }) -export const collections = { blog, testi }; +const courseCollection = defineCollection({ + schema: z.object({ + title: z.string(), + chapter: z.number(), + desc: z.string() + }) +}) + +const git101 = courseCollection; +const web101 = courseCollection; + +export const collections = { blogi, testi, "101-git": git101, "101-web": web101 }; diff --git a/src/layouts/CourseChapterLayout.astro b/src/layouts/CourseChapterLayout.astro index 3b868ee..069c02f 100644 --- a/src/layouts/CourseChapterLayout.astro +++ b/src/layouts/CourseChapterLayout.astro @@ -2,21 +2,22 @@ import type { MarkdownHeading } from "astro"; import TableOfContents from "../components/client/TableOfContents.svelte"; import generateToc from "../utils/generateToc.ts"; -import { getCollection } from "astro:content"; +import { getCollection, type CollectionKey } from "astro:content"; import CourseContents from "../components/client/CourseContents.svelte"; import Layout from "./Layout.astro"; import ArticleNavigation from "../components/ArticleNavigation.astro"; export interface Props { title?: string; + collectionKey: string; description?: string; headings: MarkdownHeading[]; } -const { title, description, headings } = Astro.props; +const { title, description, headings, collectionKey = "testi" } = Astro.props; const toc = generateToc(headings); const getCourseNav = async () => { - const posts = await getCollection("testi"); + const posts = await getCollection(collectionKey as CollectionKey); return posts.map((post) => ({ id: post.id, @@ -38,3 +39,37 @@ let chapters = await getCourseNav(); + + diff --git a/src/pages/index.astro b/src/pages/index.astro index e83ea06..cc58a58 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,6 +4,6 @@ import Layout from "../layouts/Layout.astro";
    - first post + first post
    diff --git a/src/pages/kurssit/101-git/[...slug].astro b/src/pages/kurssit/101-git/[...slug].astro new file mode 100644 index 0000000..f3d5921 --- /dev/null +++ b/src/pages/kurssit/101-git/[...slug].astro @@ -0,0 +1,27 @@ +--- +import { + type CollectionEntry, + type CollectionKey, + getCollection, +} from "astro:content"; +import CourseChapterLayout from "../../../layouts/CourseChapterLayout.astro"; + +const collectionKey: CollectionKey = "101-git"; + +export const getStaticPaths = async () => { + const posts = await getCollection("101-git"); + + return posts.map((post) => ({ + params: { slug: post.slug }, + props: post, + })); +}; +type Props = CollectionEntry; + +const { collection, render } = Astro.props; +const { Content, headings } = await render(); +--- + + + + diff --git a/src/pages/kurssit/101-git/index.astro b/src/pages/kurssit/101-git/index.astro new file mode 100644 index 0000000..3feec0b --- /dev/null +++ b/src/pages/kurssit/101-git/index.astro @@ -0,0 +1,9 @@ +--- +import Layout from "../../../layouts/Layout.astro"; +--- + + +
    +

    Git Perusteet

    +
    +     diff --git a/src/pages/kurssit/101-web/[...slug].astro b/src/pages/kurssit/101-web/[...slug].astro new file mode 100644 index 0000000..b774673 --- /dev/null +++ b/src/pages/kurssit/101-web/[...slug].astro @@ -0,0 +1,26 @@ +--- +import { + type CollectionEntry, + type CollectionKey, + getCollection, +} from "astro:content"; +import CourseChapterLayout from "../../../layouts/CourseChapterLayout.astro"; + +const collectionKey: CollectionKey = "101-web"; +export const getStaticPaths = async () => { + const posts = await getCollection("101-web"); + + return posts.map((post) => ({ + params: { slug: post.slug }, + props: post, + })); +}; +type Props = CollectionEntry; + +const { collection, render } = Astro.props; +const { Content, headings } = await render(); +--- + + + + diff --git a/src/pages/kurssit/101-web/index.astro b/src/pages/kurssit/101-web/index.astro new file mode 100644 index 0000000..cd6adfd --- /dev/null +++ b/src/pages/kurssit/101-web/index.astro @@ -0,0 +1,21 @@ +--- +import Layout from "../../../layouts/Layout.astro"; +import { getCollection } from "astro:content"; + +const posts = await getCollection("101-web"); +--- + + +
    +

    Web Perusteet

    + +
    +     diff --git a/src/pages/kurssit/index.astro b/src/pages/kurssit/index.astro index b7293ef..4572156 100644 --- a/src/pages/kurssit/index.astro +++ b/src/pages/kurssit/index.astro @@ -3,5 +3,20 @@ import Layout from "../../layouts/Layout.astro"; --- -

    Hello Kurssit

    +

    Kurssit

    +

    + Niinku eräs koodari aikoinaan sanoi *Keep it stupid simple*. Loput oli + historiaa. Tämän sanoman innoittamana kurssin kontentti pyritään pitämään + mahdollisimman yksinkertaisena. +

    +

    Aloittelijaystävälliset kurssit

    + +

    Haluatko lisää haastetta

    +

    + Odota vähän. Ehkä sitä joku päivä jaksaa kirjoittaa vähän haastavempaa + materiaalia. +

    diff --git a/src/pages/testi/[...slug].astro b/src/pages/testi/[...slug].astro index 5d33ec7..83529fb 100644 --- a/src/pages/testi/[...slug].astro +++ b/src/pages/testi/[...slug].astro @@ -1,7 +1,12 @@ --- -import { type CollectionEntry, getCollection } from "astro:content"; +import { + type CollectionEntry, + type CollectionKey, + getCollection, +} from "astro:content"; import CourseChapterLayout from "../../layouts/CourseChapterLayout.astro"; +const collectionKey: CollectionKey = "testi"; export const getStaticPaths = async () => { const posts = await getCollection("testi"); @@ -10,14 +15,14 @@ export const getStaticPaths = async () => { props: post, })); }; -type Props = CollectionEntry<"testi">; +type Props = CollectionEntry; const { collection, render } = Astro.props; const { Content, headings } = await render(); --- - +