├── .github
    └── FUNDING.yml
├── .gitignore
├── .vscode
    ├── launch.json
    └── settings.json
├── Makefile
├── README.md
├── components
    ├── content-container.js
    ├── global.scss
    ├── header.js
    ├── image-full.js
    ├── layout.js
    ├── left-side.js
    ├── legal.js
    ├── link.js
    ├── made-by.js
    ├── nav.js
    ├── pop-up.js
    ├── refresh-pop-up.js
    ├── right-side.js
    ├── scastie.js
    ├── skb-list.js
    ├── skb-page.js
    └── top-container.js
├── jsconfig.json
├── lib
    ├── clean-object.js
    ├── discord-link.js
    ├── environment.js
    ├── fetch-local-lessons.js
    ├── hover.js
    ├── lesson-save.js
    ├── local-storage.js
    └── routes.js
├── netlify.toml
├── next-sitemap.config.js
├── next.config.js
├── package.json
├── pages
    ├── 404.js
    ├── _app.js
    ├── _document.js
    ├── about.js
    ├── index.js
    └── scala
    │   ├── _-placeholder.js
    │   ├── _-wildcard.js
    │   ├── abstract-class.js
    │   ├── applicative.js
    │   ├── apply.js
    │   ├── call-by-name-parameters.js
    │   ├── case-class-copy.js
    │   ├── case-class-unapply.js
    │   ├── case-class.js
    │   ├── case-object.js
    │   ├── challenge-1.js
    │   ├── class-new.js
    │   ├── companion-objects.js
    │   ├── comparators.js
    │   ├── constraint-inheritance.js
    │   ├── contexts.js
    │   ├── covariance.js
    │   ├── curry.js
    │   ├── defined-type.js
    │   ├── either.js
    │   ├── enumeration.js
    │   ├── extractor-pattern.js
    │   ├── flatmap.js
    │   ├── foldable.js
    │   ├── foldleft.js
    │   ├── for-comprehension.js
    │   ├── functor.js
    │   ├── future.js
    │   ├── generic-trait.js
    │   ├── higher-kind.js
    │   ├── implicit-class.js
    │   ├── implicit-conversion.js
    │   ├── implicit-proof.js
    │   ├── implicit-val.js
    │   ├── infix-notation.js
    │   ├── list-filter-method.js
    │   ├── list-flatten.js
    │   ├── list-of-option-flatten.js
    │   ├── list-parallel.js
    │   ├── list-pattern-matching.js
    │   ├── list-sum-method.js
    │   ├── list-zip.js
    │   ├── literal-identifiers.js
    │   ├── main.js
    │   ├── map-for-list.js
    │   ├── method-with-arguments.js
    │   ├── methods.js
    │   ├── monad.js
    │   ├── multiple-inheritance.js
    │   ├── objects.js
    │   ├── operators.js
    │   ├── option-map.js
    │   ├── option-pattern-matching.js
    │   ├── option.js
    │   ├── pattern-matching-at.js
    │   ├── pattern-matching-for-case-class.js
    │   ├── pattern-matching-or.js
    │   ├── pattern-matching.js
    │   ├── random.js
    │   ├── range.js
    │   ├── recursion.js
    │   ├── regex.js
    │   ├── repeated-parameters.js
    │   ├── sealed.js
    │   ├── self-referred-type.js
    │   ├── set.js
    │   ├── star-parameter.js
    │   ├── stream.js
    │   ├── string-format.js
    │   ├── string-interpolation.js
    │   ├── thread-sleep.js
    │   ├── trait.js
    │   ├── traversable.js
    │   ├── try.js
    │   ├── tuple.js
    │   ├── typeclass.js
    │   ├── unapply-magic.js
    │   ├── upper-constraint.js
    │   ├── val-lazy-def.js
    │   ├── val-pattern-matching.js
    │   ├── values.js
    │   └── visibility.js
└── public
    ├── _redirects
    ├── assets
        ├── Discord-Logo+Wordmark-Black.svg
        ├── GitHub-Mark-64px.png
        ├── Patreon-Logo.png
        ├── Pinterest-logo.png
        ├── linkedin-xxl.png
        ├── medium-logo.png
        └── tour-of-scala-logo.png
    ├── favicon
        ├── android-icon-144x144.png
        ├── android-icon-192x192.png
        ├── android-icon-36x36.png
        ├── android-icon-48x48.png
        ├── android-icon-72x72.png
        ├── android-icon-96x96.png
        ├── apple-icon-114x114.png
        ├── apple-icon-120x120.png
        ├── apple-icon-144x144.png
        ├── apple-icon-152x152.png
        ├── apple-icon-180x180.png
        ├── apple-icon-57x57.png
        ├── apple-icon-60x60.png
        ├── apple-icon-72x72.png
        ├── apple-icon-76x76.png
        ├── apple-icon-precomposed.png
        ├── apple-icon.png
        ├── browserconfig.xml
        ├── favicon-16x16.png
        ├── favicon-32x32.png
        ├── favicon-96x96.png
        ├── favicon.ico
        ├── manifest.json
        ├── ms-icon-144x144.png
        ├── ms-icon-150x150.png
        ├── ms-icon-310x310.png
        └── ms-icon-70x70.png
    └── scripts
        └── google.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: leobenkel
 4 | patreon: leobenkel
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | /.netlify
 4 | /netlify
 5 | sitemap.xml
 6 | package-lock.json
 7 | yarn.lock
 8 | 
 9 | # dependencies
10 | /node_modules
11 | /.pnp
12 | .pnp.js
13 | 
14 | # testing
15 | /coverage
16 | 
17 | # next.js
18 | /.next/
19 | /out/
20 | 
21 | # production
22 | /build
23 | 
24 | # misc
25 | .DS_Store
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | 
32 | # local env files
33 | .env.local
34 | .env.development.local
35 | .env.test.local
36 | .env.production.local
37 | 
38 | # Service Worker
39 | public/sw.js
40 | public/sw.js.map
41 | public/workbox*.js
42 | public/workbox*.js.map
43 | 
44 | .sass-cache
45 | 
46 | *.log


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "0.2.0",
 3 |     "configurations": [
 4 |         {
 5 |             "type": "node",
 6 |             "request": "attach",
 7 |             "name": "Launch Program",
 8 |             "skipFiles": [
 9 |                 "<node_internals>/**"
10 |             ],
11 |             "port": 9229
12 |         }
13 |     ]
14 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | // Workspace settings
 2 | {
 3 |     // The following will hide the js and map files in the editor
 4 |     "files.exclude": {
 5 |         ".netlify": true,
 6 |         "node_modules": true,
 7 |         ".next": true,
 8 |         "sitemap.xml": true,
 9 |         "package-lock.json": true,
10 |         "next-env.d.ts": true,
11 |         "out": true,
12 |         "netlify": true
13 |     },
14 |     "cSpell.words": [
15 |         "scastie"
16 |     ]
17 | }


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | start:
 2 | 	netlify dev
 3 | 
 4 | clean:
 5 | 	rm -rf node_modules package-lock.json .netlify .next out next-env.d.ts
 6 | 
 7 | install:
 8 | 	npm install
 9 | 	npm audit fix --force || echo ''
10 | 
11 | start_dev:
12 | 	npx next dev -p 4000
13 | 
14 | start_prod:
15 | 	npx next build --debug
16 | 	NODE_OPTIONS='--inspect' npx next start -p 4000
17 | 
18 | start_prod_netlify:
19 | 	netlify build
20 | 	cd ./.next
21 | 	http-server -p 4000
22 | 
23 | update_netlify:
24 | 	npm uninstall -g netlify-cli
25 | 	npm i -g netlify-cli
26 | 	npm audit fix
27 | 
28 | check_versions:
29 | 	npm outdated


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ![Tour of Scala Logo](https://raw.githubusercontent.com/leobenkel/tour-of-scala/main/public/assets/tour-of-scala-logo.png) Tour of Scala 
 2 | 
 3 | 
 4 | [![Netlify Status](https://api.netlify.com/api/v1/badges/23c38894-313e-4663-9f40-5375f008f18e/deploy-status)](https://app.netlify.com/sites/tour-of-scala/deploys)
 5 | 
 6 | Redesign of the articles posted originally at: https://leobenkel.com
 7 | 
 8 | Can now be used at https://tourofscala.com
 9 | 
10 | Join the discord Scala Learning community at http://sca.la/learning-community
11 | 
12 | ## Public Presence
13 | 
14 | * [Announcement on LinkedIn](https://www.linkedin.com/posts/leobenkel_scala-opensource-scala-activity-7021055024113836032--1oo)
15 | * [Announcement on Reddit](https://www.reddit.com/r/scala/comments/10e8qdc/big_news_for_the_scala_community_finally_fully)
16 | 


--------------------------------------------------------------------------------
/components/content-container.js:
--------------------------------------------------------------------------------
 1 | import cn from 'classnames'
 2 | import { createUseStyles } from 'react-jss'
 3 | 
 4 | 
 5 | const useStyles = createUseStyles(
 6 |     {
 7 |         skbInstructions: {
 8 |             overflow: 'auto',
 9 |             padding: '12px',
10 |             paddingTop: '0',
11 |             fontSize: '1em',
12 |         },
13 |         fullscreen: {
14 |             paddingLeft: '10%',
15 |             paddingRight: '10%'
16 |         }
17 |     },
18 |     {
19 |         name: "ContentContainer"
20 |     }
21 | )
22 | 
23 | export default function ContentContainer({ children, fullscreen }) {
24 |     const styles = useStyles()
25 | 
26 |     return <div className={cn('skbContent', styles.skbInstructions, { [styles.fullscreen]: fullscreen })}>{children}</div>
27 | }


--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
 1 | import cn from 'classnames'
 2 | import { createUseStyles } from 'react-jss'
 3 | 
 4 | import useDiscordLink from 'lib/discord-link'
 5 | 
 6 | import ImageFull from 'components/image-full'
 7 | import L from 'components/link'
 8 | 
 9 | 
10 | const useStyles = createUseStyles(
11 |     {
12 |         title: {
13 |             display: 'flex',
14 |             justifyContent: 'space-between',
15 |             padding: '10px',
16 |             paddingBottom: '0'
17 |         },
18 |         articleTitle: {
19 |             display: 'flex',
20 |             margin: 0,
21 |             paddingRight: '8px',
22 |         },
23 |         tourOfScalaLogo: {
24 |             height: 'fit-content'
25 |         },
26 |         titleLinks: {
27 |             '& a': {
28 |                 textDecoration: 'none',
29 |                 color: 'black'
30 |             }
31 |         },
32 |         discordLink: {
33 |             display: 'inline-block',
34 |             height: '2em',
35 |             '& svg': {
36 |                 height: '2em',
37 |                 display: 'block'
38 |             }
39 |         },
40 |         sourceLink: {
41 |             display: 'inline-block',
42 |         },
43 |         sourceLinkIcon: {
44 |             fontSize: '2em',
45 |             transform: 'rotate(-45deg)'
46 |         },
47 |         iconImgIcon: {
48 |             height: '1.7em'
49 |         },
50 |     },
51 |     {
52 |         name: "Header"
53 |     }
54 | )
55 | 
56 | export default function Header({ title, sourceLink, githubLink }) {
57 |     const styles = useStyles()
58 |     const discordLink = useDiscordLink()
59 | 
60 |     return <div>
61 |         <div className={styles.title}>
62 |             <h1 className={styles.articleTitle}>
63 |                 {title ? title : (<><ImageFull className={styles.tourOfScalaLogo} src="/assets/tour-of-scala-logo.png" alt="Tour of Scala Logo" />Tour of Scala</>)}
64 |             </h1>
65 |             <div className={styles.titleLinks}>
66 |                 <L to={discordLink} className={styles.discordLink}>
67 |                     <ImageFull src="/assets/Discord-Logo+Wordmark-Black.svg" />
68 |                 </L>
69 |                 {sourceLink ?
70 |                     <L to={sourceLink} className={styles.sourceLink}>
71 |                         <i className={cn("material-icons", styles.sourceLinkIcon)}>link</i>
72 |                     </L> : null}
73 |                 {githubLink ?
74 |                     <L to={githubLink} className={styles.sourceLink}>
75 |                         <ImageFull className={styles.iconImgIcon} src="/assets/GitHub-Mark-64px.png" alt="Github Logo" />
76 |                     </L> : null}
77 |             </div>
78 |         </div>
79 |     </div>
80 | }


--------------------------------------------------------------------------------
/components/image-full.js:
--------------------------------------------------------------------------------
 1 | import { ReactSVG } from 'react-svg'
 2 | 
 3 | 
 4 | export default function ImageFull({ alt, src, className, priority, ...props }) {
 5 |     if (src.endsWith('svg')) {
 6 |         return (
 7 |             <ReactSVG
 8 |                 src={src}
 9 |                 {...props}
10 |                 className={className}
11 |             />
12 |         )
13 |     } else {
14 |         if (!alt) console.error(`No ALT for image: '${src}'`)
15 |         return (
16 |             <img
17 |                 inline="true"
18 |                 alt={`Tour of Scala - ${alt}`}
19 |                 title={`Tour of Scala - ${alt}`}
20 |                 {...props}
21 |                 src={src}
22 |                 className={className}
23 |             />
24 |         )
25 |     }
26 | }


--------------------------------------------------------------------------------
/components/left-side.js:
--------------------------------------------------------------------------------
 1 | import { createUseStyles } from 'react-jss'
 2 | 
 3 | 
 4 | const useStyles = createUseStyles(
 5 |     {
 6 |         left: {
 7 |             display: 'flex',
 8 |             height: '100%',
 9 |             minHeight: '100%',
10 |             maxHeight: '100%',
11 |             backgroundColor: '#ececec',
12 |             padding: '0',
13 |             boxSizing: 'border-box',
14 |             flexDirection: 'column',
15 |             flexWrap: 'nowrap',
16 |             justifyContent: 'space-between',
17 |             borderRight: '2px #7c7c7c2f solid',
18 |             width: 'auto',
19 |             flex: '1 1 45vw',
20 |             overflow: 'auto'
21 |         }
22 |     },
23 |     {
24 |         name: "LeftSide"
25 |     }
26 | )
27 | 
28 | export default function LeftSide({ children }) {
29 |     const styles = useStyles()
30 | 
31 |     return <div className={styles.left}>
32 |         {children}
33 |     </div>
34 | }


--------------------------------------------------------------------------------
/components/legal.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useEffect,
 3 |   useState,
 4 | } from 'react'
 5 | 
 6 | import dynamic from 'next/dynamic'
 7 | 
 8 | import { isDev } from 'lib/environment'
 9 | import {
10 |   readStorage,
11 |   writeStorage,
12 | } from 'lib/local-storage'
13 | 
14 | 
15 | const Head = dynamic(() => import('next/head'))
16 | const PopUp = dynamic(() => import('components/pop-up'))
17 | 
18 | export default function Legal() {
19 |     const [isUndefined, setIsUndefined] = useState(true)
20 |     const [shouldShowLegal, setShouldShowLegal] = useState(false)
21 | 
22 |     // date to be able to void in case of legal update
23 |     const storageKey = 'legal-banner-accepted-202106-15'
24 | 
25 |     useEffect(() => {
26 |         const storageRead = readStorage(storageKey, false)
27 |         updateStatus(storageRead)
28 |     }, [])
29 | 
30 |     const updateStatus = (isRead) => {
31 |         writeStorage(storageKey, isRead, 24 * 365)
32 |         setShouldShowLegal(!isRead)
33 |         setIsUndefined(false)
34 |     }
35 | 
36 |     const acknowledge = () => updateStatus(true)
37 | 
38 |     if (shouldShowLegal) {
39 |         return <PopUp
40 |             cta="Acknowledge"
41 |             onCta={acknowledge}
42 |         >
43 |             <p>
44 |                 <span>By continuing to be using this website, you are allowing the use of anonymized tracking data.</span>
45 |             </p>
46 |         </PopUp>
47 |     } else if (isUndefined) {
48 |         return null
49 |     } else if (isDev) {
50 |         return (
51 |             <Head>
52 |                 <meta name="tracking" content="enable_but_dev" />
53 |             </Head>
54 |         )
55 |     } else {
56 |         return (
57 |             <Head>
58 |                 {/* <!-- Google tracking --> */}
59 |                 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177056861-1" />
60 |                 <script src="/scripts/google.js" type="text/javascript" />
61 |             </Head>
62 |         )
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/components/link.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | 
 3 | 
 4 | export default function L({ children, to, prefetch, ref, className, ...props }) {
 5 |     const external = to.startsWith('http')
 6 | 
 7 |     if (external) {
 8 |         return (
 9 |             <a
10 |                 {...props}
11 |                 href={to}
12 |                 ref={ref}
13 |                 target="_blank"
14 |                 rel="noopener"
15 |                 className={className}
16 |             >{children}</a>
17 |         )
18 |     } else {
19 |         let attributes = {}
20 |         if (!prefetch) {
21 |             attributes = {
22 |                 prefetch: false
23 |             }
24 |         }
25 | 
26 |         return (
27 |             <Link
28 |                 href={to}
29 |                 {...attributes}
30 |                 {...props}
31 |                 ref={ref}
32 |                 className={className}
33 |             >{children}</Link>
34 |         )
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/components/made-by.js:
--------------------------------------------------------------------------------
 1 | import { createUseStyles } from 'react-jss'
 2 | 
 3 | import ImageFull from 'components/image-full'
 4 | import L from 'components/link'
 5 | 
 6 | 
 7 | const useStyles = createUseStyles(
 8 |     {
 9 |         madeBy: {
10 |             display: 'flex',
11 |             justifyContent: 'space-between',
12 |             flexWrap: 'nowrap',
13 |             alignItems: 'center',
14 |             padding: '4px 12px'
15 |         },
16 |         madeByIconLink: {
17 |             textDecoration: 'none',
18 |             color: 'black',
19 |             marginRight: '4px'
20 |         },
21 |         iconImgIcon: {
22 |             height: '1.3em'
23 |         },
24 |         iconImgIconMaterial: {
25 |             fontSize: '1.3em',
26 |             transform: 'rotate(-45deg)'
27 |         },
28 |     },
29 |     {
30 |         name: 'MadeBy'
31 |     }
32 | )
33 | 
34 | export default function MadeBy() {
35 |     const styles = useStyles()
36 | 
37 | 
38 |     return <div className={styles.madeBy}>
39 |         <div>Made by Leo Benkel</div>
40 |         <div>
41 |             <L to="https://www.patreon.com/leobenkel" className={styles.madeByIconLink} >
42 |                 <ImageFull className={styles.iconImgIcon} src="/assets/Patreon-Logo.png" alt="Patreon Logo" />
43 |             </L>
44 |             <L to="https://www.linkedin.com/in/leobenkel/" className={styles.madeByIconLink} >
45 |                 <ImageFull className={styles.iconImgIcon} src="/assets/linkedin-xxl.png" alt="LinkedIn Logo" />
46 |             </L>
47 |             <L to="https://github.com/leobenkel/" className={styles.madeByIconLink} >
48 |                 <ImageFull className={styles.iconImgIcon} src="/assets/GitHub-Mark-64px.png" alt="Github Logo" />
49 |             </L>
50 |         </div>
51 |     </div>
52 | }


--------------------------------------------------------------------------------
/components/nav.js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | 
 3 | import cn from 'classnames'
 4 | import concat from 'lodash/concat'
 5 | import sortBy from 'lodash/sortBy'
 6 | import { createUseStyles } from 'react-jss'
 7 | 
 8 | import { useActiveLesson } from 'lib/lesson-save'
 9 | import * as Routes from 'lib/routes'
10 | 
11 | import L from 'components/link'
12 | 
13 | 
14 | const useStyles = createUseStyles(
15 |     {
16 |         nav: {
17 |             display: 'flex',
18 |             width: '100%',
19 |             flexWrap: 'nowrap',
20 |             justifyContent: 'space-evenly',
21 |             alignItems: 'center',
22 |             borderTop: '2px #7c7c7c2f solid'
23 |         },
24 |         navLink: {
25 |             display: 'inline-block',
26 |             width: '100%',
27 |             height: '32px',
28 |             textAlign: 'center',
29 | 
30 |             '&:hover': {
31 |                 backgroundColor: '#bbc0c4'
32 |             },
33 |         },
34 |         materialIcons: {
35 |             width: '32px',
36 |             height: '32px',
37 |             fontSize: '2em'
38 |         }
39 |     },
40 |     {
41 |         name: "Nav"
42 |     }
43 | )
44 | 
45 | export default function Nav({ navigation }) {
46 |     const styles = useStyles()
47 |     const router = useRouter()
48 |     const currentPath = router.pathname
49 |     const isSKBPath = currentPath.startsWith('/scala')
50 |     const currentLesson = useActiveLesson()
51 | 
52 |     const links = concat([],
53 |         [{
54 |             to: Routes.home,
55 |             icon: 'list',
56 |             priority: 1
57 |         }],
58 |         [!isSKBPath ? {
59 |             to: Routes.about,
60 |             icon: 'help_outline',
61 |             priority: 2
62 |         } : null],
63 |         [currentLesson && !isSKBPath ? {
64 |             to: Routes.skbFromSlug(currentLesson),
65 |             icon: 'engineering',
66 |             priority: 1
67 |         } : null],
68 | 
69 |         navigation ? concat([],
70 |             [navigation[0] ? {
71 |                 to: navigation[0],
72 |                 icon: 'navigate_before',
73 |                 priority: 0
74 |             } : null],
75 |             [navigation[1] ? {
76 |                 to: navigation[1],
77 |                 icon: 'navigate_next',
78 |                 priority: 10
79 |             } : null]
80 |         ) : null
81 |     ).filter(e => e)
82 | 
83 |     return <div className={styles.nav}>
84 |         {
85 |             sortBy(links, ['priority']).map(({ to, icon }, i) => {
86 |                 if (currentPath == to) return null
87 | 
88 |                 return <L key={i} to={to} className={styles.navLink}>
89 |                     <i className={cn("material-icons", styles.materialIcons)}>{icon}</i>
90 |                 </L>
91 |             })
92 |         }
93 |     </div>
94 | }
95 | 


--------------------------------------------------------------------------------
/components/pop-up.js:
--------------------------------------------------------------------------------
 1 | import cn from 'classnames'
 2 | import { createUseStyles } from 'react-jss'
 3 | 
 4 | 
 5 | const useStyles = createUseStyles({
 6 |     pop_up: {
 7 |         zIndex: 500,
 8 |         position: 'fixed',
 9 |         display: 'flex',
10 |         justifyContent: 'center',
11 |         width: '100%',
12 |         bottom: 0,
13 |         left: 0,
14 |     },
15 |     pop_up_top: {
16 |         bottom: 'unset',
17 |         top: 0
18 |     },
19 |     content: {
20 |         maxWidth: '1200px',
21 |         backgroundColor: 'white',
22 |         color: 'black',
23 |         margin: '26px',
24 |         padding: '32px',
25 |         border: `1px solid black`,
26 |         display: 'flex',
27 |         width: '100%',
28 |         flexDirection: 'row',
29 |         alignItems: 'center',
30 |         justifyContent: 'space-between',
31 |     },
32 |     action: {
33 |         margin: '16px',
34 |     },
35 |     text: {
36 |         fontSize: '14pt',
37 | 
38 |         '& p': {
39 |             display: 'flex',
40 |             flexWrap: 'wrap',
41 |             justifyContent: 'center',
42 |         },
43 |         '& a': {
44 |             display: 'inline'
45 |         }
46 |     },
47 |     button: {
48 |         backgroundColor: '#ececec',
49 |         outline: 'none',
50 |         border: '2px #7c7c7c2f solid',
51 |         padding: '8px',
52 |         fontSize: '1.2em',
53 |         cursor: 'pointer',
54 |         '&:hover': {
55 |             backgroundColor: '#bbc0c4'
56 |         }
57 |     }
58 | }, {
59 |     name: 'popUp'
60 | })
61 | 
62 | export default function PopUp({ children, cta, onCta, displayTop }) {
63 |     const styles = useStyles()
64 | 
65 |     return <div className={cn(styles.pop_up, { [styles.pop_up_top]: displayTop })}>
66 |         <div className={styles.content}>
67 |             <div className={styles.text}>{children}</div>
68 | 
69 |             <div className={styles.action}>
70 |                 <button
71 |                     className={styles.button}
72 |                     type="button"
73 |                     onClick={onCta}>
74 |                     {cta}
75 |                 </button>
76 |             </div>
77 |         </div>
78 |     </div>
79 | }
80 | 


--------------------------------------------------------------------------------
/components/refresh-pop-up.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useEffect,
 3 |   useState,
 4 | } from 'react'
 5 | 
 6 | import dynamic from 'next/dynamic'
 7 | import { useRouter } from 'next/router'
 8 | 
 9 | import { isDev } from 'lib/environment'
10 | 
11 | 
12 | const PopUp = dynamic(() => import('components/pop-up'))
13 | 
14 | function initSW(enablePopUp) {
15 |     // https://github.com/shadowwalker/next-pwa/blob/e1d312927c43f45bbb9b07633513dd2c64d5ff79/examples/lifecycle/pages/index.js#L27-L46
16 |     if (!isDev && typeof window !== 'undefined' && 'serviceWorker' in navigator && window.workbox !== undefined) {
17 |         const wb = window.workbox
18 | 
19 |         // A common UX pattern for progressive web apps is to show a banner when a service worker has updated and waiting to install.
20 |         // NOTE: MUST set skipWaiting to false in next.config.js pwa object
21 |         // https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
22 |         const promptNewVersionAvailable = event => {
23 |             // `event.wasWaitingBeforeRegister` will be false if this is the first time the updated service worker is waiting.
24 |             // When `event.wasWaitingBeforeRegister` is true, a previously updated service worker is still waiting.
25 |             // You may want to customize the UI prompt accordingly.
26 |             // if (confirm('A newer version of this web app is available, reload to update?')) {
27 |             //     wb.addEventListener('controlling', event => {
28 |             //         router.reload()
29 |             //     })
30 | 
31 |             //     // Send a message to the waiting service worker, instructing it to activate.
32 |             //     wb.messageSkipWaiting()
33 |             // } else {
34 |             //     console.log(
35 |             //         'User rejected to reload the web app, keep using old version. New version will be automatically load when user open the app next time.'
36 |             //     )
37 |             // }
38 |             enablePopUp()
39 |         }
40 | 
41 |         wb.addEventListener('waiting', promptNewVersionAvailable)
42 | 
43 |         // never forget to call register as auto register is turned off in next.config.js
44 |         wb.register()
45 |     }
46 | }
47 | 
48 | function reloadPage(router) {
49 |     const wb = window.workbox
50 | 
51 |     setTimeout(() => router.reload(), 1500)
52 | 
53 |     wb.addEventListener('controlling', event => {
54 |         console.log('wasWaitingBeforeRegister', event.wasWaitingBeforeRegister)
55 |         router.reload()
56 |     })
57 | 
58 |     // Send a message to the waiting service worker, instructing it to activate.
59 |     wb.messageSkipWaiting()
60 | }
61 | 
62 | export default function RefreshPopUp() {
63 |     const router = useRouter()
64 | 
65 |     const [visible, setVisible] = useState(false)
66 | 
67 |     useEffect(() => {
68 |         initSW(() => setVisible(true))
69 |     }, [])
70 | 
71 |     if (visible) {
72 |         return <PopUp
73 |             displayTop
74 |             cta="RELOAD"
75 |             onCta={() => {
76 |                 setVisible(false)
77 |                 reloadPage(router)
78 |             }}
79 |         >
80 |             <p>A newer version of this web app is available, reload to update.</p>
81 |         </PopUp>
82 |     } else {
83 |         return null
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/components/right-side.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | import cn from 'classnames'
 4 | import { createUseStyles } from 'react-jss'
 5 | 
 6 | 
 7 | const useStyles = createUseStyles(
 8 |     {
 9 |         right: {
10 |             display: 'block',
11 |             height: '100%',
12 |             minHeight: '100%',
13 |             maxHeight: '100%',
14 |             backgroundColor: '#ececec',
15 |             boxSizing: 'border-box',
16 |             transition: 'width .225s ease'
17 |         },
18 |         rightAsListContainer: {
19 |             display: 'flex',
20 |             flexDirection: 'column'
21 |         },
22 |         closed: {
23 |             width: '84px',
24 |             paddingLeft: '84px',
25 |             overflow: 'hidden',
26 |             '& > *': {
27 |                 opacity: 0
28 |             }
29 |         },
30 |         expanded: {
31 |             width: '55vw',
32 |             minWidth: '55vw',
33 |             maxWidth: '55vw'
34 |         },
35 |         rightToggle: {
36 |             position: 'absolute',
37 |             top: '16px',
38 |             right: '32px',
39 |             zIndex: '100'
40 |         },
41 |         rightToggleBtn: {
42 |             margin: '0',
43 |             padding: '0',
44 |             display: 'flex',
45 |             cursor: 'pointer',
46 |             border: '0',
47 |             backgroundColor: 'transparent',
48 |             outline: 'none',
49 |             '&:focus': {
50 |                 border: '0',
51 |                 outline: 'none'
52 |             },
53 |             '& i': {
54 |                 fontSize: '2em'
55 |             }
56 |         }
57 |     },
58 |     {
59 |         name: "RightSide"
60 |     }
61 | )
62 | 
63 | export default function RightSide({ children, forList, className }) {
64 |     const styles = useStyles()
65 |     const [rightExpanded, setRightExpanded] = useState(true)
66 | 
67 |     return <>
68 |         <div className={cn(
69 |             styles.right,
70 |             className,
71 |             {
72 |                 [styles.rightAsListContainer]: forList,
73 |                 [styles.expanded]: rightExpanded,
74 |                 [styles.closed]: !rightExpanded
75 |             }
76 |         )} >
77 |             {children}
78 |         </div>
79 |         <div className={styles.rightToggle}>
80 |             <button className={styles.rightToggleBtn} onClick={() => setRightExpanded(!rightExpanded)}>
81 |                 <i className="material-icons">{rightExpanded ? 'close_fullscreen' : 'open_in_full'}</i>
82 |             </button>
83 |         </div>
84 |     </>
85 | }


--------------------------------------------------------------------------------
/components/top-container.js:
--------------------------------------------------------------------------------
 1 | import { createUseStyles } from 'react-jss'
 2 | 
 3 | 
 4 | const useStyles = createUseStyles(
 5 |     {
 6 |         top: {
 7 |             display: 'flex',
 8 |             flexDirection: 'column',
 9 |             flexWrap: 'nowrap',
10 |             justifyContent: 'left',
11 |             maxHeight: 'calc(100% - 34px)',
12 |             padding: '0',
13 |             boxSizing: 'border-box'
14 |         }
15 |     },
16 |     {
17 |         name: "Top"
18 |     }
19 | )
20 | 
21 | export default function Top({ children }) {
22 |     const styles = useStyles()
23 | 
24 |     return <div className={styles.top}>{children}</div>
25 | }


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |     "compilerOptions": {
3 |         "baseUrl": "."
4 |     }
5 | }


--------------------------------------------------------------------------------
/lib/clean-object.js:
--------------------------------------------------------------------------------
1 | export default function removeEmpty(obj) {
2 |     return Object.entries(obj)
3 |         .filter(([_, v]) => v != null)
4 |         .reduce(
5 |             (acc, [k, v]) => ({ ...acc, [k]: v === Object(v) ? removeEmpty(v) : v }),
6 |             {}
7 |         );
8 | }


--------------------------------------------------------------------------------
/lib/discord-link.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useEffect,
 3 |   useState,
 4 | } from 'react'
 5 | 
 6 | import {
 7 |   readStorage,
 8 |   writeStorage,
 9 | } from './local-storage'
10 | 
11 | 
12 | const discordServerID = "745529127720714310"
13 | const url = 'https://discordapp.com/api/servers/' + discordServerID + '/widget.json'
14 | 
15 | export default function useDiscordLink() {
16 |     const [discordLink, setDiscordLink] = useState('')
17 | 
18 |     useEffect(() => {
19 |         const readLink = readStorage('discord-link', '')
20 | 
21 |         if (!readLink) {
22 |             fetch(url)
23 |                 .then(response => response.json())
24 |                 .then(json => {
25 |                     writeStorage('discord-link', json.instant_invite, 12)
26 |                     setDiscordLink(json.instant_invite)
27 |                 })
28 |         } else {
29 |             setDiscordLink(readLink)
30 |         }
31 |     }, [])
32 | 
33 |     return discordLink
34 | }
35 | 


--------------------------------------------------------------------------------
/lib/environment.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |     console.log(process.env)
 4 |     console.log(process.env['NODE_ENV'], process.env['CONTEXT'], process.env['NETLIFY_DEV'])
 5 |     NODE_ENV - development / production
 6 |     CONTEXT - dev / undefined
 7 |     NETLIFY_DEV - true / undefined
 8 |  */
 9 | export const isDev = process.env['NODE_ENV'] == "development"
10 | 
11 | // console.log(process.env['NODE_ENV'], isDev)
12 | 


--------------------------------------------------------------------------------
/lib/fetch-local-lessons.js:
--------------------------------------------------------------------------------
 1 | import map from 'lodash/map'
 2 | import sortBy from 'lodash/sortBy'
 3 | 
 4 | 
 5 | export function fetchLessons() {
 6 |     const fs = require('fs')
 7 |     const path = require('path')
 8 | 
 9 |     const files = fs.readdirSync(path.join(process.cwd(), '/pages/scala/'))
10 | 
11 |     return sortBy(map(files, (f) => {
12 |         try {
13 |             const fullFileName = path.join(process.cwd(), '/pages/scala/', f)
14 |             // const data = require()
15 | 
16 |             if (!fs.existsSync(fullFileName)) {
17 |                 console.log('File not found', fullFileName)
18 |                 return;
19 |             }
20 | 
21 |             const fileContent = fs.readFileSync(fullFileName, 'utf8')
22 | 
23 |             const search = (field) => {
24 |                 const regex = new RegExp(`^export const ${field} = "(.+)"$`, 'gm')
25 |                 const r = regex.exec(fileContent) || [null, null]
26 |                 return r[1]
27 |             }
28 | 
29 |             const data = {
30 |                 id: search('id'),
31 |                 title: search('title'),
32 |                 date: search('date')
33 |             }
34 | 
35 |             return data
36 |         } catch (error) {
37 |             console.error(f, error)
38 |             return null
39 |         }
40 |     }), "date")
41 | }
42 | 


--------------------------------------------------------------------------------
/lib/hover.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useRef,
 3 |   useState,
 4 | } from 'react'
 5 | 
 6 | 
 7 | export function useHover() {
 8 |     const [hover, setHover] = useState(false)
 9 |     const ref = useRef()
10 | 
11 |     return {
12 |         hover,
13 |         hoverProps: {
14 |             ref,
15 |             onMouseEnter: () => setHover(true),
16 |             onMouseLeave: () => setHover(false),
17 |         }
18 |     }
19 | }


--------------------------------------------------------------------------------
/lib/lesson-save.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useEffect,
 3 |   useState,
 4 | } from 'react'
 5 | 
 6 | import {
 7 |   readStorage,
 8 |   writeStorage,
 9 | } from 'lib/local-storage'
10 | 
11 | 
12 | export function useActiveLesson() {
13 |   const [lastSeenSkb, setLastSeenSkb] = useState(null)
14 |   useEffect(() => {
15 |     setLastSeenSkb(readStorage('last-seen-skb', null))
16 |   }, [])
17 | 
18 |   return lastSeenSkb
19 | }
20 | 
21 | export function registerLastSeenLesson(slug) {
22 |   useEffect(() => {
23 |     writeStorage('last-seen-skb', slug)
24 |   }, [slug])
25 | }
26 | 


--------------------------------------------------------------------------------
/lib/local-storage.js:
--------------------------------------------------------------------------------
 1 | import { isDev } from 'lib/environment';
 2 | 
 3 | 
 4 | const obfuscated = !isDev
 5 | 
 6 | function encode(str) {
 7 |     return obfuscated ? btoa(unescape(encodeURIComponent(str))) : str;
 8 | };
 9 | 
10 | function decode(str) {
11 |     return obfuscated ? decodeURIComponent(escape(window.atob(str))) : str;
12 | };
13 | 
14 | export function writeStorage(key, value, expirationHour = 24) {
15 |     // https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object
16 |     const makeTime = (h) => {
17 |         const date = new Date()
18 |         date.setHours(date.getHours() + h)
19 |         return date
20 |     }
21 | 
22 |     const expirationDate = makeTime(expirationHour).getTime()
23 |     // console.log(expirationHour, expirationDate)
24 | 
25 |     const content = {
26 |         value,
27 |         expirationDate
28 |     }
29 | 
30 |     window.localStorage.setItem(
31 |         encode(key),
32 |         encode(JSON.stringify(content))
33 |     );
34 | 
35 |     return { [key]: content }
36 | };
37 | 
38 | export function readStorage(key, defaultValue = null) {
39 |     const keyEnc = encode(key)
40 |     const value = window.localStorage.getItem(keyEnc);
41 |     if (value && value != "null") {
42 |         const content = JSON.parse(decode(value));
43 |         const expirationDate = content.expirationDate
44 |         if (expirationDate <= Date.now()) {
45 |             removeStorage(keyEnc)
46 |             return defaultValue
47 |         } else {
48 |             return content.value
49 |         }
50 |     } else {
51 |         return defaultValue
52 |     }
53 | };
54 | 
55 | export function removeStorage(key) {
56 |     window.localStorage.removeItem(encode(key));
57 | }
58 | 
59 | export function clearStorage() {
60 |     window.localStorage.clear();
61 | }
62 | 


--------------------------------------------------------------------------------
/lib/routes.js:
--------------------------------------------------------------------------------
1 | export const home = '/'
2 | export const about = '/about'
3 | 
4 | 
5 | export function skbFromSlug(slug) {
6 |     return `/scala/${slug}`
7 | }
8 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 |     command = "npm run build"
 3 |     publish = ".next"
 4 |     functions = "functions"
 5 | 
 6 | [[plugins]]
 7 | # https://github.com/philhawksworth/netlify-plugin-minify-html#readme
 8 | package = "netlify-plugin-minify-html"
 9 | 
10 |     # Specify which deploy contexts we'll minify HTML in.
11 |     # Supports any Deploy Contexts available in Netlify.
12 |     # https://docs.netlify.com/site-deploys/overview/#deploy-contexts
13 |     [plugins.inputs]
14 |     contexts = [
15 |         'production',
16 |         'branch-deploy',
17 |         'deploy-preview'
18 |     ]
19 | 
20 |     # Optionally, override the default options for the minification
21 |     # https://github.com/kangax/html-minifier#options-quick-reference
22 |     [plugins.inputs.minifierOptions]
23 |     removeComments = true
24 |     collapseInlineTagWhitespace = true
25 |     collapseWhitespace = true
26 |     minifyCSS = true
27 |     minifyJS = true
28 |     sortAttributes = true
29 |     sortClassName = true
30 | 


--------------------------------------------------------------------------------
/next-sitemap.config.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/iamvishnusankar/next-sitemap
 2 | // https://github.com/iamvishnusankar/next-sitemap/issues/404
 3 | 
 4 | const config = {
 5 |     siteUrl: 'https://tourofscala.com',
 6 |     generateRobotsTxt: false,
 7 |     sitemapSize: 1000,
 8 |     changefreq: 'monthly',
 9 |     generateIndexSitemap: false,
10 |     exclude: [
11 |         '/404*',
12 |         '/legalNotice*',
13 |         '/privacyPolicy*',
14 |     ]
15 | }
16 | 
17 | module.exports = config


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/shadowwalker/next-pwa/issues/392#issuecomment-1224458436
 2 | 
 3 | const withPWA = require("next-pwa")({
 4 |     dest: "public",
 5 |     // put other next-pwa options here
 6 |     publicExcludes: [],
 7 |     cacheOnFrontEndNav: true,
 8 |     skipWaiting: false,
 9 |     register: false,
10 | });
11 | 
12 | const nextConfig = withPWA({
13 |     reactStrictMode: true,
14 |     // put other next js options here
15 | 
16 | });
17 | 
18 | module.exports = nextConfig;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "learn-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "postbuild": "next-sitemap"
10 |   },
11 |   "devDependencies": {
12 |     "@netlify/plugin-nextjs": "^4.29.4",
13 |     "axios": "^1.2.2",
14 |     "classnames": "^2.3.2",
15 |     "html-to-react": "^1.5.0",
16 |     "jquery": "^3.6.3",
17 |     "jsdom": "^21.0.0",
18 |     "lodash": "^4.17.21",
19 |     "netlify-plugin-inline-source": "^1.0.4",
20 |     "netlify-plugin-minify-html": "^0.3.1",
21 |     "next": "^13.0.7",
22 |     "next-pwa": "^5.6.0",
23 |     "next-sitemap": "^3.1.15",
24 |     "postcss": "^8.4.20",
25 |     "postcss-flexbugs-fixes": "^5.0.2",
26 |     "postcss-preset-env": "^7.8.3",
27 |     "react": "18.2.0",
28 |     "react-dom": "18.2.0",
29 |     "react-jss": "^10.9.2",
30 |     "react-svg": "15.1.18",
31 |     "sass": "^1.57.1",
32 |     "webpack": "^5.9.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
 1 | import dynamic from 'next/dynamic'
 2 | import Head from 'next/head'
 3 | 
 4 | import * as Routes from 'lib/routes'
 5 | 
 6 | import Layout from 'components/layout'
 7 | 
 8 | 
 9 | const Nav = dynamic(() => import('components/nav'))
10 | const ContentContainer = dynamic(() => import('components/content-container'))
11 | const MadeBy = dynamic(() => import('components/made-by'))
12 | const L = dynamic(() => import('components/link'))
13 | const Header = dynamic(() => import('components/header'))
14 | const Top = dynamic(() => import('components/top-container'))
15 | 
16 | // error page : https://nextjs.org/docs/advanced-features/custom-error-page
17 | // pages/404.js
18 | export default function My404() {
19 | 
20 |     return (
21 |         <Layout
22 |             title="404"
23 |             description=""
24 |             fullScreen
25 |         >
26 |             <Head>
27 |                 <meta name="robots" content="noindex, nosnippet" />
28 |             </Head>
29 |             <Top>
30 |                 <Header />
31 |                 <MadeBy />
32 |                 <ContentContainer fullscreen>
33 |                     <h2>404</h2>
34 |                     <p>Sorry the page you are looking for does not exist.</p>
35 |                     <p><L to={Routes.home} prefetch>Back home</L></p>
36 |                 </ContentContainer>
37 |             </Top>
38 |             <Nav />
39 |         </Layout>
40 |     )
41 | }
42 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import 'components/global.scss'
2 | 
3 | 
4 | export default function App({ Component, pageProps }) {
5 |     return <Component {...pageProps} />
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, {
 2 |   Head,
 3 |   Html,
 4 |   Main,
 5 |   NextScript,
 6 | } from 'next/document'
 7 | 
 8 | import {
 9 |   JssProvider,
10 |   SheetsRegistry,
11 | } from 'react-jss'
12 | 
13 | 
14 | const createGenerateId = (rule, sheet) => {
15 |     const id = sheet.options.jss.id ? sheet.options.jss.id : 0
16 |     return `${sheet.options.classNamePrefix}${rule.key}-${id}`
17 | }
18 | 
19 | export default class MyDocument extends Document {
20 |     static async getInitialProps(ctx) {
21 |         // https://github.com/vercel/next.js/blob/ad56e81f4d90d11c7f15b3a6b7b25324ce63844a/examples/with-react-jss/pages/_document.js#L5-L29
22 |         const registry = new SheetsRegistry()
23 |         const originalRenderPage = ctx.renderPage
24 |         ctx.renderPage = () =>
25 |             originalRenderPage({
26 |                 enhanceApp: (App) => (props) => (
27 |                     <JssProvider registry={registry} generateId={createGenerateId}>
28 |                         <App {...props} />
29 |                     </JssProvider>
30 |                 ),
31 |             })
32 | 
33 |         const initialProps = await Document.getInitialProps(ctx)
34 | 
35 |         return {
36 |             ...initialProps,
37 |             styles: (
38 |                 <>
39 |                     {initialProps.styles}
40 |                     <style id="server-side-styles">{registry.toString()}</style>
41 |                 </>
42 |             ),
43 |         }
44 |     }
45 | 
46 |     render() {
47 |         return (
48 |             <Html lang="en">
49 |                 <Head>
50 |                     {/* <!-- CSS --> */}
51 |                     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" />
52 | 
53 |                     {/* <!-- fonts --> */}
54 |                     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@500&display=swap"
55 |                         rel="stylesheet" />
56 | 
57 |                     {/* <!-- icons --> */}
58 |                     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
59 |                 </Head>
60 |                 <body>
61 |                     <Main />
62 |                     <NextScript />
63 |                 </body>
64 |             </Html>
65 |         )
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | import dynamic from 'next/dynamic'
 2 | 
 3 | import Layout from 'components/layout'
 4 | 
 5 | 
 6 | const Nav = dynamic(() => import('components/nav'))
 7 | const ContentContainer = dynamic(() => import('components/content-container'))
 8 | const MadeBy = dynamic(() => import('components/made-by'))
 9 | const L = dynamic(() => import('components/link'))
10 | const Header = dynamic(() => import('components/header'))
11 | const Top = dynamic(() => import('components/top-container'))
12 | 
13 | export default function About() {
14 | 
15 |     return <Layout title="About" description="Tour of Scala is a place to learn Scala easily by solving exercises." fullScreen>
16 |         <Top>
17 |             <Header />
18 |             <MadeBy />
19 |             <ContentContainer fullscreen>
20 |                 {/* <!-- TODO: Better about ! --> */}
21 |                 <h2>How is this website made?</h2>
22 |                 <p>
23 |                     The website is generated by this open source project
24 |                     on <L to="https://github.com/leobenkel/tour-of-scala">GitHub</L>.
25 |                     If you would like to improve the design, please do. I am not a designer, as you can see.
26 |                 </p>
27 |                 <p>
28 |                     The exercises were originally published on my website,
29 |                     and more specifically from the <L to="https://leobenkel.com/category/scala/knowledge-bits/"
30 |                     >SKB series</L>. Right now, they are <L to="https://github.com/leobenkel/tour-of-scala/tree/main/pages/scala">fully open source</L>!
31 |                     Feel free to contribute to improve or add more.
32 |                 </p>
33 |                 <p>If you have any comments, suggestions or feedback, make sure to message me on Discord, or LinkedIn,
34 |                     or submit an issue on GitHub, or submit a PR on GitHub.</p>
35 | 
36 |                 <h2>Credits</h2>
37 |                 <p>I used the <L to="https://material.io/resources/icons/">material icons</L>.</p>
38 |                 <p>Huge thanks to <L to="https://scastie.scala-lang.org/" >Scastie</L> as well which allows
39 |                     Tour of Scala to have interactive code snippets.</p>
40 |                 <p>And thank you to the members of the discord community for suggesting to build this website.</p>
41 |             </ContentContainer>
42 |         </Top>
43 |         <Nav />
44 |     </Layout>
45 | }


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import dynamic from 'next/dynamic'
 2 | 
 3 | import { fetchLessons } from 'lib/fetch-local-lessons'
 4 | 
 5 | import Layout from 'components/layout'
 6 | import LeftSide from 'components/left-side'
 7 | 
 8 | 
 9 | const Nav = dynamic(() => import('components/nav'))
10 | const ContentContainer = dynamic(() => import('components/content-container'))
11 | const MadeBy = dynamic(() => import('components/made-by'))
12 | const L = dynamic(() => import('components/link'))
13 | const Header = dynamic(() => import('components/header'))
14 | const Top = dynamic(() => import('components/top-container'))
15 | const SkbList = dynamic(() => import('components/skb-list'))
16 | 
17 | export default function Index({ allLessons }) {
18 |     return <Layout description="Tour of Scala is a place to learn Scala easily by solving exercises.">
19 |         <LeftSide>
20 |             <Top>
21 |                 <Header />
22 |                 <MadeBy />
23 | 
24 |                 <ContentContainer>
25 |                     {/* <!-- TODO: Better description ! --> */}
26 |                     <p>Here, you can slowly build up knowledge about Scala.</p>
27 |                     <p>Each exercises are designed to be done in a very short amount of time and learn a little bit each day, just to
28 |                         create a routine.</p>
29 |                     <p>Each episode will teach you about one specific thing and rely on the previous exercises to be solved.</p>
30 |                     <p>Hope you are going to enjoy it! It is designed for anyone to learn Scala from scratch and slowly
31 |                         learn, one Bit at a time.</p>
32 | 
33 |                     <p>For each exercise, you should be able to guess by yourself the
34 |                         solution based on what you previously learned and based on the introduction. If you get stuck don't hesitate to reveal the extra clues.</p>
35 |                     <p>The goal of the exercise is to replace the <code>???</code> by some of your own code.
36 |                         When you are done, click to reveal the extra information and clues to get a better
37 |                         understanding of the concept.</p>
38 |                     <p>Don't hesitate to experiment by editing the code to anything you like.</p>
39 |                     <p>If you have any comments, suggestions or feedback, make sure to message me on Discord, or LinkedIn,
40 |                         or submit an issue on GitHub, or submit a PR on GitHub.</p>
41 |                 </ContentContainer>
42 |             </Top>
43 |             <Nav />
44 |         </LeftSide>
45 | 
46 |         <SkbList allLessons={allLessons} />
47 |     </Layout>
48 | }
49 | 
50 | export async function getStaticProps() {
51 |     const allLessons = await fetchLessons()
52 | 
53 |     return {
54 |         props: { allLessons },
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------
/pages/scala/_-placeholder.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "_-placeholder"
 5 | export const title = "Scala _ placeholder"
 6 | 
 7 | export const date = "2020-11-27T17:01:59"
 8 | 
 9 | const scastieId = "mjfnEbLASjmuk0fZEiBYiQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Today we are leveling up !</p>
13 | 
14 |   <p>Introducing several use cases for the mysterious <code>_</code>. I consider all those use cases to fall under the “<i>Placeholder</i>” category but the technical terms can be more granular. In the extra explanation, after the exercise, I will put a link with more in detailed description if you want to dive deeper.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     Sorry it was a lengthy exercise !
20 |   </p>
21 |   <p>
22 |     The first use case is related to <i>partial function</i>. It allows you to put a placeholder where an argument of a function would be to create a new function that take as argument the missing argument(s).
23 |   </p>
24 |   <p>
25 |     You can omit more than one argument and the input of the new function will be those omitted arguments.
26 |   </p>
27 | 
28 |   <p>
29 |     The second use case is during transformations or chained operation such as <code>map</code>, <code>flatMap</code>, <code>filter</code>, etc…
30 |   </p>
31 | 
32 |   <p>
33 |     Now, when you see something like <code>a =&gt; a ...</code>, you know you can replace it with <code>_</code>.
34 |   </p>
35 |   <p>
36 |     As a side note, in IntelliJ, you can put your caret on the variable ( the variable name before the <code>=&gt;</code> ), press <i>ALT+ENTER</i> and you should be seeing something like <i>“Convert parameter to underscore section”</i>. That will replace the variable by <code>_</code> for you.
37 |   </p>
38 | 
39 |   <p>
40 |     The third and last example under the category <i>Placeholder</i> is when you are computing accumulations. Using function such as <code>foldLeft</code> or <code>reduce</code>. Explaining why sometime you have to use <code>a._1 + a._2</code> and sometime <code>_ + _</code> is beyond this lesson. But now you know what it means when you read things like <code>.reduce(_*_)</code> : it is simply <code>.product</code>.
41 |   </p>
42 | 
43 |   <p>There are a lot more use case for <code>_</code> that falls under other categories and we are going to see them in later SKBs.</p>
44 | 
45 |   <p>If you want to know more, feel free to check out this <a href="https://stackoverflow.com/questions/8000903/what-are-all-the-uses-of-an-underscore-in-scala" target="_blank">Stackoverflow answer</a>.
46 |   </p>
47 | </>
48 | 
49 | const description = "Scala Knowledge Bits - Scala _ placeholder - Periodic exercise to learn bits of knowledge about Scala. Scala _ placeholder here."
50 | 
51 | const prevUrl = "list-zip"
52 | const nextUrl = "implicit-proof"
53 | 
54 | export const pageData = {
55 |   id,
56 |   title,
57 |   date,
58 |   scastieId,
59 |   mainInfoBox,
60 |   detailedInfoBox,
61 |   description,
62 |   prevUrl,
63 |   nextUrl
64 | }
65 | 
66 | export default function Page() {
67 |   return <Skb lesson={pageData} />
68 | }
69 | 


--------------------------------------------------------------------------------
/pages/scala/_-wildcard.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "_-wildcard"
 5 | export const title = "Scala _ wildcard"
 6 | 
 7 | export const date = "2020-12-11T17:00:41"
 8 | 
 9 | const scastieId = "0P1RceC9SdOe1Pm3Z8c0lA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Few episodes ago we talked about <code>_</code> in a context of use cases that I described as <i>placeholder</i>.
14 |   </p>
15 | 
16 |   <p>
17 |     Now, let's see the other big group of use cases that is the <i>wildcard</i> or the <i>I don't care</i> category.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>Let's review each of the use cases one by one</p>
23 | 
24 |   <p>
25 |     The first one is one that we have seen before in pattern matching, it is the <i>default</i> or <i>wildcard</i> match. Which is the match that match everything. Most of the time, it is used to catch errors or implement a default behavior when all the other matches have failed. Usually, you might want to put a value name instead of <code>_</code> so that you can include what has failed in your error message.
26 |   </p>
27 | 
28 |   <p>
29 |     The second one is to match some kind of structure, in this case, match on any <code>Some</code> and we don't care what is inside. As always, you could replace the <code>_</code> by some value name to be able to do something with what is inside, but if you don't care, you can use the <code>_</code> syntax.
30 |   </p>
31 | 
32 |   <p>
33 |     Next one is related to the previous one, but with case class this time. We talked about <code>unapply</code> before. And so you might understand that the example with <code>Some(_)</code> is actually the same as the <code>CaseClass(_, _, ...)</code>. It basically, ignore some of the return elements of the <code>unapply</code> method.
34 |   </p>
35 | 
36 |   <p>
37 |     Number 4 is related to imports. It allows you to import everything under a specific package path. Same idea, if <i>you do not care</i> to include specific things, you include it all.
38 |   </p>
39 | 
40 |   <p>
41 |     Number 5 , even tho it doesn't look like it, is also related. In fact, <code>val</code> behave like a <i>pattern matching</i> structure. We are going to see this more into details in a following episode.
42 |   </p>
43 | 
44 |   <p>
45 |     Number 6 is similar as well, but the <code>val</code> is hidden inside the <i>for-comprehension</i>. It allows you to handle method that return <code>Unit</code> and still be able to include it inside the structure.
46 |   </p>
47 | 
48 |   <p>
49 |     Number 7 is similar, it allows you to create behavior that ignores the input.
50 |   </p>
51 | 
52 |   <p>
53 |     As you can see, <code>_</code> can be used when you want to not care about a particular output.
54 |   </p>
55 | 
56 | 
57 | </>
58 | 
59 | const description = "Scala Knowledge Bits - Scala _ wildcard - Periodic exercise to learn bits of knowledge about Scala. Scala _ wildcard here."
60 | 
61 | const prevUrl = "higher-kind"
62 | const nextUrl = "val-pattern-matching"
63 | 
64 | export const pageData = {
65 |   id,
66 |   title,
67 |   date,
68 |   scastieId,
69 |   mainInfoBox,
70 |   detailedInfoBox,
71 |   description,
72 |   prevUrl,
73 |   nextUrl
74 | }
75 | 
76 | export default function Page() {
77 |   return <Skb lesson={pageData} />
78 | }
79 | 


--------------------------------------------------------------------------------
/pages/scala/abstract-class.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "abstract-class"
 5 | export const title = "Scala abstract class"
 6 | 
 7 | export const date = "2020-10-16T17:00:18"
 8 | 
 9 | const scastieId = "9JlGE3QOT6StJzBcc6LlZw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>This SKB is going to continue our progress in the Object Oriented Programming aspect of Scala.</p>
13 |   <p><code>abstract class</code> are pretty similar to <code>trait</code> we saw before. But there are some slight differences.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>
18 |     You recognize the same keywords we learned about when we learned about <code>trait</code>. You can see <code>extends</code>, <code>protected</code> and <code>override</code>.
19 |   </p>
20 | 
21 |   <p>
22 |     There are more differences but for the moment let's go one step at a time.
23 |   </p>
24 |   <p>
25 |     The main difference you can notice compare to <code>trait</code> is that you are able to have a constructor directly when you <code>extends</code> the <code>abstract class</code>. This is pretty convenient to build simple pattern. We are going to see more about this in the context of <code>enumeration</code>.
26 |   </p>
27 |   <p>
28 |     To practice the concepts of Object Oriented Programming, Try to access the fields of <code>Shape</code> in the child classes. You notice that only <code>lengthOfSides</code> is <code>protected</code> and not the other ones. Remember <code>class</code> ? By default fields are <code>private</code> in a <code>class</code>. Try to add methods, maybe the area ?
29 |   </p>
30 | </>
31 | 
32 | const description = "Scala Knowledge Bits - Scala abstract class - Periodic exercise to learn bits of knowledge about Scala. Scala abstract class here."
33 | 
34 | const prevUrl = "string-format"
35 | const nextUrl = "recursion"
36 | 
37 | export const pageData = {
38 |   id,
39 |   title,
40 |   date,
41 |   scastieId,
42 |   mainInfoBox,
43 |   detailedInfoBox,
44 |   description,
45 |   prevUrl,
46 |   nextUrl
47 | }
48 | 
49 | export default function Page() {
50 |   return <Skb lesson={pageData} />
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/scala/applicative.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "applicative"
 5 | export const title = "Scala Applicative"
 6 | 
 7 | export const date = "2021-01-08T17:00:11"
 8 | 
 9 | const scastieId = "OKYzh4QwQFuwLGaNxICYZw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Let's enhance our <i>Functor</i> from few episodes ago !
14 |   </p>
15 | 
16 |   <p>
17 |     Let's learn about <i>Applicative</i> which extends what a <i>Functor</i> can do.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     Now we can build more complex things with the structures we know !
24 |   </p>
25 | 
26 |   <p>
27 |     Keep in mind that all the rules from <i>Functor</i> are still true.
28 |   </p>
29 | 
30 |   <p>
31 |     With <i>Applicative</i> we open the possibility to work with several “Boxes”. With <i>Functor</i> only, it wouldn't be possible to combine and compose them together. But with <i>Applicative</i>, we can !
32 |   </p>
33 | 
34 |   <p>
35 |     With <i>Functor</i> only, if we have <code>F[A =&gt; B]</code> and <code>F[A]</code>, with <code>map</code> alone, we wouldn't be able to combine them together. But with the <code>applicate</code> method (also simply called <code>ap</code>), we can !
36 |   </p>
37 | 
38 |   <p>
39 |     We are getting closer to <code>flatten</code> and <code>flatMap</code> !
40 |   </p>
41 | </>
42 | 
43 | const description = "Scala Knowledge Bits - Scala Applicative - Periodic exercise to learn bits of knowledge about Scala. Scala Applicative here."
44 | 
45 | const prevUrl = "foldable"
46 | const nextUrl = "covariance"
47 | 
48 | export const pageData = {
49 |   id,
50 |   title,
51 |   date,
52 |   scastieId,
53 |   mainInfoBox,
54 |   detailedInfoBox,
55 |   description,
56 |   prevUrl,
57 |   nextUrl
58 | }
59 | 
60 | export default function Page() {
61 |   return <Skb lesson={pageData} />
62 | }
63 | 


--------------------------------------------------------------------------------
/pages/scala/apply.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "apply"
 5 | export const title = "Scala apply"
 6 | 
 7 | export const date = "2020-08-19T17:03:28"
 8 | 
 9 | const scastieId = "3yTSEMA7SlKhqIoKT261xg"
10 | 
11 | const mainInfoBox = <>
12 |   <p><code>apply</code> is a <i>magic</i> Scala method. There is no need to call <code>apply</code> explicitly to execute it. And this is part of the tool that the <code>case class</code> use.</p>
13 |   <p>This SKB might be a bit longer than previous ones.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>
18 |     <code>apply</code> can be called like any other method ( <code>Person.apply(...)</code> ) but it can be used without calling its name explicitely ( <code>Person(...)</code> ). And that's it.
19 |   </p>
20 | 
21 |   <p>
22 |     If you want to learn more, continue reading.
23 |   </p>
24 | 
25 |   <p>In fact, you could implement a function yourself: </p>
26 | 
27 |   <pre>
28 |     <p>val add = new Function2[Int, Int, Int] &#123;</p>
29 | 
30 |     <p>  def apply(a: Int, b: Int): Int = a + b</p>
31 |     <p>&#125;</p>
32 | 
33 |     <p>val result = add(1, 2)</p>
34 | 
35 |     <p>assert(result == 3)</p>
36 |   </pre>
37 | 
38 |   <p>Try and copy it above in the editor.</p>
39 | 
40 |   <p>You could also implement <code>if</code> yourself ! Try it by yourself before looking at Scastie.</p>
41 | 
42 |   <p>
43 |     Solution: <a href="https://scastie.scala-lang.org/ZMltOxDQSQ2yusDiU6LNSg" target="_blank">Scastie (owFP4D18R6yjrDJoPLu7Bg) </a>
44 |   </p>
45 | </>
46 | 
47 | const description = "Scala Knowledge Bits - Scala apply - Periodic exercise to learn bits of knowledge about Scala. Scala apply here."
48 | 
49 | const prevUrl = "companion-objects"
50 | const nextUrl = "option-map"
51 | 
52 | export const pageData = {
53 |   id,
54 |   title,
55 |   date,
56 |   scastieId,
57 |   mainInfoBox,
58 |   detailedInfoBox,
59 |   description,
60 |   prevUrl,
61 |   nextUrl
62 | }
63 | 
64 | export default function Page() {
65 |   return <Skb lesson={pageData} />
66 | }
67 | 


--------------------------------------------------------------------------------
/pages/scala/call-by-name-parameters.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "call-by-name-parameters"
 5 | export const title = "Scala Call-by-name Parameters"
 6 | 
 7 | export const date = "2020-08-07T17:01:43"
 8 | 
 9 | const scastieId = "JonOPclARiarms4qOZ1aIA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>There are two ways to give parameters to a function in most programming languages: 'by-value' and 'call-by-name'.</p>
13 |   <p>The 'by-value' way is what we have seen in previous SKBs when we used functions and methods.</p>
14 |   <p>In this SKB, focus your attention on the way the parameters of the function are being declared and the syntax, notice anything?</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>Did you notice the <code>=&gt; Int</code> in the parameter list?</p>
19 |   <p>You can understand it as if it was <code>() =&gt; Int</code>, meaning a function that will return <code>Int</code> when called.</p>
20 |   <p>The content of the parameter will not be evaluated until needed. Be aware that it will be re-evaluated for each time it is called. But we will look into it into a more advanced SKB later on.</p>
21 | </>
22 | 
23 | const description = "Scala Knowledge Bits - Scala Call-by-name - Periodic exercise to learn bits of knowledge about Scala. Scala Call-by-name here."
24 | 
25 | const prevUrl = "list-filter-method"
26 | const nextUrl = "case-class"
27 | 
28 | export const pageData = {
29 |   id,
30 |   title,
31 |   date,
32 |   scastieId,
33 |   mainInfoBox,
34 |   detailedInfoBox,
35 |   description,
36 |   prevUrl,
37 |   nextUrl
38 | }
39 | 
40 | export default function Page() {
41 |   return <Skb lesson={pageData} />
42 | }
43 | 


--------------------------------------------------------------------------------
/pages/scala/case-class-copy.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "case-class-copy"
 5 | export const title = "Scala case class copy"
 6 | 
 7 | export const date = "2020-11-16T17:00:16"
 8 | 
 9 | const scastieId = "vR4QaHcPSjOyqN0lkqJtTA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     We learned about <code>case class</code> in previous SKBs, but we haven't seen the full spectrum of features that this special structure offers.
14 |   </p>
15 |   <p>One of the use case for this structure is to represent a row in a database. In some other languages, <code>case class</code> are even called <i>Record</i>.</p>
16 |   <p>We are now going to learn how to modify the values of the column of this record.</p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     Introducing <code>copy</code> !
22 |   </p>
23 | 
24 |   <p>
25 |     <code>copy</code> is this generated method that all <code>case class</code> have. It allows to make a copy of the case class instance while modifying zero, one, more or all the fields that the <code>case class</code> has.
26 |   </p>
27 | 
28 |   <p>
29 |     Remember than in functional programming and in Scala, we want to only work with immutable entities. It would be very tedious to have to manually recreate the case class, which could have dozens of fields, when all we want is, for instance, to modify the <i>last updated date</i>. The is the reason for the method, <code>copy</code>.
30 |   </p>
31 | 
32 |   <p>
33 |     But how does this magic mathod works !
34 |   </p>
35 |   <p>
36 |     Well, look at the method in the example called <code>updateContent</code>. You can see that the arguments have default values set for them. The trick is to use the current value of the fields of the case class as default value and voila!
37 |   </p>
38 |   <p>Look at how it is used lower in the exercise, you can omit some of the arguments of the method, which means it will use the default value. This allow us to modify only the part we want and keep the rest the same.
39 |   </p>
40 | </>
41 | 
42 | const description = "Scala Knowledge Bits - Scala case class copy - Periodic exercise to learn bits of knowledge about Scala. Scala case class copy here."
43 | 
44 | const prevUrl = "upper-constraint"
45 | const nextUrl = "implicit-conversion"
46 | 
47 | export const pageData = {
48 |   id,
49 |   title,
50 |   date,
51 |   scastieId,
52 |   mainInfoBox,
53 |   detailedInfoBox,
54 |   description,
55 |   prevUrl,
56 |   nextUrl
57 | }
58 | 
59 | export default function Page() {
60 |   return <Skb lesson={pageData} />
61 | }
62 | 


--------------------------------------------------------------------------------
/pages/scala/case-class.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "case-class"
 5 | export const title = "Scala Case Class"
 6 | 
 7 | export const date = "2020-08-10T17:01:37"
 8 | 
 9 | const scastieId = "J9Wl5OKcRb6LISqNXA4hrQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>We learned about <code>class</code> in a previous SKB, today we are going to learn about <code>case class</code>. They serve the same purpose which is to provide a blueprint to create <code>object</code>s. But case class provides a lot of build-in advantages.</p>
13 |   <p>As a start, notice how the case class is being instantiated, and how the fields are being accessed.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>Did you notice that we do not need <code>new</code> to create the instance of the <code>class</code>?</p>
18 |   <p>And did you notice that we do not need a function to access any of the fields?</p>
19 |   <p>In Scala, <code>case class</code> provide build-in things, let's go over them:
20 |   </p><ul>
21 | 
22 |     <li>Constructor: To instantiate an object from a case class, no need for the <code>new</code> keyword. Note that <code>class</code> will not need <code>new</code> either in Scala 3. To understand how this is done, remember the words <code>apply</code> and <code>Companion Object</code>, we are going to come back to it later.</li>
23 | 
24 |     <li>Field accessors: in <code>case class</code>, the field are <code>public</code> ( we are going to talk about <code>visibility</code> later ) by default. So you can access their values without the need to a method that will return it for you.</li>
25 | 
26 |     <li>And more; remember the terms <code>unapply</code>, <code>Product</code> and <code>Serialization</code> for later SKBs.</li>
27 | 
28 |   </ul>
29 |   <p></p>
30 | </>
31 | 
32 | const description = "Scala Knowledge Bits - Scala Case Class - Periodic exercise to learn bits of knowledge about Scala. Scala Case Class here."
33 | 
34 | const prevUrl = "call-by-name-parameters"
35 | const nextUrl = "objects"
36 | 
37 | export const pageData = {
38 |   id,
39 |   title,
40 |   date,
41 |   scastieId,
42 |   mainInfoBox,
43 |   detailedInfoBox,
44 |   description,
45 |   prevUrl,
46 |   nextUrl
47 | }
48 | 
49 | export default function Page() {
50 |   return <Skb lesson={pageData} />
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/scala/case-object.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "case-object"
 5 | export const title = "Scala case object"
 6 | 
 7 | export const date = "2020-10-28T17:06:44"
 8 | 
 9 | const scastieId = "0nVUJlV7TO6lnXj4AxRlfw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     This one should be pretty quick. </p>
14 |   <p>
15 |     Introducing <code>case object</code>.
16 |   </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     There is not much to it at first sight. It is the equivalent of what <code>case class</code> is for <code>class</code> but for <code>object</code>.
22 |   </p>
23 |   <p>
24 |     A <code>case object</code> has everything a <code>object</code> have. Feel free to go back to the corresponding episode. But add also some convenient method. For instance the `<code>toString</code> is a lot nicer, allowing you to get the name of the <code>case object</code> itself which allow for great logging.
25 |   </p>
26 | 
27 |   <p>
28 |     It was not easy to introduce only <code>case object</code> because their main use case is in the implementation of the Scala v2.x Enumerations which we are going to see next time. I wanted a dedicated episode to Enumeration but couldn't go for it until <code>case object</code> were introduced. Now that it is done, see you next time.
29 |   </p>
30 | </>
31 | 
32 | const description = "Scala Knowledge Bits - Scala case object - Periodic exercise to learn bits of knowledge about Scala. Scala case object here."
33 | 
34 | const prevUrl = "sealed"
35 | const nextUrl = "enumeration"
36 | 
37 | export const pageData = {
38 |   id,
39 |   title,
40 |   date,
41 |   scastieId,
42 |   mainInfoBox,
43 |   detailedInfoBox,
44 |   description,
45 |   prevUrl,
46 |   nextUrl
47 | }
48 | 
49 | export default function Page() {
50 |   return <Skb lesson={pageData} />
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/scala/challenge-1.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "challenge-1"
 5 | export const title = "Scala Challenge 1"
 6 | 
 7 | export const date = "2020-11-23T17:00:23"
 8 | 
 9 | const scastieId = "memyuxazQhCBWeMWI5zJHg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Today will be a practice challenge ! I had this idea in the corner of my mind for a while, but today is the day.
14 |   </p>
15 | 
16 |   <p>
17 |     We have been learning a lot together in those past months. It is time to now apply everything we practiced so far in a little challenge exercise. You will have to implement things yourself and fix the code.
18 |   </p>
19 | 
20 |   <p>
21 |     If you have trouble, feel free to jump in the Discord server to get help.
22 |   </p>
23 | </>
24 | 
25 | const detailedInfoBox = <>
26 |   <p>
27 |     How was it ?! Did you manage to solve all the problems ?
28 |   </p>
29 | 
30 |   <p>
31 |     What tools did we use to solve this challenge ?
32 |   </p>
33 | 
34 |   <ul>
35 |     <li>Math, for the rounding and totals</li>
36 |     <li><code>trait</code> and <code>abstract class</code> for the <code>display</code> and <code>Item</code></li>
37 |     <li><code>Case class</code></li>
38 |     <li><code>Object</code></li>
39 |     <li><code>copy</code></li>
40 |     <li>And some fun with text interpolation to display a beautiful receipt.</li>
41 |   </ul>
42 | 
43 |   <p>
44 |     I hope that was fun. This is the first time, so please let me know if you have any feedback. Was it too easy ? Was it too hard ?
45 |   </p>
46 | 
47 | </>
48 | 
49 | const description = "Scala Knowledge Bits - Scala Challenge 1 - Periodic exercise to learn bits of knowledge about Scala. Scala Challenge 1 here."
50 | 
51 | const prevUrl = "case-class-unapply"
52 | const nextUrl = "list-zip"
53 | 
54 | export const pageData = {
55 |   id,
56 |   title,
57 |   date,
58 |   scastieId,
59 |   mainInfoBox,
60 |   detailedInfoBox,
61 |   description,
62 |   prevUrl,
63 |   nextUrl
64 | }
65 | 
66 | export default function Page() {
67 |   return <Skb lesson={pageData} />
68 | }
69 | 


--------------------------------------------------------------------------------
/pages/scala/class-new.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "class-new"
 5 | export const title = "Scala Class new"
 6 | 
 7 | export const date = "2020-07-31T17:00:32"
 8 | 
 9 | const scastieId = "orcSDcLjRwCuRuRke8sm5w"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Scala is a language that join both worlds “Functional Programming” and “Object Oriented”.</p>
13 |   <p>We talked a little bit about “Functional Programming” in the previous SKBs and today we are going to introduce the basics for “Object Oriented” : the classes and more specifically how to create an instance of a class.</p>
14 |   <p>We will be diving a bit more into the theory after the exercise.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>A <code>class</code> is a collection of functions that can be reused. This collection is created with parameters and that will make the <code>instance</code> of the class behave differently.</p>
19 |   <p>In a lot of programming books, you will see a <code>class</code> being described as a “blueprint”. And using this “blueprint”, you are able to “instantiate”, or build, an <code>object</code>.</p>
20 |   <p>The way to build a class in Scala is using the keyword <code>new</code>.</p>
21 |   <p>
22 |     To summarize all the terminology:
23 |   </p><ul>
24 |     <li><b>Class</b>: A collection of methods, values. Built with parameter(s). Instantiated to an object via the keyword <code>new</code>.</li>
25 |     <li><b>Object</b>: An instance of a class built with specific parameters.</li>
26 |     <li><b>Instantiate</b>: The action of creating an object from a class.</li>
27 |     <li><code>new</code>: The keyword used in Scala to instantiate a class and make an object.</li>
28 |     <li><b>Field</b>: The <code>val</code> contained in the <code>class</code>.</li>
29 |     <li><b>Method</b>: The <code>def</code> (functions) contained in the <code>class</code>.</li>
30 |     <li><b>Member</b>: A term to describe both <code>field</code> and <code>method</code>.</li>
31 |   </ul>
32 |   <p></p>
33 | </>
34 | 
35 | const description = "Scala Knowledge Bits - Scala Class 'new' - Periodic exercise to learn bits of knowledge about Scala. Scala Class 'new' here."
36 | 
37 | const prevUrl = "map-for-list"
38 | const nextUrl = "comparators"
39 | 
40 | export const pageData = {
41 |   id,
42 |   title,
43 |   date,
44 |   scastieId,
45 |   mainInfoBox,
46 |   detailedInfoBox,
47 |   description,
48 |   prevUrl,
49 |   nextUrl
50 | }
51 | 
52 | export default function Page() {
53 |   return <Skb lesson={pageData} />
54 | }
55 | 


--------------------------------------------------------------------------------
/pages/scala/companion-objects.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "companion-objects"
 5 | export const title = "Scala companion objects"
 6 | 
 7 | export const date = "2020-08-17T17:00:05"
 8 | 
 9 | const scastieId = "wtv124yDQ9yDoSdNgGt66Q"
10 | 
11 | const mainInfoBox = <>
12 |   <p><code>Companion objects</code> are a specific type of <code>object</code>.</p>
13 | 
14 |   <p>Just like the <code>object</code> we saw in the previous SKB, <code>companion object</code> does not need to be instantiated.</p>
15 | 
16 |   <p>The source of the main difference between <code>object</code> and <code>companion object</code> comes from the name that they share with a <code>class</code>.</p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>Did you notice that the <code>class</code> named <code>Animal</code> is able to call a method named <code>convertLegNumberToName</code> that is defined as <code>private</code>?</p>
21 | 
22 |   <p>Other thing to notice is the <code>import</code>. In the previous SKB related to <code>object</code>, we learned how to call the member of an <code>object</code> using its name. When you use the <code>import</code>, you do not need to use the name anymore. Inside the context, where the <code>import</code> is used, with the <code>Animal._</code>, the name is not needed to be called.</p>
23 | 
24 |   <p>To summarize, a <code>companion object</code> is exactly like an object, except that the <code>class</code> that share the same name can access the <code>private</code> members.</p>
25 | 
26 |   <p>It is commonly used when you need to have constant or helper methods related to this class.</p>
27 |   <p>Leaving those members inside the class can create memory issues. Let's say you have a large constant – maybe an array or some other complex object. If it is stored inside the <code>class</code>, then each instantiation will make a copy of this constant in the memory. If instead the constant is in the <code>companion object</code>, then the program will only have to create the constant once.</p>
28 | 
29 | 
30 | </>
31 | 
32 | const description = "Scala Knowledge Bits - Scala companion objects - Periodic exercise to learn bits of knowledge about Scala. Scala companion objects here."
33 | 
34 | const prevUrl = "visibility"
35 | const nextUrl = "apply"
36 | 
37 | export const pageData = {
38 |   id,
39 |   title,
40 |   date,
41 |   scastieId,
42 |   mainInfoBox,
43 |   detailedInfoBox,
44 |   description,
45 |   prevUrl,
46 |   nextUrl
47 | }
48 | 
49 | export default function Page() {
50 |   return <Skb lesson={pageData} />
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/scala/comparators.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import Skb from 'components/skb-page'
 4 | 
 5 | export const id = "comparators"
 6 | export const title = "Scala Comparators"
 7 | 
 8 | export const date = "2020-08-03T17:01:36"
 9 | 
10 | const scastieId = "iBb50DUtT0WYfzlVbkPomg"
11 | 
12 | const mainInfoBox = <>
13 |   <p>A few new concepts are needed for this SKB.</p>
14 | <p>First, what is a <code>Boolean</code>? A <code>Boolean</code> can only take two values: <code>true</code> or <code>false</code>. It is the result of a mathematical question. For instance, is 2 less than 5 (<code>2 &lt; 5</code>), it would returns "yes" (<code>true</code>).</p>
15 | <p>And from previous SKB, you might have noticed that <code>assert</code> tests if what is inside is <code>true</code>.</p>
16 | 
17 | 
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>In Scala, and in the majority of other programming languages, you have a series of built-in comparators for mathematics:</p>
22 | <p>
23 | </p><ul>
24 | 
25 | <li><code>==</code> : for equality. Some tips here: <ul>
26 | <li>Notice that there are two <code>==</code>. With only one <code>=</code>, it would be an assignation (Like in: <code>val a = 2</code>).</li>
27 | <li>In your projects as a software engineer, always be careful about comparing numbers with decimals (Like <code>1.5632426546</code>, they are called <code>Double</code> or <code>Float</code>) because the computer will round those numbers. So instead of <code>a == b</code>, you should be doing something like: <code>Math.abs(a - b) &lt; 0.01</code>.</li>
28 | </ul></li>
29 | 
30 | <li><code>!=</code> : Not equal</li>
31 | <li><code>&gt;</code> : Greater than</li>
32 | <li><code>&lt;</code> : Less than</li>
33 | <li><code>&gt;=</code> : Greater than or equal</li>
34 | <li><code>&lt;=</code> : Less than or equal</li>
35 | 
36 | </ul>
37 | <p></p>
38 | </>
39 | 
40 | const description = "Scala Knowledge Bits - Scala Comparators - Periodic exercise to learn bits of knowledge about Scala. Scala Comparators here."
41 | 
42 | const prevUrl = "class-new"
43 | const nextUrl = "list-filter-method"
44 | 
45 | export const pageData = {
46 |   id,
47 |   title,
48 |   date,
49 |   scastieId,
50 |   mainInfoBox,
51 |   detailedInfoBox,
52 |   description,
53 |   prevUrl,
54 |   nextUrl
55 | }
56 | 
57 | export default function Page() {
58 |   return <Skb lesson={pageData} />
59 | }
60 |  
61 | 


--------------------------------------------------------------------------------
/pages/scala/constraint-inheritance.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "constraint-inheritance"
 5 | export const title = "Scala constraint inheritance"
 6 | 
 7 | export const date = "2020-12-07T17:01:22"
 8 | 
 9 | const scastieId = "QkoJXe3PTyC0ZyupcT0B4Q"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     More inheritance today, more specifically how to get help from the compiler in complex inheritance patterns
14 |   </p>
15 | 
16 |   <p>
17 |     The example here is simple to illustrate the feature but imagine what it would look like in a much more complex project.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     We saw multiple inheritance last time, but it can quickly become messy if a lot of your <code>trait</code> are depending on each other.
24 |   </p>
25 | 
26 |   <p>
27 |     It would be great if we could ask the compiler to remind us that two or more trait needs to always be together for the code to work well.
28 |   </p>
29 | 
30 |   <p>
31 |     Well, guess what? It is !
32 |   </p>
33 | 
34 |   <p>
35 |     It is possible in Scala to create a <code>trait</code> that cannot be used if not mixed in with a selection of other <code>trait</code>. Let's look at the syntax:
36 |   </p>
37 | 
38 |   <pre>
39 |     <p>trait MyTrait &#123; name: DependencyTrait =&gt; </p>
40 |     <p>  // content of trait</p>
41 |     <p>&#125;</p>
42 |   </pre>
43 | 
44 |   <p>
45 |     The <code>name</code> can be any variable name if you need to disambiguates two or more trait that might have same function names. It can also be <code>this</code> if you do not need an extra handler for it.
46 |   </p>
47 | 
48 |   <p>
49 |     And <code>DependencyTrait</code> can be one <code>trait</code> that is required to create <code>MyTrait</code> but it can more than one if you replace it by <code>trait1 with trait2 with trait3 ...</code>.
50 |   </p>
51 | 
52 |   <p>
53 |     In case of failure to comply those constraint, the compiler will give you the following error:
54 |   </p>
55 | 
56 |   <pre>illegal inheritance;
57 |     self-type [Class you are working on] does not conform to [MyTrait]'s selftype [MyTrait] with [DependencyTrait]
58 |   </pre>
59 | 
60 |   <p>
61 |     You should have seen this error message in the exercise and you now know how to fix it.
62 |   </p>
63 | 
64 |   <p>
65 |     You also now know how to befriend the compiler and making sure you don't forget a critical <code>trait</code> in the mix for your classes.
66 |   </p>
67 | </>
68 | 
69 | const description = "Scala Knowledge Bits - Scala constraint inheritance - Periodic exercise to learn bits of knowledge about Scala. Scala constraint inheritance here."
70 | 
71 | const prevUrl = "multiple-inheritance"
72 | const nextUrl = "higher-kind"
73 | 
74 | export const pageData = {
75 |   id,
76 |   title,
77 |   date,
78 |   scastieId,
79 |   mainInfoBox,
80 |   detailedInfoBox,
81 |   description,
82 |   prevUrl,
83 |   nextUrl
84 | }
85 | 
86 | export default function Page() {
87 |   return <Skb lesson={pageData} />
88 | }
89 | 


--------------------------------------------------------------------------------
/pages/scala/covariance.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "covariance"
 5 | export const title = "Scala Covariance"
 6 | 
 7 | export const date = "2021-01-11T17:00:00"
 8 | 
 9 | const scastieId = "Xyrln1IZRtyKqCvtBfHVrA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Let's see what is <i>Covariance</i>.</p>
13 | 
14 |   <p>We are going to learn what it is and when to use it.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     So, what is variance ? This is a concept related to types and how they are connected to each other. It is about inheritance. We saw before the relationship between a parent class and a child class. In functional programming we also talk about <i>sub-type</i>.
20 |   </p>
21 | 
22 |   <p>
23 |     You can see in the start of the exercise what we encountered before related to parent and child class with inheritance.
24 |   </p>
25 | 
26 |   <p>
27 |     Then we use a “normal” generic class without the covariance. You see that using a <code>F[A]</code> as a <code>F[B]</code> do not with and you are getting <code>type mismatch</code> with some explanation : <code>found F[A] , required F[B]</code>. This is expected, the types are different even tho they share a common parent, they are different.
28 |   </p>
29 |   <p>
30 |     However, why couldn't you use a <code>F[A]</code> as a <code>F[P]</code> if <code>P</code> is the parent of <code>A</code> ? This time the error is a lot more detailed:
31 |   </p>
32 | 
33 |   <pre>type mismatch;
34 |     found   : F[A]
35 |     required: F[P]
36 |     Note: A &lt;: P, but trait F is invariant in type A.
37 |     You may wish to define A as +A instead. (SLS 4.5)
38 |   </pre>
39 | 
40 |   <p>
41 |     We recognize one symbol we saw before: <code>&lt;:</code> which talks about the relationship between the two types.
42 |   </p>
43 | 
44 |   <p>
45 |     In the last part of the exercise you make a covariant trait using the syntax:
46 |   </p>
47 | 
48 |   <pre>trait MyTrait[+A]
49 |   </pre>
50 | 
51 |   <p>
52 |     The <code>+A</code> means that the trait is now <i>covariant</i> for <code>A</code>.
53 |   </p>
54 | 
55 |   <p>
56 |     And now, what was failing before is working. We are able to use <code>F[A]</code> as <code>F[P]</code>.
57 |   </p>
58 | 
59 |   <p>
60 |     Hope that was of help to understand what the <code>+A</code> means when you encounter it and how to solve some exception you might have seen ! See you next time.</p>
61 | </>
62 | 
63 | const description = "Scala Knowledge Bits - Scala Covariance - Periodic exercise to learn bits of knowledge about Scala. Scala Covariance here."
64 | 
65 | const prevUrl = "applicative"
66 | const nextUrl = "traversable"
67 | 
68 | export const pageData = {
69 |   id,
70 |   title,
71 |   date,
72 |   scastieId,
73 |   mainInfoBox,
74 |   detailedInfoBox,
75 |   description,
76 |   prevUrl,
77 |   nextUrl
78 | }
79 | 
80 | export default function Page() {
81 |   return <Skb lesson={pageData} />
82 | }
83 | 


--------------------------------------------------------------------------------
/pages/scala/curry.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import Skb from 'components/skb-page'
 4 | 
 5 | export const id = "curry"
 6 | export const title = "Scala Curry"
 7 | 
 8 | export const date = "2020-09-04T17:03:48"
 9 | 
10 | const scastieId = "pm2hh2y4Roa4ncyCvW59nQ"
11 | 
12 | const mainInfoBox = <>
13 |   <p>No, we are not talking about food here.</p>
14 | 
15 | <p>It is just a fancy way to talk about something simple. It describes the transformation of a method that takes several arguments into a series of function that each take one of those arguments. Simple? Try on the exercise.</p>
16 | </>
17 | 
18 | const detailedInfoBox = <>
19 |   <p>See? Simple. Some coding is worth a thousand words!</p>
20 | 
21 | <p>Writing the code that way has a few advantages.</p>
22 | 
23 | <p>
24 | For instance, you can decompose the function into <i>partially applied functions</i>, like <code>add2</code> in the exercise. This example is simple, but imagine a complex function that takes a database connector and/or configurations. You could set those arguments, and then only reuse the <i>partially applied function</i> when needed, I like to call it a pre-configured operation. 
25 | </p>
26 | 
27 | <p>
28 | I also like using it for aesthetics, It allows to use <code>{ }</code>like in <code>r3</code> in the exercise. 
29 | </p>
30 | 
31 | <p>And you can have as many arguments chained that way, As well as also combinations, for instance the first block could have 2 arguments and then 1 and then 3 arguments. Use it wisely depending on your needs.</p>
32 | </>
33 | 
34 | const description = "Scala Knowledge Bits - Scala Curry - Periodic exercise to learn bits of knowledge about Scala. Scala Curry here."
35 | 
36 | const prevUrl = "flatmap"
37 | const nextUrl = "try"
38 | 
39 | export const pageData = {
40 |   id,
41 |   title,
42 |   date,
43 |   scastieId,
44 |   mainInfoBox,
45 |   detailedInfoBox,
46 |   description,
47 |   prevUrl,
48 |   nextUrl
49 | }
50 | 
51 | export default function Page() {
52 |   return <Skb lesson={pageData} />
53 | }
54 |  
55 | 


--------------------------------------------------------------------------------
/pages/scala/defined-type.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "defined-type"
 5 | export const title = "Scala defined type"
 6 | 
 7 | export const date = "2020-09-18T17:00:29"
 8 | 
 9 | const scastieId = "sSmyzl5aQcW0iGskJxZIpA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Let's make our own type!</p>
13 | </>
14 | 
15 | const detailedInfoBox = <>
16 |   <p>You saw how to parameterize the entire code.</p>
17 |   <p>Try change <code>MyType</code> from <code>Int</code> to <code>String</code>.</p>
18 |   <p>This seem simple but it is a building block required to understand generic type later.</p>
19 |   <p>If you want to start now, try to replace <code>MyType</code> by the following code:
20 | 
21 |   </p><pre>type SubType = Int
22 |     type MyType = List[SubType]
23 |   </pre>
24 | 
25 |   Do you see how you can combine types together ? Like Lego !<p></p>
26 | 
27 |   <p><code>List</code> can be parameterized, we used it with <code>Int</code> and <code>String</code> in the past, but you can use any type you want.</p>
28 | </>
29 | 
30 | const description = "Scala Knowledge Bits - Scala defined type - Periodic exercise to learn bits of knowledge about Scala. Scala defined type here."
31 | 
32 | const prevUrl = "set"
33 | const nextUrl = "pattern-matching"
34 | 
35 | export const pageData = {
36 |   id,
37 |   title,
38 |   date,
39 |   scastieId,
40 |   mainInfoBox,
41 |   detailedInfoBox,
42 |   description,
43 |   prevUrl,
44 |   nextUrl
45 | }
46 | 
47 | export default function Page() {
48 |   return <Skb lesson={pageData} />
49 | }
50 | 


--------------------------------------------------------------------------------
/pages/scala/either.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "either"
 5 | export const title = "Scala Either"
 6 | 
 7 | export const date = "2020-10-12T17:00:24"
 8 | 
 9 | const scastieId = "caZffM5rS72X8SdfaV23wQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p><code>Either</code>, you will see, is kind of a in-between <code>Try</code> and <code>Option</code>.</p>
13 | 
14 |   <p>Try to experiment to see the similarity and differences.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     Similar to <code>Option</code>, you can create <code>Either</code> in two ways:
20 |   </p><ul>
21 |     <li><code>Right</code> which would be similar to <code>Some</code></li>
22 |     <li><code>Left</code> which, over time, became similar to <code>None</code>, except you can store information. I am saying “over time” because up until Scala v2.12+, <code>Either</code> was not <i>Right-bias</i>. <code>Left</code> and <code>Right</code> were just two Types. But now, <code>Left</code> is accepting to carry error messages and <code>Right</code> to be the channel for successes.</li>
23 |   </ul>
24 |   <p></p>
25 | 
26 |   <p>
27 |     You can test which Type is <code>Either</code> using <code>isLeft</code> and <code>isRight</code>. You can also use <code>map</code>, <code>flatMap</code>, etc… once again. You must be starting to know those functions pretty well by now. This is where the <i>Right-bias</i> come into play. <code>map</code> will take a function that modify the type contained in <code>Right</code> and will not do anything if the <code>Either</code> contains a <code>Left</code>.
28 |   </p>
29 | 
30 |   <p>
31 |     If you would like to specifically act on <code>Left</code> or <code>Right</code>, you can use the <code>.left</code> and <code>.right</code> methods to project the <code>Either</code> on one side of the other. For instance, to modify the content of the <code>Left</code> when it is there, you can do <code>.left.map(...)</code>.
32 |   </p>
33 | 
34 |   <p>
35 |     One major difference with <code>Try</code> is that <code>Either</code> will not catch the Exception. If an exception is thrown inside an <code>Either</code> it will propagate. Inside a <code>Try</code> it will be captured inside the <code>Failure</code> channel.
36 |   </p>
37 | </>
38 | 
39 | const description = "Scala Knowledge Bits - Scala Either - Periodic exercise to learn bits of knowledge about Scala. Scala Either here."
40 | 
41 | const prevUrl = "trait"
42 | const nextUrl = "string-format"
43 | 
44 | export const pageData = {
45 |   id,
46 |   title,
47 |   date,
48 |   scastieId,
49 |   mainInfoBox,
50 |   detailedInfoBox,
51 |   description,
52 |   prevUrl,
53 |   nextUrl
54 | }
55 | 
56 | export default function Page() {
57 |   return <Skb lesson={pageData} />
58 | }
59 | 


--------------------------------------------------------------------------------
/pages/scala/enumeration.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "enumeration"
 5 | export const title = "Scala Enumeration for 2.x"
 6 | 
 7 | export const date = "2020-10-30T17:00:57"
 8 | 
 9 | const scastieId = "BELSTmvmTde8KrAaAumQZQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Time to assemble everything we learned in the recent episodes !</p>
13 | 
14 |   <p>We are going to use <code>sealed</code>, <i>pattern matching</i>, <code>trait</code>, <code>case object</code>, <code>map</code>, etc…</p>
15 | 
16 |   <p>What you are about to see here is good knowledge to keep but the exact use case and application showed here will be deprecated in Scala 3. However, the underlying features and logic we are using will still be here so it is not a loss ! </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     We are writing an Ore management software today.
22 |   </p>
23 |   <p>
24 |     Notice how we are able to describe the Ores with a finite number of possibilities. If we want a new one, we need to add it ourselves. Did you notice the warning about pattern matching :
25 |   </p><pre>warning: match may not be exhaustive.
26 |   </pre>
27 |   Since we are using <code>sealed</code>, the compiler can know exactly the number of options available for this type. So the compiler can help us !
28 |   <p></p>
29 | 
30 |   <p>
31 |     We could simply have a <code>ore: String</code> of course. But noticed the typo in <code>Godl</code> instead of <code>Gold</code> ? And the compiler caught it for us !
32 |   </p>
33 | 
34 |   <p>The rest of the exercise is just to go a bit further and play with what we built.</p>
35 |   <p>You can set up a system for reporting, and add handy calculation with <code>lazy val</code>.</p>
36 |   <p>You can also set up special case like for Iron in the last example.</p>
37 | 
38 |   <p>Something that needs to be said is that in Scala 3 this pattern will be completely changed. Scala 3 will implement its shortcut version for Enumeration that will pretty much write this boiler plate code for us. But all those features to customize it yourself will still be available so it is not a loss to know about it !</p>
39 | 
40 |   <p>I hope this little exercise with a more applicable example was fun! If you have any feedback, as always, don't hesitate to comment below or message me on the Discord server. Looking forward to hearing from you.</p>
41 | </>
42 | 
43 | const description = "Scala Knowledge Bits - Scala Enumeration for 2.x - Periodic exercise to learn bits of knowledge about Scala. Scala Enumeration for 2.x here."
44 | 
45 | const prevUrl = "case-object"
46 | const nextUrl = "contexts"
47 | 
48 | export const pageData = {
49 |   id,
50 |   title,
51 |   date,
52 |   scastieId,
53 |   mainInfoBox,
54 |   detailedInfoBox,
55 |   description,
56 |   prevUrl,
57 |   nextUrl
58 | }
59 | 
60 | export default function Page() {
61 |   return <Skb lesson={pageData} />
62 | }
63 | 


--------------------------------------------------------------------------------
/pages/scala/extractor-pattern.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "extractor-pattern"
 5 | export const title = "Scala extractor pattern"
 6 | 
 7 | export const date = "2021-01-01T17:00:40"
 8 | 
 9 | const scastieId = "WuCy5uDvT1WeeWPg8WcUkg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Today we are going to combine several things we know to learn about <i>extractor pattern</i>.
14 |   </p>
15 | 
16 |   <p>
17 |     It might be a bit complicated but I am sure you are going to be fine !
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     The goal here is to be able to only keep the element of the <code>List</code> that are of a given type.
24 |   </p>
25 | 
26 | 
27 |   <p>
28 |     We start from a list of type A : <code>List[A]</code>. And we want to keep the element of type B, with B being the child class of A. We saw few exercise ago the syntax : <code>B &lt;: A</code>.
29 |   </p>
30 | 
31 |   <p>
32 |     We also saw the <code>implicit</code> proof using the syntax: <code>A : PROOF</code>. In this case we want <code>B</code> to be a <code>ClassTag</code> as well as being a child of <code>A</code>. Which is why we now have this syntax: <code>B &lt;: A: ClassTag</code>.
33 |   </p>
34 | 
35 |   <p>
36 |     Have you tried removing the <code>ClassTag</code> ? You are seeing a <code>Warning</code> talking about <code>abstract type B is unchecked since it is eliminated by erasure</code>. We are going to dive deeper into this in another episode. But for now, you only need to know that to mitigate the "type erasure" problem, we need to introduce a proof to be <code>ClassTag</code>.
37 |   </p>
38 | 
39 |   <p>
40 |     Now that we have our extractor, we can filter down the <code>List[Animal]</code> to only keep the <code>Cat</code> or the <code>Dog</code> !
41 |   </p>
42 | 
43 |   <p>
44 |     I am sure you are going to need this pattern in one of your project one day ! Just let us know on the Discord server how that has been useful to you !
45 |   </p>
46 | </>
47 | 
48 | const description = "Scala Knowledge Bits - Scala extractor pattern - Periodic exercise to learn bits of knowledge about Scala. Scala extractor pattern here."
49 | 
50 | const prevUrl = "literal-identifiers"
51 | const nextUrl = "functor"
52 | 
53 | export const pageData = {
54 |   id,
55 |   title,
56 |   date,
57 |   scastieId,
58 |   mainInfoBox,
59 |   detailedInfoBox,
60 |   description,
61 |   prevUrl,
62 |   nextUrl
63 | }
64 | 
65 | export default function Page() {
66 |   return <Skb lesson={pageData} />
67 | }
68 | 


--------------------------------------------------------------------------------
/pages/scala/flatmap.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "flatmap"
 5 | export const title = "Scala flatMap"
 6 | 
 7 | export const date = "2020-09-02T17:10:15"
 8 | 
 9 | const scastieId = "LES1ZVP7TSeBoi9KUJCzkA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     I want to introduce you slowly to more complex problems. This one is still fun, as you know, the main topic is <code>flatMap</code> but you are going to get an intuition for a little more.</p>
14 | 
15 |   <p>Enjoy the ride.
16 |   </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     Did you get <code>flatMap</code> ? It is <code>map</code> followed by <code>flatten</code>. Try to replace the <code>flatMap</code> in the code above by <code>map</code> and add <code>flatten</code> after it.
22 |   </p>
23 |   <p>
24 |     Ok, now that the topic of today's episode is done. What is the wizardry with all the <code>case</code> ?! This is called <i>pattern matching</i>. I am sure that, right now, you have a good intuition about it, but we are going to dive more into it, soon.</p>
25 |   <p>Stay tuned!
26 |   </p>
27 | </>
28 | 
29 | const description = "Scala Knowledge Bits - Scala flatMap - Periodic exercise to learn bits of knowledge about Scala. Scala flatMap here."
30 | 
31 | const prevUrl = "random"
32 | const nextUrl = "curry"
33 | 
34 | export const pageData = {
35 |   id,
36 |   title,
37 |   date,
38 |   scastieId,
39 |   mainInfoBox,
40 |   detailedInfoBox,
41 |   description,
42 |   prevUrl,
43 |   nextUrl
44 | }
45 | 
46 | export default function Page() {
47 |   return <Skb lesson={pageData} />
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/scala/foldable.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "foldable"
 5 | export const title = "Scala Foldable"
 6 | 
 7 | export const date = "2021-01-06T17:00:48"
 8 | 
 9 | const scastieId = "Ug8xSEt7Tlq7AJU0HkhLbg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>After learning about <i>Functor</i>, the next piece with no dependency is <i>Foldable</i>.</p>
13 |   <p>Similarly to <i>Functor</i>, this concept is taken from Category Theory and used in Functional Programing.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>
18 |     The operation <i>fold</i> allows is an aggregation. It takes a starting element and combine it with the <i>Foldable</i> type following the recipe provided by the method <code>f</code>.
19 |   </p>
20 | 
21 |   <p>
22 |     <i>Fold</i> can the used to implement <code>reduce</code>. You should try it ! The difference with <code>reduce</code> is that the start element is either the identity of the operation provided in <code>f</code>, meaning an element that does not change the value, for instance empty string <code>""</code> for the string concatenation operation or the <code>0</code> for the <code>+</code> operation in <code>Int</code> type. It is possible to implement a version of <code>reduce</code> where the start element is simply the first element to be combined in the <code>fold</code> if you have access to a function <code>head</code> for instance. You will have to handle cases when the <code>Foldable</code> provided is empty too.
23 |   </p>
24 | 
25 |   <p>
26 |     As you can see <i>fold</i> implementation is relying on recursion. We talked about recursion in a previous episode.
27 |   </p>
28 | 
29 |   <p>
30 |     Now you have seen <code>Functor</code> and <code>Foldable</code> !
31 |   </p>
32 | </>
33 | 
34 | const description = "Scala Knowledge Bits - Scala Foldable - Periodic exercise to learn bits of knowledge about Scala. Scala Foldable here."
35 | 
36 | const prevUrl = "functor"
37 | const nextUrl = "applicative"
38 | 
39 | export const pageData = {
40 |   id,
41 |   title,
42 |   date,
43 |   scastieId,
44 |   mainInfoBox,
45 |   detailedInfoBox,
46 |   description,
47 |   prevUrl,
48 |   nextUrl
49 | }
50 | 
51 | export default function Page() {
52 |   return <Skb lesson={pageData} />
53 | }
54 | 


--------------------------------------------------------------------------------
/pages/scala/foldleft.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "foldleft"
 5 | export const title = "Scala foldLeft"
 6 | 
 7 | export const date = "2020-09-23T17:01:07"
 8 | 
 9 | const scastieId = "sk3Ag6h2SAS5LOsxJJsFKw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Let me introduce <i>accumulators</i> and <i>aggregations</i>.</p>
13 | 
14 |   <p><code>foldLeft</code> is the generic concept that is under most of the function programming transformations. You can replace <code>map</code>, <code>flatMap</code>, <code>filter</code> and more by a <code>foldLeft</code>.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     In this exercise, you can see two use cases of <code>foldLeft</code>.
20 |     But first let's explain the syntax:
21 |   </p>
22 |   <pre>
23 |     <p>foldLeft(initialValue) &#123;</p>
24 |     <p>  case (accumulator, currentElement) =&gt;</p>
25 |     <p>    // return the new value of the accumulator</p>
26 |     <p>&#125;</p>
27 |   </pre>
28 | 
29 |   Note that when <code>currentElement</code> is the first element of the <code>List</code>, then <code>accumulator</code> is equal to <code>initialValue</code>. Also, if the the list is empty, then the returned value will be the <code>initialValue</code>.
30 |   <p></p>
31 | 
32 |   <p>
33 |     The returned value can be anything, for instance:
34 |   </p>
35 |   <pre>
36 |     <p>foldLeft(List.empty) &#123;</p>
37 |     <p>  case (accumulator, currentElement) =&gt;</p>
38 |     <p>    accumulator :+ currentElement</p>
39 |     <p>&#125;</p>
40 |   </pre>
41 |   would return a new <code>List</code> with the same content as the input list.
42 |   <p></p>
43 |   <p>
44 |     An other example:
45 |   </p>
46 |   <pre>
47 |     <p>foldLeft(0) &#123;</p>
48 |     <p>  case (accumulator, currentElement) =&gt;</p>
49 |     <p>    accumulator + currentElement</p>
50 |     <p>&#125;</p>
51 |   </pre>
52 |   would return the total sum of the item of the <code>List</code>. This is similar to the first example in today's exercise. And scala provide a shortcut for it: <code>.sum</code>, this would be a special case of the exercise when the initial value is <code>0</code>.
53 |   <p></p>
54 | 
55 |   <p>
56 |     In the second use case, there is a bit more going on. It uses <i>pattern matching</i> to implement different behavior based on the current element and create a new list element by element.
57 |   </p>
58 | 
59 |   <p>
60 |     As an extra exercise, try to compute the average of the list by changing the initialized value from <code>startFold</code> to <code>(0, 0)</code> and modify the function to aggregate the values.
61 |   </p>
62 | 
63 |   <p>You can also try to implement <code>map</code>, <code>flatMap</code> and, <code>filter</code> using <code>foldLeft</code>. Share your solution with our community on Discord !</p>
64 | 
65 | </>
66 | 
67 | const description = "Scala Knowledge Bits - Scala foldLeft - Periodic exercise to learn bits of knowledge about Scala. Scala foldLeft here."
68 | 
69 | const prevUrl = "pattern-matching"
70 | const nextUrl = "stream"
71 | 
72 | export const pageData = {
73 |   id,
74 |   title,
75 |   date,
76 |   scastieId,
77 |   mainInfoBox,
78 |   detailedInfoBox,
79 |   description,
80 |   prevUrl,
81 |   nextUrl
82 | }
83 | 
84 | export default function Page() {
85 |   return <Skb lesson={pageData} />
86 | }
87 | 


--------------------------------------------------------------------------------
/pages/scala/for-comprehension.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "for-comprehension"
 5 | export const title = "Scala for-comprehension"
 6 | 
 7 | export const date = "2020-09-28T17:00:25"
 8 | 
 9 | const scastieId = "FTZpkSrSRAG8WVFHEVCgFw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Using a lot of <code>map</code> and <code>flatMap</code> can make the code very hard to read as it goes into deep functions of functions.</p>
13 | 
14 |   <p>Scala has a way of handling those cases. It is called a <i>for-comprehension</i>.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     A <i>for-comprehension</i> allow you to chain <code>map</code> and <code>flatMap</code> together in an easy to read form.
20 |   </p>
21 | 
22 |   <p>
23 |     For instance, those two snippets of code are equivalent:
24 |   </p>
25 |   <pre>
26 |     <p>for &#123; n &lt;- list &#125;</p>
27 |     <p>yield n + 1</p>
28 |   </pre>
29 |   and
30 |   <pre>list.map( n =&gt; n + 1 )</pre>
31 |   <p></p>
32 | 
33 |   <p>
34 |     You can also filter the input using <i>for-comprehension</i>.
35 |   </p>
36 |   <pre>
37 |     <p>for  &#123;</p>
38 |     <p>  n &lt;- list</p>
39 |     <p>  if n == 2</p>
40 |     <p>&#125; yield n</p>
41 |   </pre>
42 |   This snippet is equivalent to:
43 |   <pre>input.withFilter(n =&gt; n == 2)
44 |   </pre>
45 |   <p></p>
46 | 
47 |   <p>
48 |     In general, everything you can do with <i>pattern matching</i>, you can do within a <i>for-comprehension</i>.
49 |     The left side of the <code>&lt;-</code> behave similar to a <i>pattern matching</i>.
50 |   </p>
51 | 
52 |   <p>
53 |     Sometimes, it can be hard to convert in your head back and forth between <i>for-comprehension</i> and <code>map</code> and <code>flatMap</code> modes. Some IDEs, such as IntelliJ, starting with version 2020, allows you to de-sugar the code and convert the <i>for-comprehension</i> into<code>map</code> and <code>flatMap</code>.
54 |   </p>
55 | 
56 | </>
57 | 
58 | const description = "Scala Knowledge Bits - Scala for-comprehension - Periodic exercise to learn bits of knowledge about Scala. Scala for-comprehension here."
59 | 
60 | const prevUrl = "stream"
61 | const nextUrl = "implicit-class"
62 | 
63 | export const pageData = {
64 |   id,
65 |   title,
66 |   date,
67 |   scastieId,
68 |   mainInfoBox,
69 |   detailedInfoBox,
70 |   description,
71 |   prevUrl,
72 |   nextUrl
73 | }
74 | 
75 | export default function Page() {
76 |   return <Skb lesson={pageData} />
77 | }
78 | 


--------------------------------------------------------------------------------
/pages/scala/functor.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "functor"
 5 | export const title = "Scala Functor"
 6 | 
 7 | export const date = "2021-01-04T17:00:29"
 8 | 
 9 | const scastieId = "SxNIO0zvSsyJPr1rnkJJTw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     <i>Functional Programming</i> today !
14 |   </p>
15 |   <p>
16 |     And let's start by the easiest one: <strong>Functor</strong>.
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     You might have heard about <i>Monad</i>, <i>Monoid</i>, <i>Applicative</i>, etc…
23 |   </p>
24 |   <p>
25 |     In this episode, we are focusing on the <i>Functor</i>.
26 |   </p>
27 |   <p>
28 |     The formal definition for a <i>Functor</i> is a transformation from a category <code>A</code> to a category <code>B</code>. Such transformations are often represented by an arrow: <code>A -&gt; B</code>.
29 |   </p>
30 | 
31 |   <p>
32 |     This transformation, in Scala, is translated to the method <code>map</code> that we have seen a lot in the past.
33 |   </p>
34 | 
35 |   <p>
36 |     A <i>Functor</i> (<code>F</code>), in category theory, must follow several rules:
37 |   </p>
38 |   <ul>
39 |     <li>All element of <code>A</code> must have a result in <code>B</code></li>
40 |     <li>Identity:
41 |       <ul>
42 |         <li>
43 |           If we define <code>id</code>, the identity method: <code>id(a) == a</code>,
44 |         </li>
45 |         <li>
46 |           then <code>id(F) == F.map(id)</code>.
47 |         </li>
48 |       </ul></li>
49 | 
50 |     <li>Composition:
51 |       <ul>
52 |         <li>
53 |           If we define <code>f</code> and <code>g</code>, two methods,
54 |         </li>
55 |         <li>
56 |           then <code>F.map(f).map(g) == F.map( g(f(_)) )</code>.
57 |         </li>
58 |       </ul></li>
59 | 
60 |   </ul>
61 | 
62 |   <p>
63 |     In the following episode, we are going to learn more about the other component of the category theory ecosystem and functional programming overall.
64 |   </p>
65 | </>
66 | 
67 | const description = "Scala Knowledge Bits - Scala Functor - Periodic exercise to learn bits of knowledge about Scala. Scala Functor here."
68 | 
69 | const prevUrl = "extractor-pattern"
70 | const nextUrl = "foldable"
71 | 
72 | export const pageData = {
73 |   id,
74 |   title,
75 |   date,
76 |   scastieId,
77 |   mainInfoBox,
78 |   detailedInfoBox,
79 |   description,
80 |   prevUrl,
81 |   nextUrl
82 | }
83 | 
84 | export default function Page() {
85 |   return <Skb lesson={pageData} />
86 | }
87 | 


--------------------------------------------------------------------------------
/pages/scala/future.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "future"
 5 | export const title = "Scala Future"
 6 | 
 7 | export const date = "2020-10-07T17:00:24"
 8 | 
 9 | const scastieId = "t1fKsn4lQVWrzpu359J91g"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Finally diving into <i>asynchronous</i> standard library !</p>
13 |   <p>Talking about <code>Future</code>, the good and the bad.</p>
14 | 
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>Lots going on here but hopefully the comments helped breaking it down into bits size knowledge.</p>
19 | 
20 |   <p>First of all, to use <code>Future</code>, you have to define an <code>ExecutionContext</code>. There are plenty of ways to do it but to stay simple, we are going to be using the default <code>global</code> one.</p>
21 | 
22 |   <p>Then, let's start with the first part. In this part, we are discovering <code>Future</code>. Simply create then using <code>Future &#123;...&#125;</code> and you can have any code in there. The return type will be <code>Future[A]</code>, where <code>A</code> is the return type of what is inside the <code>&#123;...&#125;</code>.</p>
23 | 
24 |   <p>You can chain futures together using <i>for-comprehension</i>, like we saw in previous episode. As well as the traditional <code>map</code>, <code>flatMap</code>, etc…</p>
25 | 
26 |   <p>We are already encountering one danger to know about <code>Future</code>: they start as soon as they are created. Also, the next operation is executed when the first one return, this is why the futures <code>f3</code> to <code>f5</code> are waiting on each other to start. To start them at the same time, you would have to create them outside of the <i>for-comprehension</i> like <code>f1</code> and <code>f2</code>.</p>
27 | 
28 |   <p>The second part is to illustrate the biggest danger about <code>Future</code>. They are <strong>NOT</strong> cancellable !</p>
29 | 
30 |   <p>As you can see, even when the <code>Await</code> time is smaller and would throw an exception, the <code>Future</code> keep running in the background. Which can be dangerous if you are doing some insert in a database for instance and believe that it was cancel, it will not be.</p>
31 | 
32 |   <p>Other framework more advanced like <a href="https://github.com/zio/zio" target="_blank">ZIO</a> offer better asynchronous features using Fibers instead of Threads. But this will have to wait for us to be master in functional programming and more advanced concepts before exploring this library.</p>
33 | </>
34 | 
35 | const description = "Scala Knowledge Bits - Scala Future - Periodic exercise to learn bits of knowledge about Scala. Scala Future here."
36 | 
37 | const prevUrl = "implicit-val"
38 | const nextUrl = "trait"
39 | 
40 | export const pageData = {
41 |   id,
42 |   title,
43 |   date,
44 |   scastieId,
45 |   mainInfoBox,
46 |   detailedInfoBox,
47 |   description,
48 |   prevUrl,
49 |   nextUrl
50 | }
51 | 
52 | export default function Page() {
53 |   return <Skb lesson={pageData} />
54 | }
55 | 


--------------------------------------------------------------------------------
/pages/scala/higher-kind.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "higher-kind"
 5 | export const title = "Scala higher kind"
 6 | 
 7 | export const date = "2020-12-09T17:00:01"
 8 | 
 9 | const scastieId = "h4vMQgWDTReGLgIJODIe5g"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Let's dive more into object oriented programming ideas but with a dash of functional programming.
14 |   </p>
15 | 
16 |   <p>
17 |     The idea today is to go a bit further with <code>trait</code> and be able to describe behaviors of <i>higher kinds</i>. It is just a fancy terms to describe type that accept type as parameter, such as <code>List[A]</code>, the <code>A</code> being the type accepted as parameter.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     To create a generic trait that “target” type that take type(s) as parameter, the syntax is:
24 |   </p>
25 | 
26 |   <pre>trait MyTrait[F[_]] { }
27 |   </pre>
28 | 
29 |   <p>
30 |     The <code>F[_]</code> means that we are expecting a type <code>F</code> that take one type parameter as argument, the <code>_</code>.
31 |   </p>
32 | 
33 |   <p>
34 |     Note that it is possible to target a type that takes two types as input with the following syntax: <code>F[_, _]</code>. You can imagine that it is possible to target type with more than two following the same logic.
35 |   </p>
36 | 
37 |   <p>
38 |     When you use a parameterized type you do something like <code>List[Int]</code> so if you want to use the type itself you simply has to do <code>Trait[List]</code>, not need to add anything after the <code>List</code>.
39 |   </p>
40 | 
41 |   <p>
42 |     You also noticed that you can create your own type and it will behave the same way. Look at <code>CounterT</code> in our example. It takes one type as parameter so it can be used with our <code>trait</code>.
43 |   </p>
44 | </>
45 | 
46 | const description = "Scala Knowledge Bits - Scala higher kind - Periodic exercise to learn bits of knowledge about Scala. Scala higher kind here."
47 | 
48 | const prevUrl = "constraint-inheritance"
49 | const nextUrl = "_-wildcard"
50 | 
51 | export const pageData = {
52 |   id,
53 |   title,
54 |   date,
55 |   scastieId,
56 |   mainInfoBox,
57 |   detailedInfoBox,
58 |   description,
59 |   prevUrl,
60 |   nextUrl
61 | }
62 | 
63 | export default function Page() {
64 |   return <Skb lesson={pageData} />
65 | }
66 | 


--------------------------------------------------------------------------------
/pages/scala/implicit-class.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "implicit-class"
 5 | export const title = "Scala implicit class"
 6 | 
 7 | export const date = "2020-09-30T17:02:01"
 8 | 
 9 | const scastieId = "IVecl2SWQrKJ4BB4tz9wGg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Slowly getting into the more advanced features of Scala.</p>
14 |   <p>
15 |     Starting with <i>implicit class</i>.
16 |   </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p><i>implicit class</i> allows you to add methods to a <i>type</i>.</p>
21 | 
22 |   <p>
23 |     The syntax is like this:
24 |   </p>
25 |   <pre>
26 |     <p>implicit class NAME(value_name: TypeToOverride) &#123;</p>
27 |     <p>  def methodToAdd: OutputType = ???</p>
28 |     <p>&#125;</p>
29 |   </pre>
30 |   <p></p>
31 | 
32 |   <p>
33 |     You might have noticed an other form:
34 |   </p>
35 |   <pre>
36 |     <p>implicit class NAME(val value_name: TypeToOverride) extends AnyVal &#123;</p>
37 |     <p>  def methodToAdd: OutputType = ???</p>
38 |     <p>&#125;</p>
39 |   </pre>
40 |   <p></p>
41 | 
42 |   <p>
43 |     The second form will be more efficient, it will not create a new instance. The first form will create a new instance of the Type which can be inefficient if overused. Then, why not use the <code>AnyVal</code> form all the time ? There are a multitude of reasons, I could go over each and every ones of them, but this <a href="https://stackoverflow.com/a/14931302/3357831" target="_blank">Stackoverflow answer</a> explains it in a lot of details.
44 |   </p>
45 | </>
46 | 
47 | const description = "Scala Knowledge Bits - Scala implicit class - Periodic exercise to learn bits of knowledge about Scala. Scala implicit class here."
48 | 
49 | const prevUrl = "for-comprehension"
50 | const nextUrl = "regex"
51 | 
52 | export const pageData = {
53 |   id,
54 |   title,
55 |   date,
56 |   scastieId,
57 |   mainInfoBox,
58 |   detailedInfoBox,
59 |   description,
60 |   prevUrl,
61 |   nextUrl
62 | }
63 | 
64 | export default function Page() {
65 |   return <Skb lesson={pageData} />
66 | }
67 | 


--------------------------------------------------------------------------------
/pages/scala/implicit-conversion.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "implicit-conversion"
 5 | export const title = "Scala implicit conversion"
 6 | 
 7 | export const date = "2020-11-18T17:00:02"
 8 | 
 9 | const scastieId = "BCbTdLn4Sl2vSFsNDWn1bg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Be careful ! I am going to show you something that you have to be really careful about.</p>
13 | 
14 |   <p><i>With great power comes great responsibilities.</i></p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     The construct <code>implicit def</code> allows you to implicitly convert from one type to another.
20 |   </p>
21 | 
22 |   <p>
23 |     The syntax is pretty straightforward:
24 |   </p>
25 |   <pre>implicit def [NAME](input: INPUT_TYPE): OUTPUT_TYPE = ???
26 |   </pre>
27 |   <p>
28 |     It is usually named either <code>from[INPUT_TYPE]To[OUTPUT_TYPE]</code> or in our case since it is already contained inside of the <i>companion object</i>, simply <code>to[OUTPUT_TYPE]</code>.
29 |   </p>
30 | 
31 |   <p>
32 |     You have to be careful however. You can trap yourself.
33 |   </p>
34 | 
35 |   <p>
36 |     For instance, if by mistake you are passing the name of the user in the id field, in a normal situation, the compiler would break and tell you that you are giving a <code>String</code> when the method expect an <code>Int</code> and that will catch your mistake.
37 |   </p>
38 |   <p>However, let's say you want to make your life easier for a different use case, you implement an <i>implicit conversion</i> that automatically convert <code>String</code> to <code>Int</code>. At this point, the compiler will automatically convert any <code>String</code> to <code>Int</code> which can create a real mess.
39 |   </p>
40 | 
41 |   <p>
42 |     I would suggest to use <code>implicit def</code> extremely carefully and in very limited scope. Also, do not implement <i>implicit conversion</i> for basic types such as <code>String</code> or <code>Int</code>, but only for more complex types like <code>trait</code> or <code>case class</code>. So that you have a more refined control on when it is used.
43 |   </p>
44 | </>
45 | 
46 | const description = "Scala Knowledge Bits - Scala implicit conversion - Periodic exercise to learn bits of knowledge about Scala. Scala implicit conversion here."
47 | 
48 | const prevUrl = "case-class-copy"
49 | const nextUrl = "case-class-unapply"
50 | 
51 | export const pageData = {
52 |   id,
53 |   title,
54 |   date,
55 |   scastieId,
56 |   mainInfoBox,
57 |   detailedInfoBox,
58 |   description,
59 |   prevUrl,
60 |   nextUrl
61 | }
62 | 
63 | export default function Page() {
64 |   return <Skb lesson={pageData} />
65 | }
66 | 


--------------------------------------------------------------------------------
/pages/scala/infix-notation.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "infix-notation"
 5 | export const title = "Scala infix notation"
 6 | 
 7 | export const date = "2020-11-04T17:03:46"
 8 | 
 9 | const scastieId = "i0Ah55lJQMy7XONJ7Kiuqg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     This SKB will teach you a little more about some syntax allowed by the Scala language: infix.
14 |   </p>
15 |   <p>
16 |     It allows you to remove the <code>.</code> and the <code>()</code> when using a method.
17 |   </p>
18 | 
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     First of all, did you realize that every operation that seems to be “magic” like the <code>+</code> or <code>==</code> are just function like any other. But by habit , we use the infix notation for those by default. It is possible to use the “normal” notation with the <code>.</code> and the <code>()</code> but let's be honest, it looks weird !
24 |   </p>
25 | 
26 |   <p>
27 |     You can use the infix notation for every method that takes one argument. Which means you can use it for <code>map</code>, <code>flatMap</code> and all the other ones.
28 |   </p>
29 | 
30 |   <p>
31 |     We also kind of saw it quickly previously when we talked about <code>reduce</code>. We saw that we could turn
32 |   </p><pre>list.reduce ( (a, b) =&gt; a.combineWith(b) )
33 |   </pre>
34 |   into
35 |   <pre>list.reduce ( _ combinedWith _ )
36 |   </pre>
37 |   You now understand one part of puzzle. The second part being the <code>_</code> that we are going to see soon.
38 |   <p></p>
39 | 
40 |   <p>
41 |     One last note, be careful not to abuse it or the code can become extremely horrible to decipher. You could chain methods are methods and lost track of which value is executing what.
42 |   </p><pre>a map _ combined v map _ + 1
43 |   </pre>
44 |   This example is hard to read. Does <code>combined</code> return a list ? What is the second <code>map</code> applied to ? So, be careful !
45 |   <p></p>
46 | 
47 |   <p>It is also possible to use infix notation for function that has no arguments, but it is an extra feature, not included by default that you need to enable. To learn more, you can search for <code>scala.language.postfixOps</code> which allow you to use infix notation even without an argument.</p>
48 | </>
49 | 
50 | const description = "Scala Knowledge Bits - Scala infix notation - Periodic exercise to learn bits of knowledge about Scala. Scala infix notation here."
51 | 
52 | const prevUrl = "contexts"
53 | const nextUrl = "pattern-matching-at"
54 | 
55 | export const pageData = {
56 |   id,
57 |   title,
58 |   date,
59 |   scastieId,
60 |   mainInfoBox,
61 |   detailedInfoBox,
62 |   description,
63 |   prevUrl,
64 |   nextUrl
65 | }
66 | 
67 | export default function Page() {
68 |   return <Skb lesson={pageData} />
69 | }
70 | 


--------------------------------------------------------------------------------
/pages/scala/list-filter-method.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-filter-method"
 5 | export const title = "Scala List Filter Method"
 6 | 
 7 | export const date = "2020-08-05T17:00:53"
 8 | 
 9 | const scastieId = "TMCEMboDQTK2EWUvaiDd5g"
10 | 
11 | const mainInfoBox = <>
12 |   <p>In a previous SKB, we met the <code>map</code> method that the standard library offers. There are plenty more, but let's focus on the <code>filter</code> method in this Scala Knowledge Bit.</p>
13 | </>
14 | 
15 | const detailedInfoBox = <>
16 |   <p>The <code>filter</code> method allows you to keep the elements of the list that return true for the test (Also called a lambda function).</p>
17 |   <p>For instance, for <code>list.filter(a =&gt; a &gt; 2)</code>, the <code>list</code> will be filtered down to only keep the elements that are <code>&gt; 2</code> (greater than 2). If the list was <code>List(1,2,3,4)</code> then the filter method would return a new list: <code>List(3,4)</code>.</p>
18 | </>
19 | 
20 | const description = "Scala Knowledge Bits - Scala List Filter Method - Periodic exercise to learn bits of knowledge about Scala. Scala List Filter Method here."
21 | 
22 | const prevUrl = "comparators"
23 | const nextUrl = "call-by-name-parameters"
24 | 
25 | export const pageData = {
26 |   id,
27 |   title,
28 |   date,
29 |   scastieId,
30 |   mainInfoBox,
31 |   detailedInfoBox,
32 |   description,
33 |   prevUrl,
34 |   nextUrl
35 | }
36 | 
37 | export default function Page() {
38 |   return <Skb lesson={pageData} />
39 | }
40 | 


--------------------------------------------------------------------------------
/pages/scala/list-flatten.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-flatten"
 5 | export const title = "Scala List Flatten"
 6 | 
 7 | export const date = "2020-08-24T17:02:03"
 8 | 
 9 | const scastieId = "S63YwlmXRh6dvaapW7GV2A"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Do you remember the <code>map</code>, from few SKBs ago ?</p>
13 | 
14 |   <p>As a reminder, <code>map</code> allows you to transform a <code>List[A]</code> into a <code>List[B]</code>.</p>
15 | 
16 |   <p>What will happen if <code>B</code> is a <code>List</code> as well ?</p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     <code>flatten</code> allows you to turn a <code>List[List[A]]</code> into a <code>List[A]</code>.</p>
22 | 
23 |   <p>
24 |     Try to experiment with other <i>containers</i> such as <code>Option</code> we saw in the past.
25 |   </p>
26 | 
27 |   <p>What happen if you do </p>
28 |   <pre>
29 |     <p>val a: Option[Int] = Some(12)</p>
30 | 
31 |     <p>val aa: Option[Option[Int]] = a.map(x =&gt; Some(x))</p>
32 | 
33 |     <p>val flattenA: Option[Int] = aa.flatten</p>
34 |   </pre>
35 |   <p></p>
36 | 
37 | </>
38 | 
39 | const description = "Scala Knowledge Bits - Scala List Flatten - Periodic exercise to learn bits of knowledge about Scala. Scala List Flatten here."
40 | 
41 | const prevUrl = "option-map"
42 | const nextUrl = "tuple"
43 | 
44 | export const pageData = {
45 |   id,
46 |   title,
47 |   date,
48 |   scastieId,
49 |   mainInfoBox,
50 |   detailedInfoBox,
51 |   description,
52 |   prevUrl,
53 |   nextUrl
54 | }
55 | 
56 | export default function Page() {
57 |   return <Skb lesson={pageData} />
58 | }
59 | 


--------------------------------------------------------------------------------
/pages/scala/list-of-option-flatten.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-of-option-flatten"
 5 | export const title = "Scala List of Option flatten"
 6 | 
 7 | export const date = "2020-12-25T17:02:53"
 8 | 
 9 | const scastieId = "WxOdhbt5SNaKM5OYilv36Q"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Recently ( as on December 2020 ), we have talked about List of Option on the Discord server so I thought we would dive in deeper here.
14 |   </p>
15 | 
16 |   <p>
17 |     This specific <code>flatten</code> operation is not well documented but extremely useful in a lost of use cases. Today we are simply going to see how it works and later on we are going to see in what cases it can be useful.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     We saw it before but <code>flatMap(f)</code> is the same as <code>.map(f).flatten</code>. The <code>flatten</code> operation will combine two layers of container ( monad ) into one. So it will combine <code>List[List[A]]</code> into <code>List[A]</code> or <code>Option[Option[A]]</code> into <code>Option[A]</code> for instance.
24 |   </p>
25 | 
26 |   <p>
27 |     In this episode, we are looking at what happen in the specific case of <code>List[Option[A]]</code> when it is flatten.
28 |   </p>
29 | 
30 |   <p>
31 |     <code>List[Option[A]]</code> will be turned into <code>List[A]</code> by the <code>flatten</code> operation.
32 |   </p>
33 | 
34 |   <p>
35 |     It might be interesting to note that <code>Option[List[A]].flatten</code> triggers an error.
36 |   </p>
37 | 
38 |   <p>
39 |     But this answer raise a new question, what happen to the <code>Option</code> elements in the list !?
40 |   </p>
41 | 
42 |   <p>
43 |     Remember that <code>Option</code> has two possible case. The first one is <code>Some</code> when there is an element, those will simply be opened up and they will be transformed from <code>Some[A]</code> to <code>A</code>. For the second case, <code>None</code>, they will be removed from the list. So you will end up with potentially less element that you started with in the list after performing the <code>flatten</code> operation.
44 |   </p>
45 | 
46 |   <p>
47 |     It would be equivalent of doing this:
48 |   </p>
49 | 
50 |   <pre>
51 |     <p>val l: List[Option[A]] = ???</p>
52 | 
53 |     <p>val r: List[A] = l</p>
54 |     <p>  .filter &#123;</p>
55 |     <p>    case Some(_) =&gt; true</p>
56 |     <p>    case None =&gt; false</p>
57 |     <p>  &#125;</p>
58 |     <p>  .map &#123;</p>
59 |     <p>    case Some(n) =&gt; n</p>
60 |     <p>    case None =&gt; throw new Exception("Cannot happen")</p>
61 |     <p>  &#125;</p>
62 |   </pre>
63 | </>
64 | 
65 | const description = "Scala Knowledge Bits - Scala List of Option flatten - Periodic exercise to learn bits of knowledge about Scala. Scala List of Option flatten here."
66 | 
67 | const prevUrl = "list-pattern-matching"
68 | const nextUrl = "operators"
69 | 
70 | export const pageData = {
71 |   id,
72 |   title,
73 |   date,
74 |   scastieId,
75 |   mainInfoBox,
76 |   detailedInfoBox,
77 |   description,
78 |   prevUrl,
79 |   nextUrl
80 | }
81 | 
82 | export default function Page() {
83 |   return <Skb lesson={pageData} />
84 | }
85 | 


--------------------------------------------------------------------------------
/pages/scala/list-parallel.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-parallel"
 5 | export const title = "Scala List parallel"
 6 | 
 7 | export const date = "2020-09-11T17:01:21"
 8 | 
 9 | const scastieId = "MMl4M3LDQZisDo5AVXOwWg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     I am going to give you an introduction to <i>parallelization</i>. For this, I will be using <code>par</code>.</p>
14 | 
15 |   <p>However, you have to know, that to use this in <strong>Scala 2.13+</strong> you need extra steps. You can read more on <a href="https://stackoverflow.com/a/57290463/3357831" target="_blank">Stackoverflow</a>.  I made the choice to still be using it because, I think, it is a great stepping stone to understand more complex subjects.
16 |   </p>
17 |   <p>Let's dive in!</p>
18 | 
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     Compare the output of the two <code>map</code>. In the first one, you see the numbers in the same order they are in the source <code>Range</code>. In the second one, the order is random, try running it several times ; you will see the order of the print statements change.
24 |   </p>
25 | 
26 |   <p>
27 |     This happen because all the operation executed in the <code>map</code> happen at the <i>same</i> time, in parallel.
28 |   </p>
29 | 
30 |   <p>Remember the SKB on <code>Thread.sleep</code>, this was the introduction to the concept of Threads. To allow each operation to happen at the same time, Scala will manage a pool of threads for you. Each operation will be allocated to thread that the computer will compute and then return the result for each operation. Finally, the result will be combined before being returned to you.</p>
31 | 
32 |   <p>In further SKBs, we are going to learn more about threads in more details. We are going to talk about <code>Fiber</code>, <code>Future</code>, <code>asynchronous</code> and more. Stay tuned!</p>
33 | </>
34 | 
35 | const description = "Scala Knowledge Bits - Scala List parallel - Periodic exercise to learn bits of knowledge about Scala. Scala  List parallel here."
36 | 
37 | const prevUrl = "range"
38 | const nextUrl = "main"
39 | 
40 | export const pageData = {
41 |   id,
42 |   title,
43 |   date,
44 |   scastieId,
45 |   mainInfoBox,
46 |   detailedInfoBox,
47 |   description,
48 |   prevUrl,
49 |   nextUrl
50 | }
51 | 
52 | export default function Page() {
53 |   return <Skb lesson={pageData} />
54 | }
55 | 


--------------------------------------------------------------------------------
/pages/scala/list-pattern-matching.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-pattern-matching"
 5 | export const title = "Scala List pattern matching"
 6 | 
 7 | export const date = "2020-12-23T17:02:30"
 8 | 
 9 | const scastieId = "my7ARfxYS02ArwbEa6U9NQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Let's see how <code>List</code> is used in the context of <i>pattern matching</i>.
14 |   </p>
15 | 
16 |   <p>
17 |     This is a pre-requirement to talk about recursion later on.
18 |   </p>
19 | 
20 | </>
21 | 
22 | const detailedInfoBox = <>
23 |   <p>
24 |     First we have to talk about how <code>List</code> can be created and modified.
25 |   </p>
26 |   <p>
27 |     Everything is immutable which is why we always create a new <code>List</code>, we don't update the previous one.
28 |   </p>
29 |   <p>
30 |     A few new operator today:
31 |   </p>
32 | 
33 |   <ul>
34 | 
35 |     <li><code>Nil</code>: not really an operator, but it describe an empty list, it is a short cut for <code>List.empty[A]</code></li>
36 | 
37 |     <li><code>::</code>: to add an element at the start of a <code>List</code>, which is why to create a <code>List</code> using this operator, we have to finish by <code>Nil</code>. We actually prepend element to an empty list.</li>
38 | 
39 |     <li><code>+:</code>: to prepend an element to the <code>List</code>. Same as <code>::</code>.</li>
40 | 
41 |     <li><code>:+</code>: to append an element at the end of a <code>List</code></li>
42 |   </ul>
43 | 
44 |   <p>
45 |     If know that <code>+:</code> and <code>:+</code> can be confusing but you simply have to remember that <code>:</code> is towards the <code>List</code>.
46 |   </p>
47 | 
48 |   <p><i>Pattern matching</i> now</p>
49 | 
50 |   <p>Using the <code>::</code> we can extract head element(s) from the List.</p>
51 | 
52 |   <p>
53 |     For instance, we can <code>case head :: tail =&gt; </code> to extract the first element of the list. We can also do <code>case a :: b :: tail =&gt;</code> to extract the two first element of the list. We can continue with as many as we would like.
54 |   </p>
55 | 
56 |   <p>
57 |     Similarly to all the other <i>pattern matching</i> construct, we can add conditions to all those patterns. Either by adding <code>if</code> at the end or by replacing a value name by a literal value, for instance: <code>case 1 :: tail =&gt;</code> will match on any list that start by a <code>1</code>. And <code>case 1 :: Nil =&gt; </code> will match on a list containing one element being <code>1</code>.
58 |   </p>
59 | 
60 | 
61 | </>
62 | 
63 | const description = "Scala Knowledge Bits - Scala List pattern matching - Periodic exercise to learn bits of knowledge about Scala. Scala List pattern matching here."
64 | 
65 | const prevUrl = "option-pattern-matching"
66 | const nextUrl = "list-of-option-flatten"
67 | 
68 | export const pageData = {
69 |   id,
70 |   title,
71 |   date,
72 |   scastieId,
73 |   mainInfoBox,
74 |   detailedInfoBox,
75 |   description,
76 |   prevUrl,
77 |   nextUrl
78 | }
79 | 
80 | export default function Page() {
81 |   return <Skb lesson={pageData} />
82 | }
83 | 


--------------------------------------------------------------------------------
/pages/scala/list-sum-method.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-sum-method"
 5 | export const title = "Scala List Sum Method"
 6 | 
 7 | export const date = "2020-07-22T17:01:35"
 8 | 
 9 | const scastieId = "Bk9g8XhJSuS5qgXXlsO17A"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Scala has a lot of pre-built methods. We are going to learn about one related to <code>List</code> called <code>sum</code>.</p>
13 | </>
14 | 
15 | const detailedInfoBox = <>
16 |   <p><code>sum</code> will go through each element of the List and add all the elements together.</p>
17 |   <p>It is actually a shortcut for <code>list.fold(0)( _ + _ )</code>. It might look strange syntax right now but SKB will help you become an expert soon.
18 |   </p>
19 | </>
20 | 
21 | const description = "Scala Knowledge Bits - Scala List Sum Method - Periodic exercise to learn bits of knowledge about Scala. Scala List Sum Method here."
22 | 
23 | const prevUrl = "method-with-arguments"
24 | const nextUrl = "option"
25 | 
26 | export const pageData = {
27 |   id,
28 |   title,
29 |   date,
30 |   scastieId,
31 |   mainInfoBox,
32 |   detailedInfoBox,
33 |   description,
34 |   prevUrl,
35 |   nextUrl
36 | }
37 | 
38 | export default function Page() {
39 |   return <Skb lesson={pageData} />
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/scala/list-zip.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "list-zip"
 5 | export const title = "Scala List zip"
 6 | 
 7 | export const date = "2020-11-25T17:01:50"
 8 | 
 9 | const scastieId = "mKhYciyqS362m6ZXaWJ70Q"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     I just realized we forgot to talk about <code>zip</code>.
14 |   </p>
15 | 
16 |   <p>Today should be an easy one.</p>
17 | 
18 |   <p>Don't forget, you can use <code>Range</code> to create List more easily.</p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     Easy ?
24 |   </p>
25 |   <p>
26 |     <code>zip</code> allows you to combine two list into one. The syntax is
27 |   </p>
28 |   <pre>List[A].zip(List[B]) =&gt; List[(A, B)]
29 |   </pre>
30 |   <p>
31 |     It will return a list with both type as a <code>tuple</code>
32 |   </p>
33 | 
34 |   <p>
35 |     I also introduce a little new function: <code>swap</code>. It is a function available for <code>Tuple[A, B]</code>. It allows to flip a <code>tuple(a, b)</code> into a <code>tuple(b, a)</code>.
36 |   </p>
37 | 
38 |   <p>Extra exercise:</p>
39 |   <p>
40 |     What happen if you zip several times in a row ?
41 |   </p>
42 |   <p>
43 |     Try out: <code>l1.zip(l2).zip(l3).zip(l4)</code>
44 |   </p>
45 |   <p>
46 |     And then try to combine it all with
47 |     <code>.map &#123; case ??? =&gt; &#125;</code>
48 |   </p>
49 |   <p>
50 |     What will be the case pattern here ?
51 |   </p>
52 | </>
53 | 
54 | const description = "Scala Knowledge Bits - Scala List zip - Periodic exercise to learn bits of knowledge about Scala. Scala List zip here."
55 | 
56 | const prevUrl = "challenge-1"
57 | const nextUrl = "_-placeholder"
58 | 
59 | export const pageData = {
60 |   id,
61 |   title,
62 |   date,
63 |   scastieId,
64 |   mainInfoBox,
65 |   detailedInfoBox,
66 |   description,
67 |   prevUrl,
68 |   nextUrl
69 | }
70 | 
71 | export default function Page() {
72 |   return <Skb lesson={pageData} />
73 | }
74 | 


--------------------------------------------------------------------------------
/pages/scala/literal-identifiers.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "literal-identifiers"
 5 | export const title = "Scala literal identifiers"
 6 | 
 7 | export const date = "2020-12-30T17:03:03"
 8 | 
 9 | const scastieId = "eGqqiIwaRQOV5jHD55nemg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Super short one today.</p>
13 | 
14 |   <p>But I think it is necessary to know in case you encounter it in the wild</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     So yes, super short today like I said.
20 |   </p>
21 | 
22 |   <p>
23 |     It is possible in Scala to have weird value name that can be sentences. Or pretty much anything for that matter. You can even try to create a value named <code>\n</code> and it works.
24 |   </p>
25 | 
26 |   <p>
27 |     The syntax is straightforward, just have to start and end the name of the identifier by <code>`</code> backquote.
28 |   </p>
29 | 
30 |   <p>It also works for field names in a <code>case class</code> for instance.</p>
31 | 
32 |   <p>
33 |     One use case where I have this used pretty often is with <i>giter8</i>. This is a system to create project template. You can learn more on <a href="https://github.com/foundweekends/giter8" target="_blank">their GitHub</a>. In those template, user can enter any input they want so i can be useful to keep the user input inside the <code>`</code> so the rest of the template do not break.
34 |   </p>
35 | 
36 |   <p>
37 |     Another use case is to be able to use reserved keyword, for instance if you would like to name your value <code>type</code> that wouldn't work, but you can name it <code>`type`</code>.
38 |   </p>
39 | </>
40 | 
41 | const description = "Scala Knowledge Bits - Scala literal identifiers - Periodic exercise to learn bits of knowledge about Scala. Scala literal identifiers here."
42 | 
43 | const prevUrl = "operators"
44 | const nextUrl = "extractor-pattern"
45 | 
46 | export const pageData = {
47 |   id,
48 |   title,
49 |   date,
50 |   scastieId,
51 |   mainInfoBox,
52 |   detailedInfoBox,
53 |   description,
54 |   prevUrl,
55 |   nextUrl
56 | }
57 | 
58 | export default function Page() {
59 |   return <Skb lesson={pageData} />
60 | }
61 | 


--------------------------------------------------------------------------------
/pages/scala/main.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "main"
 5 | export const title = "Scala main"
 6 | 
 7 | export const date = "2020-09-14T17:00:10"
 8 | 
 9 | const scastieId = "phsta85kR2alB3IGPoq5eg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     A <code>main</code> is the method that is being called to start your program. It needs a specific structure – called <i>prototype</i> when talking about methods – to be recognized.
14 |   </p>
15 | 
16 |   <p>Until now we ran all the SKBs in <i>Worksheet</i> mode which hides the <code>main</code> from us.</p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     If you have tried to remove or change the <code>main</code> function, you might have noticed an exception:
22 |   </p><pre>java.lang.RuntimeException: No main class detected.
23 |   </pre>
24 |   <p></p>
25 |   <p>
26 |     This <code>Exception</code> will be thrown if a <code>main</code> method cannot be found or is not contained within an <code>object</code>. Try to change the code to trigger it.
27 |   </p>
28 |   <p>
29 |     The main prototype is always of the form:
30 |   </p><pre>def main(args: Array[String]): Unit = { }
31 |   </pre>
32 |   The <code>args: Array[String]</code> is where you would be able to read and use the arguments given to the application when started.
33 |   <p></p>
34 |   <p>
35 |     That is pretty much it concerning <code>main</code>, so I thought it would be nice to combine some of the things we've seen in the past. This SKB is using <code>Map</code>, <code>object</code>, <code>Option</code>, <code>lazy val</code>, <code>def</code> all into the same project. Try to play with it and make it your own.
36 |   </p>
37 | </>
38 | 
39 | const description = "Scala Knowledge Bits - Scala main - Periodic exercise to learn bits of knowledge about Scala. Scala main here."
40 | 
41 | const prevUrl = "list-parallel"
42 | const nextUrl = "set"
43 | 
44 | export const pageData = {
45 |   id,
46 |   title,
47 |   date,
48 |   scastieId,
49 |   mainInfoBox,
50 |   detailedInfoBox,
51 |   description,
52 |   prevUrl,
53 |   nextUrl
54 | }
55 | 
56 | export default function Page() {
57 |   return <Skb lesson={pageData} />
58 | }
59 | 


--------------------------------------------------------------------------------
/pages/scala/map-for-list.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "map-for-list"
 5 | export const title = "Scala Map for List"
 6 | 
 7 | export const date = "2020-07-29T17:00:13"
 8 | 
 9 | const scastieId = "LxP34WAsQyq5gV62cPatkg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Ready for our first dive into Functional Programming? Don't worry, we are going through this adventure together and I will make sure you don't get lost.</p>
13 |   <p>This is the moment where you might hear about Monad, Monoid, Functors, but we are not doing any of that today. Today we are just learning about a function from the standard library called <code>map</code>. We can put fancy names on it later.</p>
14 | 
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>You might have understood that <code>map</code> is actually just like a <code>for each</code> from other languages.</p><p>If you don't know about it from other language, not to worry.</p>
19 | 
20 |   <p><code>map</code> will just apply a function to each element of the list and return the list with the new values.</p>
21 | 
22 |   <p>If you have a list of type <code>A</code> and you apply a function that transforms a type <code>A</code> to a type <code>B</code> then you will have an output being a list of type <code>B</code>.
23 | 
24 |   </p><p>That's it ! You did well for a first dive into Functional Programming. In upcoming SKBs we will go deeper into this aspect of Scala.</p>
25 | </>
26 | 
27 | const description = "Scala Knowledge Bits - Scala Map for List - Periodic exercise to learn bits of knowledge about Scala. Scala Map for List here."
28 | 
29 | const prevUrl = "val-lazy-def"
30 | const nextUrl = "class-new"
31 | 
32 | export const pageData = {
33 |   id,
34 |   title,
35 |   date,
36 |   scastieId,
37 |   mainInfoBox,
38 |   detailedInfoBox,
39 |   description,
40 |   prevUrl,
41 |   nextUrl
42 | }
43 | 
44 | export default function Page() {
45 |   return <Skb lesson={pageData} />
46 | }
47 | 


--------------------------------------------------------------------------------
/pages/scala/method-with-arguments.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "method-with-arguments"
 5 | export const title = "Scala Method with Arguments"
 6 | 
 7 | export const date = "2020-07-20T17:00:01"
 8 | 
 9 | const scastieId = "ZDXmAr6wQ4OTcBSHfJCFmw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>In programming language, a method does some operations and return a result.</p>
13 |   <p>In most use cases, the method will take parameters to perform the operation.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>You have learned that <code>a</code> and <code>b</code> are parameters of the method <code>add</code>. You can use them as normal values but only within the method. You can extend the context to several lines with <code>&#123;...&#125;</code>.</p><p>
18 |     In some other programming language, like Java, you need the keyword <code>return</code> to make the method return a value but in Scala, the last line of the method is what is being returned automatically.</p>
19 | </>
20 | 
21 | const description = "Scala Knowledge Bits - Scala Method with Arguments- Periodic exercise to learn bits of knowledge about Scala. Scala Method with Arguments here."
22 | 
23 | const prevUrl = "methods"
24 | const nextUrl = "list-sum-method"
25 | 
26 | export const pageData = {
27 |   id,
28 |   title,
29 |   date,
30 |   scastieId,
31 |   mainInfoBox,
32 |   detailedInfoBox,
33 |   description,
34 |   prevUrl,
35 |   nextUrl
36 | }
37 | 
38 | export default function Page() {
39 |   return <Skb lesson={pageData} />
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/scala/methods.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "methods"
 5 | export const title = "Scala Methods"
 6 | 
 7 | export const date = "2020-07-17T17:00:40"
 8 | 
 9 | const scastieId = "4FCkgVNaT7ucVCga5w5qIA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>A method in programming language is a bit of code that get executed when called and return a value.</p>
13 |   <p>In Scala, the boundary between Values and Methods is very thin and we are going to learn more about all of it as we go into more complex Scala Knowledge Bits.</p><p>But, if things goes as planned, today should be simple.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>I hope you had fun with today's Scala Knowledge Bit ! </p>
18 |   <p>One main thing to note, if the method do not take arguments, you do not need the <code>(...)</code>, the parentheses are optional.</p>
19 |   <p>In practice, you have to be careful when calling the method. Be sure to use parentheses when it was defined with them. And don't use the parentheses when the method was defined without them.</p>
20 | </>
21 | 
22 | const description = "Scala Knowledge Bits - Scala Methods - Periodic exercise to learn bits of knowledge about Scala. Scala Methods here."
23 | 
24 | const prevUrl = "string-interpolation"
25 | const nextUrl = "method-with-arguments"
26 | 
27 | export const pageData = {
28 |   id,
29 |   title,
30 |   date,
31 |   scastieId,
32 |   mainInfoBox,
33 |   detailedInfoBox,
34 |   description,
35 |   prevUrl,
36 |   nextUrl
37 | }
38 | 
39 | export default function Page() {
40 |   return <Skb lesson={pageData} />
41 | }
42 | 


--------------------------------------------------------------------------------
/pages/scala/monad.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import Skb from 'components/skb-page'
 4 | 
 5 | export const id = "monad"
 6 | export const title = "Scala Monad"
 7 | 
 8 | export const date = "2021-01-18T17:00:24"
 9 | 
10 | const scastieId = "SCUWq9JcRpComfewCgTSFA"
11 | 
12 | const mainInfoBox = <>
13 |   <p>We have done a lot in those last months !</p>
14 | 
15 | <p>Today is the day <i>Monad</i> stops being scary.</p>
16 | </>
17 | 
18 | const detailedInfoBox = <>
19 |   <p>
20 | We already learned about <i>Functor</i>, <i>Foldable</i>, <i>Applicative</i>, and <i>Traversable</i>.
21 | </p>
22 | 
23 | <p>
24 | We have almost encountered all the beast of Category Theory at this point. Today we are going to tackle <i>Monad</i>.
25 | </p>
26 | 
27 | <p>
28 | As you can see, it is simply a <i>Functor</i> and <i>Applicative</i>, with one extra feature: <code>flatten</code>. Which allows us to define the world famous <code>flatMap</code>. As you can see in the definition, <code>flatMap</code> is simply <code>map</code> followed by <code>flatten</code>.
29 | </p>
30 | 
31 | <p>
32 | When you look at the implementation, we only need a few concept defined: 
33 | </p>
34 | 
35 | <ul>
36 | 
37 | <li><code>map</code>: which describe how to apply a transformation to the inner type <code>A</code> of the wrapper <code>F</code>.</li>
38 | <li><code>pure</code>: which describe how to wrap a <code>A</code> into a  <code>F[A]</code> </li>
39 | <li><code>flatten</code>: which describe how to compact <code>F[F[A]]</code> in to <code>F[A]</code></li>
40 | 
41 | </ul>
42 | 
43 | <p>
44 | Those concepts are all that needed to enable complex behavior like <code>filter</code> or <code>flatMap</code>.
45 | </p>
46 | 
47 | <p>
48 | I also wanted to show off what we learned in the last episode about <code>TypeClasses</code> with the <code>implicit object</code> and the <code>implicit class</code> which allow us to give a shortcut for the function we want to use often. 
49 | </p>
50 | 
51 | <p>
52 | As always, if you have any questions, reach out on Discord !
53 | </p>
54 | </>
55 | 
56 | const description = "Scala Knowledge Bits - Scala Monad - Periodic exercise to learn bits of knowledge about Scala. Scala Monad here."
57 | 
58 | const prevUrl = "typeclass"
59 | const nextUrl = null
60 | 
61 | export const pageData = {
62 |   id,
63 |   title,
64 |   date,
65 |   scastieId,
66 |   mainInfoBox,
67 |   detailedInfoBox,
68 |   description,
69 |   prevUrl,
70 |   nextUrl
71 | }
72 | 
73 | export default function Page() {
74 |   return <Skb lesson={pageData} />
75 | }
76 |  
77 | 


--------------------------------------------------------------------------------
/pages/scala/objects.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "objects"
 5 | export const title = "Scala objects"
 6 | 
 7 | export const date = "2020-08-12T17:03:24"
 8 | 
 9 | const scastieId = "ZElvNkmkQ02Qr8sY4isiKA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>After seeing about <code>class</code> and <code>case class</code>, we are going to learn about <code>object</code>.</p>
13 |   <p>I know, it is confusing, because we learned that an <code>object</code> is what we create when we instantiate a <code>class</code>, but this term can also be used to talk about a <code>class</code> that do not need to be instantiated. I know, confusing…</p>
14 |   <p>To make it clearer, let's just focus on those <code>object</code>. If you know other programming languages, you might have heard of <code>static</code>, it means that the <code>field</code> and <code>method</code> can be accessed without instantiating the <code>class</code>. Let's talk about it more in the section after the exercise.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>Did you notice how the <code>field</code> and <code>method</code> are being accessed ?</p>
19 |   <p>You use the name of the <code>object</code>, for instance: <code>Configuration</code>.To access <code>KeyNumberOfFoos</code> that is defined inside of <code>Configuration</code>, you just have to do: <code>Configuration.KeyNumberOfFoos</code>. No need for  <code>new</code> or anything special, you can just call the <code>member</code> of the <code>Object</code> directly.</p>
20 |   <p><code>Object</code> are most commonly used when you want to defined constants values that are common for several systems or <code>classes</code>, like the <code>Configuration</code> one we have here. <code>Object</code> are also used to stored “<i>utility methods</i>” or also called “<i>helper methods</i>“. </p>
21 | 
22 |   <p>This <i>helper methods</i> are common tools for several systems that do not have dependencies defined at runtime. That means that you can define the behavior of this <code>method</code> only based on the input parameters, no need to know any more parameters. For instance, a method to sum two numbers <code>a + b</code>, you do not need to know more than the two inputs: <code>a</code> and <code>b</code>. They are self contained systems and can often be reused from one project to another as a library.</p>
23 | 
24 | </>
25 | 
26 | const description = "Scala Knowledge Bits - Scala objects - Periodic exercise to learn bits of knowledge about Scala. Scala objects here."
27 | 
28 | const prevUrl = "case-class"
29 | const nextUrl = "visibility"
30 | 
31 | export const pageData = {
32 |   id,
33 |   title,
34 |   date,
35 |   scastieId,
36 |   mainInfoBox,
37 |   detailedInfoBox,
38 |   description,
39 |   prevUrl,
40 |   nextUrl
41 | }
42 | 
43 | export default function Page() {
44 |   return <Skb lesson={pageData} />
45 | }
46 | 


--------------------------------------------------------------------------------
/pages/scala/operators.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "operators"
 5 | export const title = "Scala operators"
 6 | 
 7 | export const date = "2020-12-28T17:00:23"
 8 | 
 9 | const scastieId = "avof8zq6RUi0cVKCxnKY7Q"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Have you ever wondered how <code>!</code> and <code>+</code> operator works ?
14 |   </p>
15 |   <p>
16 |     Let's make your own !
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     Long exercise but I wanted to make sure to see several examples to get a good knowledge about Operators for you !
23 |   </p>
24 | 
25 |   <p>
26 |     The first section (<code>&#123;...&#125;</code>) is about traditional, easy operator such as <code>+</code> and <code>*</code>. In Scala, you can use pretty much any characters to create a method name so it is not too hard at this point. Sorry for the math about complex numbers !
27 |   </p>
28 | 
29 |   <p>
30 |     Next we see weirder ones with backslash <code>\</code> and one famous one, the combine operator : <code>|+|</code>, present in many libraries such as <i>Cats</i>.
31 |   </p>
32 | 
33 |   <p>
34 |     And finally even weirder ones. Operator that goes <i>before</i> the caller ! Those are called <code>unary</code> and the syntax is :
35 |   </p>
36 | 
37 |   <pre>
38 |     <p>class MyClass(...) &#123;</p>
39 |     <p>  // ... other fields and methods ...</p>
40 |     <p>  def unary_[prefix_name] = ???</p>
41 |     <p>  // ... more things ...</p>
42 |     <p>&#125;</p>
43 | 
44 |     <p>val a : MyClass = ???</p>
45 | 
46 |     <p>[prefix_name] a</p>
47 |   </pre>
48 | 
49 |   <p>
50 |     It is worth noting that only a selected list of characters and names are authorized for <code>unary</code> methods. For example, <code>+</code>, <code>*</code>, <code>~</code>, and <code>!</code> are allowed. You can find a lot of example of people using <code>unary</code> on <a href="https://github.com/search?l=Scala&amp;q=%22def+unary%22&amp;type=Code" target="_blank">GitHub</a>.
51 |   </p>
52 | </>
53 | 
54 | const description = "Scala Knowledge Bits - Scala operators - Periodic exercise to learn bits of knowledge about Scala. Scala operators here."
55 | 
56 | const prevUrl = "list-of-option-flatten"
57 | const nextUrl = "literal-identifiers"
58 | 
59 | export const pageData = {
60 |   id,
61 |   title,
62 |   date,
63 |   scastieId,
64 |   mainInfoBox,
65 |   detailedInfoBox,
66 |   description,
67 |   prevUrl,
68 |   nextUrl
69 | }
70 | 
71 | export default function Page() {
72 |   return <Skb lesson={pageData} />
73 | }
74 | 


--------------------------------------------------------------------------------
/pages/scala/option-map.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "option-map"
 5 | export const title = "Scala Option map"
 6 | 
 7 | export const date = "2020-08-21T17:00:44"
 8 | 
 9 | const scastieId = "xWLsuNGXQ7uVnaUE35AyAA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>If you followed along, you might remember <code>map</code> from the <code>List</code>. In Scala, and in functional programming, you are going to hear about <code>map</code> a whole bunch.</p>
13 | 
14 |   <p><code>map</code> comes from the functional programming world, and from category theory in mathematics. We are going to dive deeper into those two concepts in the future but for now let's focus only on the <code>map</code> method.</p>
15 | 
16 |   <p>Just to throw it out there, but don't get hang on it too much, <code>map</code> is part of what is called a <code>functor</code>.</p>
17 | 
18 |   <p>Can you feel that the “m” word is going to show up soon ? Should we pop the bubble now ?</p>
19 |   <p>Let's rip off the bandage, right now. <strong>MONAD</strong> !</p>
20 | 
21 |   <p>That's it, we said it. There is no turning back now. Good luck !</p>
22 | </>
23 | 
24 | const detailedInfoBox = <>
25 |   <p>
26 |     Have you recovered from the m-encounter ? Using the <code>map</code> wasn't too bad, was it? And you used it before with the <code>List</code>.
27 |   </p>
28 | 
29 |   <p>
30 |     There are few things to try to modify in this exercise. Go ahead and try those:
31 |   </p><ul>
32 |     <li>What happen when <code>input</code> is set to <code>None</code>?</li>
33 | 
34 |     <li>What happen if you replace <code>getOrElse</code> by <code>get</code> ? with <code>Some</code> and with <code>None</code>.</li>
35 | 
36 |     <li>
37 |       You might have written something like <code>.map(a =&gt; a + 1)</code> in your solution, try replacing <code>a =&gt; a</code> by <code>_</code>. This is some teasing for some upcoming SKB.
38 |     </li>
39 | 
40 |   </ul>
41 |   <p></p>
42 | </>
43 | 
44 | const description = "Scala Knowledge Bits - Scala Option map - Periodic exercise to learn bits of knowledge about Scala. Scala Option map here."
45 | 
46 | const prevUrl = "apply"
47 | const nextUrl = "list-flatten"
48 | 
49 | export const pageData = {
50 |   id,
51 |   title,
52 |   date,
53 |   scastieId,
54 |   mainInfoBox,
55 |   detailedInfoBox,
56 |   description,
57 |   prevUrl,
58 |   nextUrl
59 | }
60 | 
61 | export default function Page() {
62 |   return <Skb lesson={pageData} />
63 | }
64 | 


--------------------------------------------------------------------------------
/pages/scala/option-pattern-matching.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "option-pattern-matching"
 5 | export const title = "Scala Option pattern matching"
 6 | 
 7 | export const date = "2020-12-21T17:02:35"
 8 | 
 9 | const scastieId = "NE1Z1gdMQwO5ppOJOICodg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Easy one today.</p>
13 |   <p>We are going to see how the concepts of <code>unapply</code>, <i>pattern matching</i> and <code>Option</code> work together.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>
18 |     Under the hood <code>Option</code> is a <i>sealed trait</i> that we saw before. It has two implementations: <code>Some</code> and <code>None</code>.
19 |   </p>
20 | 
21 |   <p>
22 |     The <code>Some</code> has an <code>unapply</code> method that let you extract the value out. You can see it being used in <code>case Some(n) =&gt;</code>. The <code>None</code> do not since it defines the case when the <code>Option</code> is empty.
23 |   </p>
24 | 
25 |   <p>
26 |     On the <i>pattern matching</i> sides of things, because it is a <i>sealed trait</i>, the compiler knows how many possible cases there are: 2. If you remove the <code>Some</code> case or the <code>None</code> one, the compiler will give you a warning related to the completeness of the match cases.
27 |   </p>
28 | </>
29 | 
30 | const description = "Scala Knowledge Bits - Scala Option pattern matching - Periodic exercise to learn bits of knowledge about Scala. Scala Option pattern matching here."
31 | 
32 | const prevUrl = "self-referred-type"
33 | const nextUrl = "list-pattern-matching"
34 | 
35 | export const pageData = {
36 |   id,
37 |   title,
38 |   date,
39 |   scastieId,
40 |   mainInfoBox,
41 |   detailedInfoBox,
42 |   description,
43 |   prevUrl,
44 |   nextUrl
45 | }
46 | 
47 | export default function Page() {
48 |   return <Skb lesson={pageData} />
49 | }
50 | 


--------------------------------------------------------------------------------
/pages/scala/option.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "option"
 5 | export const title = "Scala Option"
 6 | 
 7 | export const date = "2020-07-24T17:02:54"
 8 | 
 9 | const scastieId = "fzBPg5UiSwydGL2dSWKx3A"
10 | 
11 | const mainInfoBox = <>
12 |   <p><code>Option</code> is the way in Scala to handle <code>null</code>.
13 |   </p>
14 |   <p>It allows to encapsulate the concept of “<i>is this value defined</i>” or “<i>does this variable contains a value</i>“.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>You might have guessed it on your own but the <code>isDefined</code> method will return <code>true</code> when the <code>Option</code> contains a value, and <code>isEmpty</code> returns <code>true</code> when the <code>Option</code> contains nothing.</p>
19 |   <p>We are going to learn, in later SKB, about<code>pattern matching</code> and <code>map</code>. It will allow us to modify the value contained in the <code>Option</code>.</p>
20 | </>
21 | 
22 | const description = "Scala Knowledge Bits - Scala Option - Periodic exercise to learn bits of knowledge about Scala. Scala Option here."
23 | 
24 | const prevUrl = "list-sum-method"
25 | const nextUrl = "val-lazy-def"
26 | 
27 | export const pageData = {
28 |   id,
29 |   title,
30 |   date,
31 |   scastieId,
32 |   mainInfoBox,
33 |   detailedInfoBox,
34 |   description,
35 |   prevUrl,
36 |   nextUrl
37 | }
38 | 
39 | export default function Page() {
40 |   return <Skb lesson={pageData} />
41 | }
42 | 


--------------------------------------------------------------------------------
/pages/scala/pattern-matching-at.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "pattern-matching-at"
 5 | export const title = "Scala pattern matching @"
 6 | 
 7 | export const date = "2020-11-06T17:00:49"
 8 | 
 9 | const scastieId = "k1cFwuZdQheviSdQGDDzMw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     A little more about <i>pattern matching</i> !
14 |   </p>
15 | 
16 |   <p>And we are going to learn about a new operator: <code>@</code> !
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     The operator <code>@</code> allows you to capture the full entity the pattern matching has matched on.
23 |   </p>
24 |   <p>It is convenient in numerous use case but here is a few examples.
25 |   </p>
26 |   <pre>case a @ "something" =&gt; // something with a
27 |   </pre>
28 | 
29 |   <p>
30 |     It is also very convenient in cases with <code>Option</code>:
31 |   </p>
32 |   <pre>
33 |     <p>opt match &#123;</p>
34 |     <p>  case s @ Some("abc") =&gt; s</p>
35 |     <p>  case _ =&gt; Some(default)</p>
36 |     <p>&#125;</p>
37 |   </pre>
38 | 
39 |   <p>
40 |     Without it you would have to recreate a new object instead of reusing the one we already have.
41 |   </p>
42 | </>
43 | 
44 | const description = "Scala Knowledge Bits - pattern matching '@' - Periodic exercise to learn bits of knowledge about Scala. pattern matching '@' here."
45 | 
46 | const prevUrl = "infix-notation"
47 | const nextUrl = "pattern-matching-or"
48 | 
49 | export const pageData = {
50 |   id,
51 |   title,
52 |   date,
53 |   scastieId,
54 |   mainInfoBox,
55 |   detailedInfoBox,
56 |   description,
57 |   prevUrl,
58 |   nextUrl
59 | }
60 | 
61 | export default function Page() {
62 |   return <Skb lesson={pageData} />
63 | }
64 | 


--------------------------------------------------------------------------------
/pages/scala/pattern-matching-for-case-class.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "pattern-matching-for-case-class"
 5 | export const title = "Scala pattern matching for case class"
 6 | 
 7 | export const date = "2020-11-11T17:01:22"
 8 | 
 9 | const scastieId = "DSKkBRgZT0unMgVeiG76XQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>We learned about pattern matching in the past and there were a lot of “<i>we will learn about this later</i>“.</p>
13 | 
14 |   <p>
15 |     Some of the <i>later</i> is today !
16 |   </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     One of the big advantage of <code>case class</code> over <code>class</code> is the built-in support for pattern matching. We are going to see the same advantage with <code>case object</code> in a later SKB.
22 |   </p>
23 | 
24 |   <p>
25 |     Coming back to <code>case class</code>. You can perform several test using pattern matching:
26 |   </p><p>
27 | 
28 |   </p><ul>
29 | 
30 |     <li>Extraction of field: <code>case Person(firstName, lastName) =&gt; ???</code></li>
31 | 
32 |     <li>Extraction of field with condition: <code>case Person(firstName, lastName) if firstName.startsWith("L") =&gt; ???</code></li>
33 | 
34 |     <li>Filter with exact match: <code>case Person("Leo", lastName) =&gt; ???</code></li>
35 | 
36 |     <li>Filter with exact match and handle on case class: <code>case p @ Person("Leo", lastName) =&gt; ???</code></li>
37 | 
38 |     <li>Several filters: <code>case p @ (Person("a", _) | Person(_, "b")) =&gt; ???</code></li>
39 | 
40 |   </ul>
41 | 
42 | </>
43 | 
44 | const description = "Scala Knowledge Bits - Scala pattern matching for case class - Periodic exercise to learn bits of knowledge about Scala. Scala pattern matching for case class here."
45 | 
46 | const prevUrl = "pattern-matching-or"
47 | const nextUrl = "upper-constraint"
48 | 
49 | export const pageData = {
50 |   id,
51 |   title,
52 |   date,
53 |   scastieId,
54 |   mainInfoBox,
55 |   detailedInfoBox,
56 |   description,
57 |   prevUrl,
58 |   nextUrl
59 | }
60 | 
61 | export default function Page() {
62 |   return <Skb lesson={pageData} />
63 | }
64 | 


--------------------------------------------------------------------------------
/pages/scala/pattern-matching-or.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "pattern-matching-or"
 5 | export const title = "Scala pattern matching OR"
 6 | 
 7 | export const date = "2020-11-09T17:00:54"
 8 | 
 9 | const scastieId = "WYfULSwhS12quZ5H6BIkBA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Let's continue the pattern matching exploration.</p>
13 | 
14 |   <p>
15 |     How would you match several conditions at once ? We are going to learn this today.
16 |   </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     Once you know the syntax, it is pretty straight forward, you have to use the symbol <code>|</code>. Like the boolean operator <code>OR</code>: <code>||</code>.
22 |   </p>
23 | 
24 |   <p>The syntax is:</p>
25 |   <pre>case valueName @ ( enum1 | enum2 | enum3 ) =&gt; ...
26 |   </pre>
27 | 
28 |   <p>You can also do the same thing without the <code>@</code>:
29 |   </p>
30 | 
31 |   <pre>case ( enum1 | enum2 | enum3 ) =&gt; ...
32 |   </pre>
33 | 
34 |   <p>
35 |     And you can do the same thing with <code>case class</code>:
36 |   </p>
37 | 
38 |   <pre>case valueName @ ( CaseClass(_, exactMatch) | CaseClass(match2, _) ) =&gt; ...
39 |   </pre>
40 | 
41 |   <p>
42 |     Next time, we are going to dive more into the <code>case class</code> use case.</p>
43 | </>
44 | 
45 | const description = "Scala Knowledge Bits - Scala pattern matching OR - Periodic exercise to learn bits of knowledge about Scala. Scala pattern matching OR here."
46 | 
47 | const prevUrl = "pattern-matching-at"
48 | const nextUrl = "pattern-matching-for-case-class"
49 | 
50 | export const pageData = {
51 |   id,
52 |   title,
53 |   date,
54 |   scastieId,
55 |   mainInfoBox,
56 |   detailedInfoBox,
57 |   description,
58 |   prevUrl,
59 |   nextUrl
60 | }
61 | 
62 | export default function Page() {
63 |   return <Skb lesson={pageData} />
64 | }
65 | 


--------------------------------------------------------------------------------
/pages/scala/range.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "range"
 5 | export const title = "Scala Range"
 6 | 
 7 | export const date = "2020-09-09T17:06:05"
 8 | 
 9 | const scastieId = "kTjI5evhSLyRQBtPRckawA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>I can't believe we haven't seen <code>Range</code> yet !</p>
13 | </>
14 | 
15 | const detailedInfoBox = <>
16 |   <p>Super easy ! Right ? And so useful and powerful.</p>
17 | 
18 |   <p>Summary of the keywords:</p><p>
19 | 
20 |   </p><ul>
21 | 
22 |     <li><code>to</code>: When you do <code>0 to 3</code>, you will get the numbers <code>0, 1, 2, 3</code>. Notice that the end boundary <strong>is included</strong>.</li>
23 | 
24 |     <li><code>until</code>: When you do <code>0 until 3</code>, you will get the numbers <code>0, 1, 2</code>. Notice that the end boundary <strong>is not included</strong>.</li>
25 | 
26 |     <li><code>by</code>: When you do <code>0 to 11 by 3</code>, you will get the numbers <code>0, 3, 6, 9</code>. The default value is <code>by 1</code>.</li>
27 | 
28 |   </ul>
29 | 
30 | </>
31 | 
32 | const description = "Scala Knowledge Bits - Scala Range - Periodic exercise to learn bits of knowledge about Scala. Scala Range here."
33 | 
34 | const prevUrl = "try"
35 | const nextUrl = "list-parallel"
36 | 
37 | export const pageData = {
38 |   id,
39 |   title,
40 |   date,
41 |   scastieId,
42 |   mainInfoBox,
43 |   detailedInfoBox,
44 |   description,
45 |   prevUrl,
46 |   nextUrl
47 | }
48 | 
49 | export default function Page() {
50 |   return <Skb lesson={pageData} />
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/scala/recursion.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "recursion"
 5 | export const title = "Scala Recursion"
 6 | 
 7 | export const date = "2020-10-19T17:00:47"
 8 | 
 9 | const scastieId = "rkgxG7yiSxqHjJAhhKRfqg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     <i>Recursion</i> is a major tool in the toolbox of the software engineer.
14 |   </p>
15 |   <p>
16 |     It can allow to describe a problem from a different perspective.
17 |   </p>
18 |   <p>
19 |     In the context of <i>Functional Programming</i> this is also a major trick to avoid using <i>mutable</i> variables.
20 |   </p>
21 | </>
22 | 
23 | const detailedInfoBox = <>
24 |   <p>
25 |     This is a very basic example to be able to understand the concept of recursion fully. In the future, we will see more complex application of <i>recursion</i>.
26 |   </p>
27 | 
28 |   <p>
29 |     To build a successful recursion, you need several things:
30 | 
31 |   </p><ul>
32 | 
33 |     <li>
34 |       Stopping condition: this is the most important thing. Without it the recursion will keep going for ever and eventually fail with an exception: <code>StackOverflowError</code>.
35 |     </li>
36 | 
37 |     <li>
38 |       The method needs to call itself. In this example, you can see the <code>loop</code> function is called inside of itself.
39 |     </li>
40 | 
41 |     <li>
42 |       Increment: something needs to change when calling the function again, otherwise, same as without a stopping condition, the code will never stop running since the stopping condition will never get reached. In this example you can see that when <code>loop</code> is called, it is called with modified arguments.
43 |     </li>
44 | 
45 |     <li>
46 |       Most of the time you will have some kind of accumulator that hold the final result of the computation. In our example, this would be the argument named <code>acc</code>.
47 |     </li>
48 | 
49 |     <li>
50 |       Initial condition: we also need a starting value for the accumulator and the other arguments that might be required to perform the computation. In this example, we need to set <code>acc</code> equals to <code>0</code>.
51 |     </li>
52 | 
53 |   </ul>
54 | 
55 |   <p></p>
56 | 
57 |   <p>
58 |     The most famous example of recursion in books are always <code>factorial</code> or <code>Fibonacci</code>. I would love to see your implementation, feel free to submit a Scastie link in the comment section or on Discord.
59 |   </p>
60 | </>
61 | 
62 | const description = "Scala Knowledge Bits - Scala Recursion - Periodic exercise to learn bits of knowledge about Scala. Scala Recursion here."
63 | 
64 | const prevUrl = "abstract-class"
65 | const nextUrl = "repeated-parameters"
66 | 
67 | export const pageData = {
68 |   id,
69 |   title,
70 |   date,
71 |   scastieId,
72 |   mainInfoBox,
73 |   detailedInfoBox,
74 |   description,
75 |   prevUrl,
76 |   nextUrl
77 | }
78 | 
79 | export default function Page() {
80 |   return <Skb lesson={pageData} />
81 | }
82 | 


--------------------------------------------------------------------------------
/pages/scala/regex.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "regex"
 5 | export const title = "Scala Regex"
 6 | 
 7 | export const date = "2020-10-02T17:00:02"
 8 | 
 9 | const scastieId = "ofpEC7pYQ6OaAYH4OQfzsQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>This SKB is about Regex, which stand for Regular Expression.</p>
13 |   <p>I will not explain the details about Regex in this article but feel free to look at those resources to learn more about it:
14 |   </p><ul>
15 |     <li>To learn: <a href="https://github.com/ziishaned/learn-regex" target="_blank">github.com/ziishaned/learn-regex</a></li>
16 |     <li>To learn and practice: <a href="https://regexone.com/" target="_blank">Regex One</a></li>
17 |     <li>To practice: <a href="https://regexcrossword.com/" target="_blank">Regex Crossword</a></li>
18 |   </ul>
19 |   <p></p>
20 | 
21 | </>
22 | 
23 | const detailedInfoBox = <>
24 |   <p>
25 |     The first example is a simple case to check for a match. However the compilation of the regex into an actionable test can be costly. It is recommended to compile the regex once before using it several times. This is when the second example come into play.
26 |   </p>
27 | 
28 |   <p>
29 |     The second example is more complex and involved. We describe a structure to hold the regex and build a case class from it. We can then build shortcut methods to make the interaction with the regex more intuitive.
30 |   </p>
31 | 
32 |   <p>
33 |     The third example is leveraging pattern matching. You can see each group match in the regex <code>( ... )</code> is corresponding to a value in the pattern matching.
34 |   </p>
35 | 
36 | </>
37 | 
38 | const description = "Scala Knowledge Bits - Scala Regex - Periodic exercise to learn bits of knowledge about Scala. Scala Regex here."
39 | 
40 | const prevUrl = "implicit-class"
41 | const nextUrl = "implicit-val"
42 | 
43 | export const pageData = {
44 |   id,
45 |   title,
46 |   date,
47 |   scastieId,
48 |   mainInfoBox,
49 |   detailedInfoBox,
50 |   description,
51 |   prevUrl,
52 |   nextUrl
53 | }
54 | 
55 | export default function Page() {
56 |   return <Skb lesson={pageData} />
57 | }
58 | 


--------------------------------------------------------------------------------
/pages/scala/repeated-parameters.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "repeated-parameters"
 5 | export const title = "Scala Repeated Parameters"
 6 | 
 7 | export const date = "2020-10-21T17:02:40"
 8 | 
 9 | const scastieId = "gdXHGu2KRUC3yVkBl2FhiQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Little break in <i>Object Oriented Programming</i> and <i>Functional Programming</i> features.
14 |   </p>
15 |   <p>
16 |     Today is about a little “nice to know”.
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     You probably understood that this allow you to take an array as input without having to actually create an array when calling the function.</p>
23 | 
24 |   <p>
25 |     It can be very useful with nested case class with list of list. It makes the code more readable.
26 | 
27 |   </p><pre>
28 |     <p>case class Foo(f: Foo*)</p>
29 | 
30 |     <p>Foo(</p>
31 |     <p>  Foo(</p>
32 |     <p>    Foo(),</p>
33 |     <p>    Foo()</p>
34 |     <p>  ),</p>
35 |     <p>  Foo()</p>
36 |     <p>)</p>
37 |   </pre>
38 | 
39 |   Imagine this code with having to create <code>List(Foo())</code> each time, it would make the code really hard to digest.
40 |   <p></p>
41 | 
42 |   <p>
43 |     But, like everything in life, there is a drawback… If you already have an array, you need to use the weird <code>:_*</code>. It is a minor issue, with experience, you are going to know those few characters by heart. It basically turns a list of item into a series of arguments.
44 |   </p>
45 | 
46 | </>
47 | 
48 | const description = "Scala Knowledge Bits - Scala Repeated Parameters - Periodic exercise to learn bits of knowledge about Scala. Scala Repeated Parameters here."
49 | 
50 | const prevUrl = "recursion"
51 | const nextUrl = "generic-trait"
52 | 
53 | export const pageData = {
54 |   id,
55 |   title,
56 |   date,
57 |   scastieId,
58 |   mainInfoBox,
59 |   detailedInfoBox,
60 |   description,
61 |   prevUrl,
62 |   nextUrl
63 | }
64 | 
65 | export default function Page() {
66 |   return <Skb lesson={pageData} />
67 | }
68 | 


--------------------------------------------------------------------------------
/pages/scala/sealed.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "sealed"
 5 | export const title = "Scala Sealed"
 6 | 
 7 | export const date = "2020-10-26T17:02:35"
 8 | 
 9 | const scastieId = "8rWrWX9yQym4w1LxJm56lA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>A simple new keyword today</p>
13 | 
14 |   <p>It is not possible to illustrate its main function using Scastie, so if you would like to learn more you will have to read the description snippet below. I am sorry about that.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>We are reusing a lot of feature we saw in the past for this SKB. Everything should look familiar except the new keyword <code>sealed</code></p>
19 | 
20 |   <p>
21 |     <code>sealed</code> is related to Object Oriented Programming and more specifically about inheritance.
22 |   </p>
23 | 
24 |   <p>
25 |     The keyword <code>sealed</code> allows you to block inheritance if it is not within the same file. If you define a <code>sealed</code> <code>trait</code> or <code>abstract class</code> ( it works for both the exact same way ), you will only be able to <code>extends</code> this <code>trait</code> within this file.
26 |   </p>
27 | 
28 |   <p>This is the reason why it is hard to illustrate it within Scastie since everything is just one worksheet.</p>
29 | 
30 |   <p>It is very useful when you want to describe something which have finite options. We are going to learn more about a very specific use case in the next SKB.</p>
31 | </>
32 | 
33 | const description = "Scala Knowledge Bits - Scala Sealed - Periodic exercise to learn bits of knowledge about Scala. Scala Sealed here."
34 | 
35 | const prevUrl = "generic-trait"
36 | const nextUrl = "case-object"
37 | 
38 | export const pageData = {
39 |   id,
40 |   title,
41 |   date,
42 |   scastieId,
43 |   mainInfoBox,
44 |   detailedInfoBox,
45 |   description,
46 |   prevUrl,
47 |   nextUrl
48 | }
49 | 
50 | export default function Page() {
51 |   return <Skb lesson={pageData} />
52 | }
53 | 


--------------------------------------------------------------------------------
/pages/scala/self-referred-type.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "self-referred-type"
 5 | export const title = "Scala self-referred type"
 6 | 
 7 | export const date = "2020-12-18T17:00:02"
 8 | 
 9 | const scastieId = "wKhJFuWwSw2CE38r1JOT1g"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Let's dive more into generic type and self-referred type.
14 |   </p>
15 |   <p>
16 |     The use case is how to use the children Type in the Parent trait safely.
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     Sorry for the long exercise but I really wanted to show step by step how we end up with this solution based on the problem encountered.
23 |   </p>
24 |   <p>
25 |     In the first example, without doing anything, we are able to change the output type to the child type when we override the method but not the input type.
26 |   </p>
27 |   <p>
28 |     In the second example we now have information about the child type from inside the parent trait but there are not guarantee that <code>A</code> is the right children, it could be any children.
29 |   </p>
30 |   <p>
31 |     With the final solution, <code>A</code> must be in used in the child type which guarantee that it is the child.
32 |   </p>
33 |   <p>
34 |     Let's summaries the syntax:
35 |   </p>
36 |   <pre>
37 |     <p>trait Name[A &lt;: Name[A]]&#123; this: A =&gt;</p>
38 |     <p>&#125;</p>
39 |   </pre>
40 |   <p>
41 |     Hopefully that will help you make the compiler your friend and catch more mistake at compile time rather than at runtime !
42 |   </p>
43 | 
44 | 
45 | </>
46 | 
47 | const description = "Scala Knowledge Bits - Scala self-referred type - Periodic exercise to learn bits of knowledge about Scala. Scala self-referred type here."
48 | 
49 | const prevUrl = "star-parameter"
50 | const nextUrl = "option-pattern-matching"
51 | 
52 | export const pageData = {
53 |   id,
54 |   title,
55 |   date,
56 |   scastieId,
57 |   mainInfoBox,
58 |   detailedInfoBox,
59 |   description,
60 |   prevUrl,
61 |   nextUrl
62 | }
63 | 
64 | export default function Page() {
65 |   return <Skb lesson={pageData} />
66 | }
67 | 


--------------------------------------------------------------------------------
/pages/scala/set.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "set"
 5 | export const title = "Scala Set"
 6 | 
 7 | export const date = "2020-09-16T17:00:06"
 8 | 
 9 | const scastieId = "wVSrVCeWSeytlVjX0YOSIQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     We saw other data structures in previous SKB like <code>List</code> or <code>Map</code>.
14 |   </p>
15 |   <p>
16 |     Let's look at <code>Set</code>.
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     Did you notice that <code>Set</code> cannot contain duplicate values? A <code>Set</code> is a list of unique values.
23 |   </p>
24 |   <p>
25 |     When you combine the two <code>Set</code>, it removes the duplicated values and only keep one of each.
26 |   </p>
27 |   <p>
28 |     One thing to know is that <code>Set</code> do not guarantee consistant ordering. You should not rely on index of the elements. If you want to learn more, you can read <a href="https://stackoverflow.com/a/5246204/3357831" target="_blank">this great answer on Stackoverflow</a>.
29 |   </p>
30 |   <p>
31 |     Last thing about <code>Set</code> is that it has all the same function as <code>List</code> such as <code>map</code>, <code>flatMap</code>, <code>filter</code>, etc…
32 |   </p>
33 | 
34 | 
35 | </>
36 | 
37 | const description = "Scala Knowledge Bits - Scala Set - Periodic exercise to learn bits of knowledge about Scala. Scala Set here."
38 | 
39 | const prevUrl = "main"
40 | const nextUrl = "defined-type"
41 | 
42 | export const pageData = {
43 |   id,
44 |   title,
45 |   date,
46 |   scastieId,
47 |   mainInfoBox,
48 |   detailedInfoBox,
49 |   description,
50 |   prevUrl,
51 |   nextUrl
52 | }
53 | 
54 | export default function Page() {
55 |   return <Skb lesson={pageData} />
56 | }
57 | 


--------------------------------------------------------------------------------
/pages/scala/star-parameter.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "star-parameter"
 5 | export const title = "Scala *-parameter"
 6 | 
 7 | export const date = "2020-12-16T17:00:54"
 8 | 
 9 | const scastieId = "atliFs67TKm6z7r8OSifug"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Let's see how we can pass an array as argument smoothly.
14 |   </p>
15 | 
16 |   <p>
17 |     We are going to see an example when this syntax shine the most: nested Node creation.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     Do you experience the pain of writing <code>Node(List(Node(List(...</code>. Not pleasant huh ?!
24 |   </p>
25 |   <p>
26 |     But never again you will have to do this now that you know about <code>*</code> !
27 |   </p>
28 |   <p>Let's see how it works:</p>
29 |   <p>
30 |     In a function, you can have <code>TYPE*</code> to take all the last parameters given to the function and turn it into an array. If you place the argument of the method with <code>TYPE*</code> <strong>not</strong> as last argument you will get an exception <code>*-parameter must come last</code>.
31 |   </p>
32 |   <p>
33 |     After doing this, instead of doing <code>foo(List(a,b,c))</code> you are able to do <code>foo(a,b,c)</code>. And inside the body of the method you can use the parameter the same as before.
34 |   </p>
35 | 
36 |   <p>
37 |     But now, let's say in some part of your code you do have a <code>List</code> already but you have changed the method, you want to convert the <code>List</code> into a <code>*-parameter</code>.
38 |   </p>
39 |   <p>
40 |     The weird syntax to do this is: <code>foo(list:_*)</code>. It means you are casting (changing the type) , with <code>:</code> into <code>_</code> which is a wildcard, so anything, in this case, the anything being the type <code>A</code> of the list which should be the same as the input type of the method <code>A*</code>, and finally <code>*</code>.
41 |   </p>
42 |   <p>
43 |     If we look at the type only we are doing this:
44 |   </p>
45 |   <pre>list      : _*
46 |     List[A] : A*
47 |   </pre>
48 |   <p>
49 |     If I didn't explain well, please feel free to reach out on the Discord server so we can improve the content of this article together.
50 |   </p>
51 | </>
52 | 
53 | const description = "Scala Knowledge Bits - Scala array as function argument - Periodic exercise to learn bits of knowledge about Scala. Scala array as function argument here."
54 | 
55 | const prevUrl = "val-pattern-matching"
56 | const nextUrl = "self-referred-type"
57 | 
58 | export const pageData = {
59 |   id,
60 |   title,
61 |   date,
62 |   scastieId,
63 |   mainInfoBox,
64 |   detailedInfoBox,
65 |   description,
66 |   prevUrl,
67 |   nextUrl
68 | }
69 | 
70 | export default function Page() {
71 |   return <Skb lesson={pageData} />
72 | }
73 | 


--------------------------------------------------------------------------------
/pages/scala/stream.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "stream"
 5 | export const title = "Scala Stream"
 6 | 
 7 | export const date = "2020-09-25T17:00:35"
 8 | 
 9 | const scastieId = "5lF704InT2mzBKntjzsU9Q"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     An other data structure today ! After seeing <code>List</code>, <code>Set</code>. Let's talk about <code>Stream</code>, now called <code>LazyList</code> in Scala 2.13+.
14 |   </p>
15 | 
16 |   <p>This is a bit of a longer exercise because there are several ways to create a <code>LazyList</code> and several ways to use it. Remember, this is <strong>your</strong> journey. If you only have the time to complete the beginning, you can move on or come back to it later.</p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p>
21 |     In the first section, you saw how to create a <code>LazyList</code> recursively using the symbol <code>#::</code>. You also learned that you can <code>take</code> as many elements as you want, but since Scala values <i>immutability</i>, doing it several times in a row will always returns the same elements. Make sure to read the log statements carefully.
22 |   </p>
23 | 
24 |   <p>
25 |     In the second section, we are using <code>LazyList.from</code> to use the build-in tools that allow you to start a sequential <code>stream</code> starting at <code>n</code> and increasing one by one. You also see that <code>map</code> can be used to modify the outcome of the <code>LazyList</code>. And finally, <code>take</code> can only reduce the size of the stream.
26 |   </p>
27 | 
28 |   <p>
29 |     In the third and final section, we are implementing <code>factorial</code>, once recursively and then using a <code>LazyList</code>. Have you notice the use of the <code>foldLeft</code> from previous SKB !?
30 |   </p>
31 | 
32 | </>
33 | 
34 | const description = "Scala Knowledge Bits - Scala Stream - Periodic exercise to learn bits of knowledge about Scala. Scala Stream here."
35 | 
36 | const prevUrl = "foldleft"
37 | const nextUrl = "for-comprehension"
38 | 
39 | export const pageData = {
40 |   id,
41 |   title,
42 |   date,
43 |   scastieId,
44 |   mainInfoBox,
45 |   detailedInfoBox,
46 |   description,
47 |   prevUrl,
48 |   nextUrl
49 | }
50 | 
51 | export default function Page() {
52 |   return <Skb lesson={pageData} />
53 | }
54 | 


--------------------------------------------------------------------------------
/pages/scala/string-format.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "string-format"
 5 | export const title = "Scala String Format"
 6 | 
 7 | export const date = "2020-10-14T17:01:13"
 8 | 
 9 | const scastieId = "tMiJL0glR3exHoEdGFKZBQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Little break from the heavy stuff !</p>
13 |   <p>Let's see an example on how some <code>Java</code> features have been integrated in Scala. Specially about String formatting at the moment.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>
18 |     This SKB is about formatting numbers.
19 |   </p>
20 |   <p>
21 |     In the first example, we are seeing how to add leading zeros in front of a number. That can be useful when building some UI or dashboard so the alignment is fix no matter how big the number is. Pretty useful and easy to use !
22 |   </p>
23 | 
24 |   <p>
25 |     Then formatting <code>Double</code>, how to truncate the decimals as well as adding leading zeros. Play with it to get a good intuition about it.
26 |   </p>
27 | 
28 |   <p>
29 |     And finally, getting closer to <code>Java</code> with <code>Locale</code> which allow you to display a number the right way based on the location. <code>Locale</code> can also be used to format dates and currencies ! Feel free to search for more information online and try to implement the code in here.
30 |   </p>
31 | </>
32 | 
33 | const description = "Scala Knowledge Bits - Scala String Format - Periodic exercise to learn bits of knowledge about Scala. Scala String Format here."
34 | 
35 | const prevUrl = "either"
36 | const nextUrl = "abstract-class"
37 | 
38 | export const pageData = {
39 |   id,
40 |   title,
41 |   date,
42 |   scastieId,
43 |   mainInfoBox,
44 |   detailedInfoBox,
45 |   description,
46 |   prevUrl,
47 |   nextUrl
48 | }
49 | 
50 | export default function Page() {
51 |   return <Skb lesson={pageData} />
52 | }
53 | 


--------------------------------------------------------------------------------
/pages/scala/string-interpolation.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "string-interpolation"
 5 | export const title = "Scala String Interpolation"
 6 | 
 7 | export const date = "2020-07-15T17:01:28"
 8 | 
 9 | const scastieId = "lwH1J4fdSsWs2JC9b5Hykg"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Scala String Interpolation is how Strings can be constructed in Scala. It will be the way you can add Values inside a String. </p>
13 |   <p>Strings in programming languages are chains of character, for instance: <code>"Hello World"</code>.</p>
14 | </>
15 | 
16 | const detailedInfoBox = <>
17 |   <p>You might have noticed the string is contained between quotes: <code>"..."</code>. </p>
18 |   <p>An other thing to notice is the <code>s</code> preceding the first quote. It is necessary to transform <code>$h</code> into the content of the value <code>h</code>.</p>
19 | </>
20 | 
21 | const description = "Scala Knowledge Bits - Scala String Interpolation - Periodic exercise to learn bits of knowledge about Scala. Scala String Interpolation here."
22 | 
23 | const prevUrl = "values"
24 | const nextUrl = "methods"
25 | 
26 | export const pageData = {
27 |   id,
28 |   title,
29 |   date,
30 |   scastieId,
31 |   mainInfoBox,
32 |   detailedInfoBox,
33 |   description,
34 |   prevUrl,
35 |   nextUrl
36 | }
37 | 
38 | export default function Page() {
39 |   return <Skb lesson={pageData} />
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/scala/thread-sleep.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "thread-sleep"
 5 | export const title = "Scala Thread Sleep"
 6 | 
 7 | export const date = "2020-08-28T17:04:15"
 8 | 
 9 | const scastieId = "BjJXlvkMRtWCqIJ1y1oWrw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     This seem like a simple thing but it will allow us to introduce the idea of <code>Thread</code>, which is a much more complex beast.
14 |   </p>
15 | 
16 |   <p>
17 |     Thank you for <strong>iamkpr</strong> from our Discord channel for suggesting going toward asynchronous computation, threading and <code>Future</code>.
18 |   </p>
19 | </>
20 | 
21 | const detailedInfoBox = <>
22 |   <p>
23 |     A <code>thread</code> is a stream of computation. For instance, you would do:
24 |   </p>
25 | 
26 |   <pre>val c = a + b
27 |     val d = c * 2
28 |   </pre>
29 | 
30 |   <p>Those two operations happen one at a time. There is no way for <code>d</code> to be computed before <code>c</code>, in this situation.</p>
31 | 
32 |   <p>Now imagine that you want, for instance, retrieve some data somewhere from two different places. You could query those sources one at a time but most of the time it would be more efficient and faster to start requesting the data from both places so that we can collect the data from both places at once.</p>
33 | 
34 |   <p>You might have heard of <i>multi-threading</i> maybe in the past. This means that the application is able to do more than one thing in parallel.</p>
35 | 
36 |   <p>This SKB was not treating any of those topics about asynchronous operation and parallelization. However, it gaves you a taste of what it is like to have an operation that takes time. The method <code>Thread.sleep(  )</code> allows you to pause the current <code>thread</code> for a number of milliseconds.</p>
37 | 
38 |   <p>When you work on real life projects, time is a very important factor. And being able to leverage threads to run several things at once is extremely important. But don't panic, we are going to slowly approach the problem, one SKB at a time.</p>
39 | </>
40 | 
41 | const description = "Scala Knowledge Bits - Scala Thread Sleep - Periodic exercise to learn bits of knowledge about Scala. Scala Scala Thread Sleep here."
42 | 
43 | const prevUrl = "tuple"
44 | const nextUrl = "random"
45 | 
46 | export const pageData = {
47 |   id,
48 |   title,
49 |   date,
50 |   scastieId,
51 |   mainInfoBox,
52 |   detailedInfoBox,
53 |   description,
54 |   prevUrl,
55 |   nextUrl
56 | }
57 | 
58 | export default function Page() {
59 |   return <Skb lesson={pageData} />
60 | }
61 | 


--------------------------------------------------------------------------------
/pages/scala/trait.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "trait"
 5 | export const title = "Scala trait"
 6 | 
 7 | export const date = "2020-10-09T17:00:40"
 8 | 
 9 | const scastieId = "wNjtWIW8QXy3E3R5D1tNUA"
10 | 
11 | const mainInfoBox = <>
12 |   <p><code>trait</code> are like <code>interface</code> from other languages.</p>
13 | 
14 |   <p>Have fun with it !</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     <code>trait</code> allows you to describe what a class should look like.
20 |   </p>
21 | 
22 |   <p>
23 |     You can implement functions that can be overridden. You can describe functions that have to be overridden.
24 |   </p>
25 | 
26 |   <p>
27 |     New terms:
28 | 
29 |   </p><ul>
30 | 
31 |     <li><strong>to inherit</strong>: the action of extending a class</li>
32 | 
33 |     <li><strong>Child</strong>: the class that inherit from a trait</li>
34 | 
35 |     <li><strong>Parent</strong>: the class that is inherited from</li>
36 | 
37 |   </ul>
38 |   <p></p>
39 | 
40 |   <p>
41 |     Several new keywords today:
42 |   </p><ul>
43 | 
44 |     <li>
45 |       <code>extends</code>: is the keyword to be able to inherit from a class
46 |     </li>
47 | 
48 |     <li>
49 |       <code>override</code>: tell that this element has been overridden.
50 |     </li>
51 | 
52 |     <li>
53 |       <code>final</code>: tell that this cannot be overridden
54 |     </li>
55 | 
56 |     <li>
57 |       <code>protected</code>: similar to <code>private</code> but allow the child class to see this element. <code>private</code> would not allow the child to see it.
58 |     </li>
59 | 
60 |   </ul>
61 |   <p></p>
62 | </>
63 | 
64 | const description = "Scala Knowledge Bits - Scala trait - Periodic exercise to learn bits of knowledge about Scala. Scala trait here."
65 | 
66 | const prevUrl = "future"
67 | const nextUrl = "either"
68 | 
69 | export const pageData = {
70 |   id,
71 |   title,
72 |   date,
73 |   scastieId,
74 |   mainInfoBox,
75 |   detailedInfoBox,
76 |   description,
77 |   prevUrl,
78 |   nextUrl
79 | }
80 | 
81 | export default function Page() {
82 |   return <Skb lesson={pageData} />
83 | }
84 | 


--------------------------------------------------------------------------------
/pages/scala/traversable.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "traversable"
 5 | export const title = "Scala Traversable"
 6 | 
 7 | export const date = "2021-01-13T17:00:07"
 8 | 
 9 | const scastieId = "3R7qyi15SqGPmU0yqMfvxQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Going a bit further in Functional Programming concepts with <i>Traversable</i></p>
13 | 
14 |   <p>
15 |     We already saw a few concepts so far such as <code>Functor</code> and <code>Applicative</code>.<br />Let's dig deeper !
16 |   </p>
17 | </>
18 | 
19 | const detailedInfoBox = <>
20 |   <p><i>Traversable</i> solves a specific problem. How to apply an operation to many inputs at once without leaving the “Box/Container/F” ?</p>
21 | 
22 |   <p>
23 |     Without <i>Traversable</i>, we would have to perform something like this:
24 |   </p>
25 | 
26 |   <pre>
27 |     <p>val input: List[Int] = List(1,2,3)</p>
28 |     <p>val operation: Int =&gt; F[Int] = ???</p>
29 | 
30 |     <p>val output: List[F[Int]] = input.map( i =&gt; operation(i))</p>
31 |   </pre>
32 | 
33 |   <p>
34 |     But how do we manage to get <code>F[List[A]]</code> instead of <code>List[F[A]]</code> ? Traversable !
35 |   </p>
36 | 
37 |   <p>
38 |     To implement <code>traverse</code> we re-use what we built in the previous episodes: <code>Functor</code> and <code>Applicative</code>. So we can chain the operation and wrap into <code>F</code>.
39 |   </p>
40 | 
41 |   <p>
42 |     With <code>traverse</code> which allows you to apply an operation to many element and stay inside <code>F</code>, we also get for free <code>sequence</code> which allow you to flip <code>List[F[A]]</code> inside out into <code>F[List[A]]</code>. You will see it in <code>Future.sequence</code> for instance that is very convenient to wait or combine many <code>Future</code> together.
43 |   </p>
44 | 
45 |   <p>
46 |     As a note: <code>input.map(f).sequence</code> is the same as <code>input.traverse(f)</code>.
47 |   </p>
48 | </>
49 | 
50 | const description = "Scala Knowledge Bits - Scala Traversable - Periodic exercise to learn bits of knowledge about Scala. Scala Traversable here."
51 | 
52 | const prevUrl = "covariance"
53 | const nextUrl = "typeclass"
54 | 
55 | export const pageData = {
56 |   id,
57 |   title,
58 |   date,
59 |   scastieId,
60 |   mainInfoBox,
61 |   detailedInfoBox,
62 |   description,
63 |   prevUrl,
64 |   nextUrl
65 | }
66 | 
67 | export default function Page() {
68 |   return <Skb lesson={pageData} />
69 | }
70 | 


--------------------------------------------------------------------------------
/pages/scala/try.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import Skb from 'components/skb-page'
 4 | 
 5 | export const id = "try"
 6 | export const title = "Scala Try"
 7 | 
 8 | export const date = "2020-09-07T17:01:03"
 9 | 
10 | const scastieId = "SQcoS39XQ3SvkpwJJkCT7w"
11 | 
12 | const mainInfoBox = <>
13 |   <p>
14 | One thing to know first is the concept of <code>Exception</code>. An <code>Exception</code>, in java and Scala, is when an error happen. It will stop the execution of the program and <code>throw</code> an <code>Exception</code>.
15 | </p>
16 | </>
17 | 
18 | const detailedInfoBox = <>
19 |   <p>
20 | The way to manually trigger an <code>Exception</code> is with <code>throw</code>. The code will then spit out what is called a <i>stack trace</i>. The stack trace will display each line of code that was in the stack of operation when the <code>Exception</code> occurred. It is essential to know how to read those when fixing a bug in a software.
21 | </p>
22 | 
23 | <p>
24 | Sometimes, a code will trigger an unexpected error, not one you decide to trigger. For instance, with bad math or more commonly from a third party library like a database connection. The connection might fail or timeout, etc… And then you need to react from the error. Maybe it is a critical error and you will decide to let the program stop its execution. But sometimes, you might be able to recover, in the case of a database, you could retry until it works, or retries several times until it succeed. 
25 | </p><p>
26 | 
27 | </p><p>
28 | <code>Try</code> is the way to handle <code>Exception</code> in Scala. It allows you to abstract the potential failure and use the same methods that <code>Option</code> has to manipulate the data that might or might not be there. But instead of <code>None</code> when the <code>Option</code> is empty, you get an <code>Exception</code> when it is not defined which would carry more information about the kind of failure that was encountered. Like <code>Option</code> you can use <code>map</code>, <code>flatMap</code>,<code>get</code>, <code>getOrElse</code> and more.
29 | </p>
30 | 
31 | <p>
32 | Go back to the editor and try to make some code using <code>map</code> and <code>flatMap</code> with <code>Try</code>.
33 | </p>
34 | 
35 | <p>You might have noticed the <code>case</code> as well. This is still <i>pattern matching</i>. It is a bit piece of Scala and it is hard to explain, which is why I have been trying to slowly introducing it so when it comes time to dive more into it, you will already have some kind of intuition about it. Patience 🙂</p>
36 | </>
37 | 
38 | const description = "Scala Knowledge Bits - Scala Try - Periodic exercise to learn bits of knowledge about Scala. Scala Try here."
39 | 
40 | const prevUrl = "curry"
41 | const nextUrl = "range"
42 | 
43 | export const pageData = {
44 |   id,
45 |   title,
46 |   date,
47 |   scastieId,
48 |   mainInfoBox,
49 |   detailedInfoBox,
50 |   description,
51 |   prevUrl,
52 |   nextUrl
53 | }
54 | 
55 | export default function Page() {
56 |   return <Skb lesson={pageData} />
57 | }
58 |  
59 | 


--------------------------------------------------------------------------------
/pages/scala/tuple.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "tuple"
 5 | export const title = "Scala Tuple"
 6 | 
 7 | export const date = "2020-08-26T17:02:11"
 8 | 
 9 | const scastieId = "T2FtLvkXR3O8M6P6LCYurQ"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Imagine, for instance, you would like to pair together an identification number (<code>Int</code>) and a name (<code>String</code>).
13 |   </p>
14 |   <p>Let's see how to do that in Scala.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>
19 |     By now, you probably have understood that a Tuple is a way to combine two or more types into one. For instance you can combine a <code>Int</code> and a <code>String</code> into a tuple <code>(Int, String)</code>. You can combine up to 22 Types ! ( You can read more why <a href="https://stackoverflow.com/questions/4152223/why-are-scala-functions-limited-to-22-parameters" target="_blank">on here</a> )
20 |   </p>
21 | 
22 |   <p>The other important aspect is the accessors. For instance, if you have a Tuple <code>(Double, Int, String)</code>, to access the first element you have to use <code>_1</code>, the second with <code>_2</code>, etc…</p>
23 | 
24 |   <p>Tuples are also involved in the concept of <i>pattern matching</i> that we are going to learn more about later.</p>
25 | 
26 |   <p>As a note about good practices: whenever possible, you should use a <code>case class</code> rather than a Tuple. In the long run, it makes things much easier to manage and maintain.</p>
27 | 
28 | 
29 | </>
30 | 
31 | const description = "Scala Knowledge Bits - Scala Tuple - Periodic exercise to learn bits of knowledge about Scala. Scala Tuple here."
32 | 
33 | const prevUrl = "list-flatten"
34 | const nextUrl = "thread-sleep"
35 | 
36 | export const pageData = {
37 |   id,
38 |   title,
39 |   date,
40 |   scastieId,
41 |   mainInfoBox,
42 |   detailedInfoBox,
43 |   description,
44 |   prevUrl,
45 |   nextUrl
46 | }
47 | 
48 | export default function Page() {
49 |   return <Skb lesson={pageData} />
50 | }
51 | 


--------------------------------------------------------------------------------
/pages/scala/typeclass.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "typeclass"
 5 | export const title = "Scala Typeclass"
 6 | 
 7 | export const date = "2021-01-15T17:02:53"
 8 | 
 9 | const scastieId = "gIyJLpp3QBq2Azewca2sMw"
10 | 
11 | const mainInfoBox = <>
12 |   <p><i>Typeclasses</i> woooohh , sorry it is a bit late for scary Halloween words but here we are !</p>
13 | 
14 |   <p>More seriously, we already saw all the components of what a <i>Typeclass</i> is but we haven't formalized the word.</p>
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>We saw generic type before</p>
19 | 
20 |   <p>And we learned about <code>implicit val</code> as well and how to use them.</p>
21 |   <p>I am just introducing <code>implicit object</code> while we are at it. But it works the exact same way.</p>
22 | 
23 | 
24 |   <p>So what are <i>Typeclasses</i> ? It is just a construct that involve a <code>trait</code>, <code>implicit</code> implementations and a function that leverage those <code>implicit</code> implementations</p>
25 | 
26 |   <p>That's it !</p>
27 | 
28 |   <p>As always, we talked about it in the past, using <code>implicit</code> can be dangerous and hard to maintain. It is easy to forget where the implementation is and it can be hard to find it back depending on the IDE you are using. Also debugging can be tricky. Use it when it seems right !</p>
29 | </>
30 | 
31 | const description = "Scala Knowledge Bits - Scala typeclass - Periodic exercise to learn bits of knowledge about Scala. Scala typeclass here."
32 | 
33 | const prevUrl = "traversable"
34 | const nextUrl = "monad"
35 | 
36 | export const pageData = {
37 |   id,
38 |   title,
39 |   date,
40 |   scastieId,
41 |   mainInfoBox,
42 |   detailedInfoBox,
43 |   description,
44 |   prevUrl,
45 |   nextUrl
46 | }
47 | 
48 | export default function Page() {
49 |   return <Skb lesson={pageData} />
50 | }
51 | 


--------------------------------------------------------------------------------
/pages/scala/upper-constraint.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "upper-constraint"
 5 | export const title = "Scala upper constraint"
 6 | 
 7 | export const date = "2020-11-13T17:04:31"
 8 | 
 9 | const scastieId = "pnGE3sx2QF618zNKhKhoLw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Let's go back to Object Oriented Programming concepts and specifically to interfaces (<code>trait</code>).</p>
13 | 
14 |   <p>We are going to see how to constraint what type can be passed on. Several constraints are possible, let's talk about a upper bound. The technical term for it is <i>Upper Type Bounds</i> but let's keep it simple.
15 |   </p>
16 | </>
17 | 
18 | const detailedInfoBox = <>
19 |   <p>
20 |     The new operator we are looking at today is <code>&lt;:</code>
21 |   </p>
22 | 
23 |   <p>
24 |     The syntax is <code>A &lt;: B</code> and it means that the type <code>A</code> must be <code>B</code> or a class that has inherited from <code>B</code>, a child class.
25 |   </p>
26 | 
27 |   <p>
28 |     The main advantage of doing this is that if you were to only have a simple generic class <code>[A]</code>, you would not know anything about <code>A</code> at compile time. However, if you <i>bound</i> it, using <code>[A &lt;: B]</code>, the compiler would know that <code>A</code> is <i>at least</i> a <code>B</code>. That allow you to write code that can use the fields and methods of <code>B</code> as if <code>A</code> was <code>B</code>.
29 |   </p>
30 | 
31 |   <p>
32 |     Extra note, when defining a custom type using <code>type</code>, it is possible to describe in a parent class as <code>type MYTYPE &lt;: CONSTRAINT</code> so that child class has to implement it with a type that is a child of <code>CONSTRAINT</code>.
33 |   </p>
34 |   <pre>
35 |     <p>trait ParentClassOfConstraint</p>
36 | 
37 |     <p>class ChildClassOfConstraint extends ParentClassOfConstraint</p>
38 | 
39 |     <p>trait Foo &#123;</p>
40 |     <p>  type MYTYPE &lt;: ParentClassOfConstraint</p>
41 |     <p>&#125;</p>
42 | 
43 |     <p>class Bar extends Foo &#123;</p>
44 |     <p>  override type MYTYPE = ChildClassOfConstraint</p>
45 |     <p>&#125;</p>
46 |   </pre>
47 | 
48 |   <p> It is a bit advanced but I thought you should know about it.</p>
49 | </>
50 | 
51 | const description = "Scala Knowledge Bits - Scala upper constraint - Periodic exercise to learn bits of knowledge about Scala. Scala upper constraint here."
52 | 
53 | const prevUrl = "pattern-matching-for-case-class"
54 | const nextUrl = "case-class-copy"
55 | 
56 | export const pageData = {
57 |   id,
58 |   title,
59 |   date,
60 |   scastieId,
61 |   mainInfoBox,
62 |   detailedInfoBox,
63 |   description,
64 |   prevUrl,
65 |   nextUrl
66 | }
67 | 
68 | export default function Page() {
69 |   return <Skb lesson={pageData} />
70 | }
71 | 


--------------------------------------------------------------------------------
/pages/scala/val-lazy-def.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "val-lazy-def"
 5 | export const title = "Scala difference between val, lazy val and def"
 6 | 
 7 | export const date = "2020-07-27T17:01:27"
 8 | 
 9 | const scastieId = "r2ZO6YV9TsSQWF5resaN1A"
10 | 
11 | const mainInfoBox = <>
12 |   <p>We have seen <code>val</code> and <code>def</code> in previous SKBs but we haven't encountered the keyword <code>lazy</code> before.</p>
13 |   <p>Try to figure out by yourself what <code>lazy</code> does. Make sure to read the print statements in the console as you run the code.</p>
14 | 
15 | </>
16 | 
17 | const detailedInfoBox = <>
18 |   <p>Did you figure it out ?</p>
19 | 
20 |   <p>The keyword <code>lazy</code> allows a value to not be evaluated until the very first time it is called. If you call the value again, the previously computed value will be used.</p>
21 |   <p>With <code>val</code> the value is computed instantly as the value is declared. You were able to see the print statement early in the log, before all the others.</p>
22 |   <p>And for <code>def</code>, this is a method, so each time you call the method, you are recomputing the result.</p>
23 | 
24 |   <p>Summary: </p><ul>
25 |     <li><code>val</code>: Computed once when declared</li>
26 |     <li><code>lazy val</code>: Computed once when called</li>
27 |     <li><code>def</code>: Computed each time it is called</li>
28 |   </ul><p></p>
29 | </>
30 | 
31 | const description = "Scala Knowledge Bits - Scala difference between val, lazy val and def - Periodic exercise to learn bits of knowledge about Scala. Scala difference between val, lazy val and def here."
32 | 
33 | const prevUrl = "option"
34 | const nextUrl = "map-for-list"
35 | 
36 | export const pageData = {
37 |   id,
38 |   title,
39 |   date,
40 |   scastieId,
41 |   mainInfoBox,
42 |   detailedInfoBox,
43 |   description,
44 |   prevUrl,
45 |   nextUrl
46 | }
47 | 
48 | export default function Page() {
49 |   return <Skb lesson={pageData} />
50 | }
51 | 


--------------------------------------------------------------------------------
/pages/scala/val-pattern-matching.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "val-pattern-matching"
 5 | export const title = "Scala val pattern matching"
 6 | 
 7 | export const date = "2020-12-14T17:00:25"
 8 | 
 9 | const scastieId = "KpCh2LvkSza9Apd7RaoNEA"
10 | 
11 | const mainInfoBox = <>
12 |   <p>
13 |     Let's see how <i>pattern matching</i> appear in other aspect of the language.
14 |   </p>
15 |   <p>
16 |     More specifically, how it shows up in <code>val</code> assignment.
17 |   </p>
18 | </>
19 | 
20 | const detailedInfoBox = <>
21 |   <p>
22 |     Using <i>pattern matching</i> in conjunction with <code>val</code> can be very useful especially when working with <code>Tuple</code> or other structures such as <code>Option</code>.
23 |   </p>
24 |   <p>
25 |     It allows you to extract only the part you need and leave behind the rest using the <code>_</code> symbol.
26 |   </p>
27 |   <p>
28 |     However, you have to be extremely careful using <i>pattern matching</i> with <code>val</code> because you don't have a <code>case _ =&gt;</code> to catch the not matched cases. Which means, you are going to trigger exception at runtime.
29 |   </p>
30 |   <p>
31 |     In the last example, if you give anything different than <code>abc</code>, the code is going to fail. But this failure happens at runtime, not at compile time which can be extremely bad and dangerous.
32 |   </p>
33 |   <p>
34 |     Use this carefully !
35 |   </p>
36 | </>
37 | 
38 | const description = "Scala Knowledge Bits - Scala val pattern matching - Periodic exercise to learn bits of knowledge about Scala. Scala val pattern matching here."
39 | 
40 | const prevUrl = "_-wildcard"
41 | const nextUrl = "star-parameter"
42 | 
43 | export const pageData = {
44 |   id,
45 |   title,
46 |   date,
47 |   scastieId,
48 |   mainInfoBox,
49 |   detailedInfoBox,
50 |   description,
51 |   prevUrl,
52 |   nextUrl
53 | }
54 | 
55 | export default function Page() {
56 |   return <Skb lesson={pageData} />
57 | }
58 | 


--------------------------------------------------------------------------------
/pages/scala/values.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "values"
 5 | export const title = "Scala Values"
 6 | 
 7 | export const date = "2020-07-13T17:00:26"
 8 | 
 9 | const scastieId = "V5hjMfbkSb28UEedNKP2zw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>A variable can be considered in two parts. First its name, for instance <code>a</code> and then its value, for instance, <code>12</code>.</p><p>In Scala, a variable also has a type, for instance, <code>Int</code> when it is an integer.</p>
13 | </>
14 | 
15 | const detailedInfoBox = <>
16 |   <p>We assigned a value to the Value <code>a</code>.</p><ul><li>The line 3 is the value</li><li> The line 5 is doing a sum of the integer <code>2</code> and the value <code>a</code></li><li>
17 |     On line 7, we see <code>assert</code> which perform a test if the sum above is equal to <code>8</code></li></ul><p></p>
18 |   <p>Also, important things to keep in mind, <code>val</code> are immutable. In Scala, if you want a mutable variable, you would have to use the keyword <code>var</code>.</p>
19 | </>
20 | 
21 | const description = "Scala Knowledge Bits - Scala Values - Periodic exercise to learn bits of knowledge about Scala. Scala Values here."
22 | 
23 | const prevUrl = null
24 | const nextUrl = "string-interpolation"
25 | 
26 | export const pageData = {
27 |   id,
28 |   title,
29 |   date,
30 |   scastieId,
31 |   mainInfoBox,
32 |   detailedInfoBox,
33 |   description,
34 |   prevUrl,
35 |   nextUrl
36 | }
37 | 
38 | export default function Page() {
39 |   return <Skb lesson={pageData} />
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/scala/visibility.js:
--------------------------------------------------------------------------------
 1 | import Skb from 'components/skb-page'
 2 | 
 3 | 
 4 | export const id = "visibility"
 5 | export const title = "Scala visibility"
 6 | 
 7 | export const date = "2020-08-14T17:02:32"
 8 | 
 9 | const scastieId = "Dp3Hyvw4Tiagf7AG6nIuvw"
10 | 
11 | const mainInfoBox = <>
12 |   <p>Visibility is about what a <code>class</code> or an <code>object</code> expose to the rest of the world.</p>
13 | </>
14 | 
15 | const detailedInfoBox = <>
16 |   <p>Let's review the different kind of visibility: </p>
17 |   <p></p><ul>
18 | 
19 |     <li><code>public</code>: In scala, the <code>public</code> keyword does not exist, this is the default behavior. If nothing is specified, the member of this context will be available for all to call.</li>
20 | 
21 |     <li><code>private</code>: This will make the member not visible to the rest of the world (There is an exception about <code>companion object</code>, we are going to learn about it in a future SKB).</li>
22 | 
23 |     <li><code>protected</code>: This was not illustrated in this exercise. It is related to <i>object oriented programming</i> and more specifically about <i>inheritance</i>. We are going to learn more about it in a later SKB.</li>
24 | 
25 |   </ul><p></p>
26 | </>
27 | 
28 | const description = "Scala Knowledge Bits - Scala visibility - Periodic exercise to learn bits of knowledge about Scala. Scala visibility here."
29 | 
30 | const prevUrl = "objects"
31 | const nextUrl = "companion-objects"
32 | 
33 | export const pageData = {
34 |   id,
35 |   title,
36 |   date,
37 |   scastieId,
38 |   mainInfoBox,
39 |   detailedInfoBox,
40 |   description,
41 |   prevUrl,
42 |   nextUrl
43 | }
44 | 
45 | export default function Page() {
46 |   return <Skb lesson={pageData} />
47 | }
48 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | https://www.tourofscala.com/*  https://tourofscala.com/:splat  301!
2 | https://tourofscala.org/*  https://tourofscala.com/:splat  301!
3 | https://www.tourofscala.org/*  https://tourofscala.com/:splat  301!
4 | http://www.tourofscala.com/*  https://tourofscala.com/:splat  301!
5 | http://tourofscala.org/*  https://tourofscala.com/:splat  301!
6 | http://www.tourofscala.org/*  https://tourofscala.com/:splat  301!
7 | /list / 301
8 | /skb / 301
9 | 


--------------------------------------------------------------------------------
/public/assets/Discord-Logo+Wordmark-Black.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 272.1"><path d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z"/><path d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z"/></svg>


--------------------------------------------------------------------------------
/public/assets/GitHub-Mark-64px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/assets/GitHub-Mark-64px.png


--------------------------------------------------------------------------------
/public/assets/Patreon-Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/assets/Patreon-Logo.png


--------------------------------------------------------------------------------
/public/assets/Pinterest-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/assets/Pinterest-logo.png


--------------------------------------------------------------------------------
/public/assets/linkedin-xxl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/assets/linkedin-xxl.png


--------------------------------------------------------------------------------
/public/assets/medium-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/assets/medium-logo.png


--------------------------------------------------------------------------------
/public/assets/tour-of-scala-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/assets/tour-of-scala-logo.png


--------------------------------------------------------------------------------
/public/favicon/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/android-icon-144x144.png


--------------------------------------------------------------------------------
/public/favicon/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/android-icon-192x192.png


--------------------------------------------------------------------------------
/public/favicon/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/android-icon-36x36.png


--------------------------------------------------------------------------------
/public/favicon/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/android-icon-48x48.png


--------------------------------------------------------------------------------
/public/favicon/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/android-icon-72x72.png


--------------------------------------------------------------------------------
/public/favicon/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/android-icon-96x96.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-114x114.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-120x120.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-144x144.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-152x152.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-180x180.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-57x57.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-60x60.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-72x72.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-76x76.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon-precomposed.png


--------------------------------------------------------------------------------
/public/favicon/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/apple-icon.png


--------------------------------------------------------------------------------
/public/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>


--------------------------------------------------------------------------------
/public/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/favicon-96x96.png


--------------------------------------------------------------------------------
/public/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/favicon.ico


--------------------------------------------------------------------------------
/public/favicon/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Tour of Scala",
 3 |     "start_url": "/index.html",
 4 |     "display": "standalone",
 5 |     "orientation": "landscape",
 6 |     "icons": [
 7 |         {
 8 |             "src": "\/favicon\/android-icon-36x36.png",
 9 |             "sizes": "36x36",
10 |             "type": "image\/png",
11 |             "density": "0.75"
12 |         },
13 |         {
14 |             "src": "\/favicon\/android-icon-48x48.png",
15 |             "sizes": "48x48",
16 |             "type": "image\/png",
17 |             "density": "1.0"
18 |         },
19 |         {
20 |             "src": "\/favicon\/android-icon-72x72.png",
21 |             "sizes": "72x72",
22 |             "type": "image\/png",
23 |             "density": "1.5"
24 |         },
25 |         {
26 |             "src": "\/favicon\/android-icon-96x96.png",
27 |             "sizes": "96x96",
28 |             "type": "image\/png",
29 |             "density": "2.0"
30 |         },
31 |         {
32 |             "src": "\/favicon\/android-icon-144x144.png",
33 |             "sizes": "144x144",
34 |             "type": "image\/png",
35 |             "density": "3.0"
36 |         },
37 |         {
38 |             "src": "\/favicon\/android-icon-192x192.png",
39 |             "sizes": "192x192",
40 |             "type": "image\/png",
41 |             "density": "4.0"
42 |         }
43 |     ]
44 | }


--------------------------------------------------------------------------------
/public/favicon/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/ms-icon-144x144.png


--------------------------------------------------------------------------------
/public/favicon/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/ms-icon-150x150.png


--------------------------------------------------------------------------------
/public/favicon/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/ms-icon-310x310.png


--------------------------------------------------------------------------------
/public/favicon/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leobenkel/tour-of-scala/408ae4d6917ca8732b87caed03e1658d4407b1ce/public/favicon/ms-icon-70x70.png


--------------------------------------------------------------------------------
/public/scripts/google.js:
--------------------------------------------------------------------------------
1 | window.dataLayer = window.dataLayer || [];
2 | function gtag() { dataLayer.push(arguments); }
3 | gtag('js', new Date());
4 | 
5 | gtag('config', 'UA-177056861-1');


--------------------------------------------------------------------------------