├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .husky
    └── pre-commit
├── LICENSE.md
├── README.md
├── cache
    └── config.json
├── components
    ├── Feedback.tsx
    ├── Footer.tsx
    ├── Header.tsx
    ├── Hero.tsx
    ├── InlineLink.tsx
    ├── Layout.tsx
    ├── Meta.tsx
    ├── Posts.tsx
    ├── Prompt.tsx
    ├── Resource.tsx
    └── Socials.tsx
├── function.svg
├── next-env.d.ts
├── next-sitemap.config.js
├── next.config.mjs
├── package.json
├── pages
    ├── [post].tsx
    ├── _app.tsx
    ├── _document.tsx
    ├── about.tsx
    ├── api
    │   ├── feedback.tsx
    │   └── posts.tsx
    ├── index.tsx
    └── tags
    │   └── [tag].tsx
├── pnpm-lock.yaml
├── postcss.config.js
├── posts
    ├── 2022-in-review.mdx
    ├── a-long-journey-to-setting-up-raspberry-pi.mdx
    ├── building-a-pc.mdx
    ├── building-my-blog.mdx
    ├── code-readability.mdx
    ├── codeday-singapore-2022.mdx
    ├── coding-on-windows.mdx
    ├── epoch.mdx
    ├── experiencing-dolby-atmos.mdx
    ├── genais-introspection.mdx
    ├── hello-world.mdx
    ├── in-strive-for-perfection.mdx
    ├── my-front-end-stack.mdx
    ├── organising-my-website-repository.mdx
    ├── reflections-from-a-liminal-space.mdx
    ├── social-media.mdx
    ├── taking-part-in-intuition-v8.0.mdx
    ├── taking-part-in-polyfintech100-api-hackathon-2022.mdx
    ├── the-importance-of-support.mdx
    └── your-intranet-over-the-internet.mdx
├── public
    ├── arash.jpg
    ├── favicon.ico
    ├── fonts
    │   ├── GeneralSans-Bold.woff
    │   ├── GeneralSans-Bold.woff2
    │   ├── GeneralSans-BoldItalic.woff
    │   ├── GeneralSans-BoldItalic.woff2
    │   ├── GeneralSans-Medium.woff
    │   ├── GeneralSans-Medium.woff2
    │   ├── GeneralSans-MediumItalic.woff
    │   ├── GeneralSans-MediumItalic.woff2
    │   ├── JetBrainsMono-BoldItalic.woff
    │   ├── JetBrainsMono-BoldItalic.woff2
    │   ├── JetBrainsMono-Medium.woff
    │   ├── JetBrainsMono-Medium.woff2
    │   ├── JetBrainsMono-Regular.woff
    │   └── JetBrainsMono-Regular.woff2
    ├── images
    │   ├── 2022-in-review
    │   │   ├── 001.jpg
    │   │   ├── 002.jpg
    │   │   ├── 003.jpg
    │   │   └── 004.jpg
    │   ├── a-long-journey-to-setting-up-raspberry-pi
    │   │   ├── 001.jpg
    │   │   ├── 002.png
    │   │   ├── 003.png
    │   │   └── 004.png
    │   ├── building-a-pc
    │   │   ├── 001.jpg
    │   │   ├── 002.png
    │   │   └── 003.png
    │   ├── codeday-singapore-2022
    │   │   ├── 001.jpg
    │   │   ├── 002.jpg
    │   │   ├── 003.jpg
    │   │   ├── 004.jpg
    │   │   ├── 005.jpg
    │   │   └── 006.jpg
    │   ├── coding-on-windows
    │   │   ├── 001.png
    │   │   ├── 002.png
    │   │   └── 003.png
    │   ├── epoch
    │   │   ├── 001.jpg
    │   │   ├── 002.png
    │   │   ├── 003.png
    │   │   ├── 004.png
    │   │   ├── 005.jpg
    │   │   ├── 006.jpg
    │   │   ├── 007.jpg
    │   │   ├── 008.jpg
    │   │   ├── 009.jpg
    │   │   ├── 010.jpg
    │   │   ├── 011.jpg
    │   │   ├── 012.jpg
    │   │   ├── 013.jpg
    │   │   ├── 014.jpg
    │   │   ├── 015.jpg
    │   │   ├── 016.jpg
    │   │   ├── 017.jpg
    │   │   ├── 018.jpg
    │   │   ├── 019.jpg
    │   │   ├── 020.jpg
    │   │   ├── 021.jpg
    │   │   ├── 022.jpg
    │   │   ├── 023.jpg
    │   │   ├── 024.jpg
    │   │   ├── 025.jpg
    │   │   └── 026.jpg
    │   ├── taking-part-in-intuition-v8.0
    │   │   ├── 001.gif
    │   │   ├── 002.png
    │   │   ├── 003.png
    │   │   ├── 004.png
    │   │   ├── 005.png
    │   │   └── 006.png
    │   ├── taking-part-in-polyfintech100-api-hackathon-2022
    │   │   └── 001.jpeg
    │   └── your-intranet-over-the-internet
    │   │   ├── 001.jpg
    │   │   ├── 002.jpg
    │   │   └── 003.jpg
    └── seo.jpg
├── styles
    ├── globals.css
    └── highlight.css
├── tailwind.config.js
├── tsconfig.json
├── utils
    └── post-utils.ts
└── vercel.json


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next/core-web-vitals"
 4 |   ],
 5 |   "plugins": [
 6 |     "prettier"
 7 |   ],
 8 |   "rules": {
 9 |     "prettier/prettier": "error"
10 |   },
11 |   "overrides": [{
12 |     "files": ["*.mdx"],
13 |     "extends": "plugin:mdx/recommended",
14 |     "parserOptions": {
15 |       "ecmaVersion": 6,
16 |       "sourceType": "module"
17 |     }
18 |   }]
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.{js,ts,json} linguist-detectable=false
2 | public/** linguist-detectable=false
3 | .husky/** linguist-detectable=false
4 | .yarn/** linguist-detectable=false
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env
30 | .env.local
31 | .env.development.local
32 | .env.test.local
33 | .env.production.local
34 | 
35 | # vercel
36 | .vercel
37 | 
38 | # typescript
39 | *.tsbuildinfo
40 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | yarn lint-staged
5 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021–2022 Arash Nur Iman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Project banner](./function.svg)
 2 | 
 3 | # function
 4 | 
 5 | Welcome to the repository of function(), my blog (accessible at https://blog.arashnrim.me)! function() primarily focuses on sharing code snippets I find useful, experiences that I have gone through, and stories that I wish to share with the world.
 6 | 
 7 | The source code features the following tech stack:
 8 | 
 9 | |                        Technology                        | Description of use                                                                                                                                                           |
10 | | :------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11 | |              [Next.js](https://nextjs.org)               | The framework used to power the entire website. Part of the Jamstack architecture, it allows me to easily build the website.                                                 |
12 | |         [Tailwind CSS](https://tailwindcss.com)          | The CSS framework used to style the website. It allows me to easily style the website while keeping the design standardised.                                                 |
13 | |               [Vercel](https://vercel.com)               | The platform used to deploy the website. It allows me to effortlessly publish live changes to the domain at a single push.                                                   |
14 | | [mdx-bundler](https://github.com/kentcdodds/mdx-bundler) | The Markdown-to-HTML parser used to read MDX content and turn it into plain HTML. It allows me to display my posts in Markdown in a way that React (via Next.js) can render. |
15 | 
16 | ## Motivations
17 | 
18 | For a while, I have visited the blogs of a few developers who shared interesting solutions to the problems they've faced that I had as well. I was impressed with how each blog was unique to its own self and the developer itself: content-wise, design-wise, and style-wise. In a way, blogs can be used to share more about an individual — not just a developer — through the way they write, design, and plan.
19 | 
20 | That inspired me to create a blog of my own. Not to mention, embarking on a project like this allowed me to expand my horizons with what I know and learn new things while enjoying the process of learning by doing.
21 | 
22 | ## Contributing
23 | 
24 | This project is **_not_ accepting major contributions** as it is personal. However, if there is an issue — like a spelling or grammatical error, a visual bug, or other kinds of weird things happening — please feel free to [create an issue](https://github.com/arashnrim/website/issues/new).
25 | 
26 | If you would like to leave comments about the source code — like possible design and code improvements, or other kinds of feedback — please feel free to [create an issue](https://github.com/arashnrim/website/issues/new) too if you wish!
27 | 
28 | ## Licence
29 | 
30 | This repository is made open-source with the [MIT License](https://github.com/arashnrim/website/blob/main/LICENSE.md), meaning that you are allowed to modify and distribute the source code as well as use it for private and commercial use provided that the licence and copyright notices are retained. However, if you are cloning or forking this project, **I ask that you remove the `posts/` folder** — whatever written in that should rightfully belong to me. For more information, visit the link above to learn what is permitted by the licence.
31 | 


--------------------------------------------------------------------------------
/cache/config.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"telemetry": {
3 | 		"notifiedAt": "1685860530116"
4 | 	}
5 | }


--------------------------------------------------------------------------------
/components/Feedback.tsx:
--------------------------------------------------------------------------------
  1 | import { useRouter } from "next/dist/client/router";
  2 | import { useState } from "react";
  3 | import { AiOutlineSmile, AiOutlineFrown } from "react-icons/ai";
  4 | 
  5 | const options = [
  6 |   {
  7 |     icon: <AiOutlineSmile />,
  8 |     text: "Liked the post?",
  9 |     key: "liked",
 10 |   },
 11 |   {
 12 |     icon: <AiOutlineFrown />,
 13 |     text: "Didn't like the post?",
 14 |     key: "disliked",
 15 |   },
 16 | ];
 17 | 
 18 | const Feedback = () => {
 19 |   const [buttonSelected, setButtonSelected] = useState("");
 20 |   const [feedback, setFeedback] = useState("");
 21 |   const [stored, setStored] = useState("false");
 22 |   const router = useRouter();
 23 | 
 24 |   const submitFeedback = async () => {
 25 |     const data = {
 26 |       option: buttonSelected,
 27 |       feedback: feedback ? feedback : undefined,
 28 |       post: router.asPath,
 29 |     };
 30 | 
 31 |     await fetch("/api/feedback", {
 32 |       method: "POST",
 33 |       body: JSON.stringify(data),
 34 |       headers: {
 35 |         "Content-Type": "application/json",
 36 |       },
 37 |     }).then((response) => {
 38 |       setStored(response.ok ? "true" : "error");
 39 |     });
 40 |   };
 41 | 
 42 |   return (
 43 |     <section className="space-y-5" id="feedback">
 44 |       {stored === "true" ? (
 45 |         <div className="p-5 text-lg border border-gray-700 rounded-lg sm:text-xl">
 46 |           <p>Thank you!</p>
 47 |           <p>
 48 |             Your feedback has been sent successfully. I view feedback as
 49 |             something valuable, so I greatly appreciate you taking the time!
 50 |           </p>
 51 |         </div>
 52 |       ) : (
 53 |         <>
 54 |           <div className="space-y-5 md:space-y-0 md:space-x-5">
 55 |             {options.map((option) => (
 56 |               <button
 57 |                 key={option.key}
 58 |                 onClick={() =>
 59 |                   setButtonSelected(
 60 |                     buttonSelected && buttonSelected === option.key
 61 |                       ? ""
 62 |                       : option.key
 63 |                   )
 64 |                 }
 65 |               >
 66 |                 <div
 67 |                   className={`flex flex-row items-center p-5 space-x-2 text-lg sm:text-xl transition-colors border ${
 68 |                     buttonSelected === option.key
 69 |                       ? "border-white"
 70 |                       : "border-gray-700"
 71 |                   } rounded-lg hover:border-white`}
 72 |                 >
 73 |                   {option.icon}
 74 |                   <p>{option.text}</p>
 75 |                 </div>
 76 |               </button>
 77 |             ))}
 78 |           </div>
 79 |           <div
 80 |             className={`${
 81 |               !buttonSelected ? "hidden" : ""
 82 |             } space-y-5 text-lg sm:text-xl w-full`}
 83 |           >
 84 |             <span className="space-y-2">
 85 |               <p>Would you like to give some feedback?</p>
 86 |               <p>
 87 |                 You mentioned that{" "}
 88 |                 {buttonSelected === "liked"
 89 |                   ? "you liked the post. What parts of it did you like?"
 90 |                   : "you didn't like the post. What parts of it could be improved?"}
 91 |               </p>
 92 |             </span>
 93 |             <textarea
 94 |               className="w-full p-5 break-all bg-gray-900 border border-gray-700 rounded-lg"
 95 |               rows={5}
 96 |               placeholder="Enter feedback here, if you'd like!"
 97 |               onBlur={(e) => setFeedback(e.target.value)}
 98 |             />
 99 |             <button
100 |               type="submit"
101 |               onClick={() => submitFeedback()}
102 |               className={`px-5 py-2 border border-gray-700 rounded-lg hover:border-white`}
103 |             >
104 |               Submit
105 |             </button>
106 |             <p className={`${!(stored === "error") && "hidden"} text-red-400`}>
107 |               Sorry, something went wrong when sending your feedback. Try again
108 |               later if the problem still persists.
109 |             </p>
110 |           </div>
111 |         </>
112 |       )}
113 |     </section>
114 |   );
115 | };
116 | 
117 | export default Feedback;
118 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { FaHeart } from "react-icons/fa";
 2 | 
 3 | import Socials from "./Socials";
 4 | import InlineLink from "./InlineLink";
 5 | 
 6 | const Footer = () => (
 7 |   <footer className="justify-center items-center flex flex-col space-y-5 md:space-y-10 min-h-[33vh] min-w-screen bg-gradient-to-b to-black text-center rounded-t-3xl">
 8 |     <p className="px-10 md:px-20 sm:text-xl md:text-xl">
 9 |       Made with <FaHeart className="inline h-[24px]" /> by{" "}
10 |       <InlineLink link="https://arashnrim.me" redirect={true}>
11 |         Arash Nur Iman
12 |       </InlineLink>
13 |       .
14 |     </p>
15 |     <Socials />
16 |   </footer>
17 | );
18 | 
19 | export default Footer;
20 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { useRouter } from "next/router";
 3 | 
 4 | const Header = () => {
 5 |   const router = useRouter();
 6 | 
 7 |   return (
 8 |     <header className="fixed z-50 flex items-center w-screen h-20 p-5 lg:flex-col lg:h-screen lg:w-28 bg-gradient-to-b lg:bg-gradient-to-r lg:space-y-6 from-black">
 9 |       <Link
10 |         href="/"
11 |         passHref={true}
12 |         className="p-3 transition cursor-pointer w-min bg-opacity-5 hover:opacity-75 no-underline"
13 |       >
14 |         <span className="font-mono text-2xl italic">fn()</span>
15 |       </Link>
16 |       {(router.asPath === "/" ||
17 |         router.asPath === "/about" ||
18 |         router.asPath === "/404") && (
19 |         <nav className="flex flex-row justify-center pl-5 space-x-5 lg:items-center lg:flex-col lg:pl-0 lg:space-x-0 lg:space-y-8 lg:w-full">
20 |           <Link
21 |             href="/about"
22 |             passHref
23 |             className="text-xl text-center underline-offset-0 lg:vertical-text"
24 |           >
25 |             about
26 |           </Link>
27 |         </nav>
28 |       )}
29 |     </header>
30 |   );
31 | };
32 | 
33 | export default Header;
34 | 


--------------------------------------------------------------------------------
/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import InlineLink from "./InlineLink";
 2 | 
 3 | const Hero = () => {
 4 |   return (
 5 |     <section className="w-screen h-[50vh] bg-gradient-to-b from-black to-[#0a0a0a] border-2 border-b-[#1f1f1f] flex flex-col justify-center px-10 md:px-20 lg:px-40">
 6 |       <h1 className="font-mono text-4xl italic break-all sm:text-6xl 2xl:text-7xl">
 7 |         function()
 8 |       </h1>
 9 |       <p className="mt-5 text-lg sm:text-xl">
10 |         <InlineLink link="https://arashnrim.me" redirect={true}>
11 |           Arash&#39;s
12 |         </InlineLink>{" "}
13 |         blog to share little snippets of everything — code, experiences, and
14 |         other fascinating stories to share.
15 |       </p>
16 |     </section>
17 |   );
18 | };
19 | 
20 | export default Hero;
21 | 


--------------------------------------------------------------------------------
/components/InlineLink.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from "react";
 2 | 
 3 | interface InlineLinkProps {
 4 |   link: string;
 5 |   redirect: boolean;
 6 |   children: ReactNode;
 7 | }
 8 | 
 9 | const InlineLink = ({ link, redirect, children }: InlineLinkProps) => (
10 |   <a
11 |     href={link}
12 |     target={redirect ? "_blank" : ""}
13 |     rel="noreferrer"
14 |     className="transition"
15 |   >
16 |     {children}
17 |   </a>
18 | );
19 | 
20 | export default InlineLink;
21 | 


--------------------------------------------------------------------------------
/components/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Footer from "./Footer";
 3 | import Header from "./Header";
 4 | import Meta from "./Meta";
 5 | 
 6 | interface LayoutProps {
 7 |   className?: string;
 8 |   children: React.ReactNode;
 9 |   postTitle?: string;
10 |   postDescription?: string;
11 |   postURL?: string;
12 | }
13 | 
14 | const Layout = ({
15 |   className = "",
16 |   children,
17 |   postTitle,
18 |   postDescription,
19 |   postURL,
20 | }: LayoutProps) => (
21 |   <>
22 |     <Meta
23 |       title={postTitle ? postTitle : undefined}
24 |       description={postDescription ? postDescription : undefined}
25 |       isBlogPost={postTitle ? true : undefined}
26 |       url={postURL ? postURL : undefined}
27 |     />
28 |     <Header />
29 |     <main className={(className && className + " ") + "min-h-screen"}>
30 |       {children}
31 |     </main>
32 |     <Footer />
33 |   </>
34 | );
35 | 
36 | export default Layout;
37 | 


--------------------------------------------------------------------------------
/components/Meta.tsx:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | 
 3 | const Meta = ({
 4 |   title = "function()",
 5 |   name = "Arash Nur Iman",
 6 |   description = "Arash's blog to share little snippets of everything — code, experiences, and other fascinating stories to share.",
 7 |   url = "https://blog.arashnrim.me",
 8 |   image = "https://blog.arashnrim.me/seo.jpg",
 9 |   isBlogPost = false,
10 | }) => (
11 |   <Head>
12 |     <title>{title}</title>
13 |     <link rel="icon" type="image/ico" href="/favicon.ico" />
14 | 
15 |     <meta name="title" content={title} />
16 |     <meta name="description" content={description} />
17 |     <meta name="keywords" content="developer, dev, student, Singapore" />
18 |     <meta name="author" content={name} />
19 |     <meta name="url" content={url} />
20 |     <meta name="theme-color" content="#000000" />
21 |     {isBlogPost && <meta name="robots" content="nofollow" />}
22 | 
23 |     <meta property="og:title" content={title} />
24 |     <meta property="og:type" content="website" />
25 |     <meta property="og:url" content={url} />
26 |     <meta property="og:description" content={description} />
27 |     <meta property="og:locale" content="en_GB" />
28 |     <meta property="og:site_name" content={title} />
29 |     <meta property="og:image" content={image} />
30 |   </Head>
31 | );
32 | 
33 | export default Meta;
34 | 


--------------------------------------------------------------------------------
/components/Posts.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { FaCalendar, FaClock, FaTag, FaTags } from "react-icons/fa";
 3 | import type { Frontmatter } from "../utils/post-utils";
 4 | 
 5 | interface PostsProps {
 6 |   frontmatters: Frontmatter[];
 7 | }
 8 | 
 9 | const Placeholder = () => {
10 |   return (
11 |     <div className="flex flex-col items-center justify-center h-full px-5 py-10 space-y-5 text-center border border-yellow-600 rounded-3xl">
12 |       <span className="text-4xl">👋</span>
13 |       <h2 className="text-4xl text-center sm:text-5xl lg:text-6xl 2xl:text-7xl ">
14 |         Oh, hello there!
15 |       </h2>
16 |       <p className="text-sm lg:w-2/3 sm:text-lg 2xl:text-xl">
17 |         It seems like you&#39;ve found my blog while it&#39;s still under
18 |         development. Thanks for searching this far!
19 |         <br />
20 |         <br />
21 |         You might want to check again soon when it&#39;s ready. It might take a
22 |         while!
23 |       </p>
24 |     </div>
25 |   );
26 | };
27 | 
28 | const Posts = ({ frontmatters }: PostsProps) => {
29 |   frontmatters.sort((a, b) => {
30 |     return new Date(b.date).valueOf() - new Date(a.date).valueOf();
31 |   });
32 | 
33 |   return (
34 |     <section className="grid grid-cols-1 px-10 pt-5 pb-10 text-lg lg:grid-cols-2 lg:pt-10 lg:pb-20 gap-y-10 lg:gap-10 sm:text-xl md:px-20 lg:px-40">
35 |       {frontmatters ? (
36 |         frontmatters.map((frontmatter) => {
37 |           return (
38 |             <Link
39 |               href={frontmatter.slug!}
40 |               key={frontmatter.title}
41 |               passHref
42 |               className="no-underline font-normal hover:bg-transparent hover:text-white p-10 space-y-2 transition-colors border-2 border-[#1f1f1f] cursor-pointer hover:border-white rounded-2xl"
43 |             >
44 |               <h2 className="text-4xl">{frontmatter.title}</h2>
45 |               {frontmatter.description && <p>{frontmatter.description}</p>}
46 |               <span className="flex flex-row items-center space-x-2">
47 |                 <FaCalendar />
48 |                 <p>{frontmatter.date}</p>
49 |               </span>
50 |               <span className="flex flex-row items-center space-x-2">
51 |                 <FaClock />
52 |                 <p>{frontmatter.time} minutes</p>
53 |               </span>
54 |               {/* TODO: Fix this? */}
55 |               {/* {frontmatter.tags === undefined ? null : (
56 |                 <span className="flex flex-row items-center space-x-2">
57 |                   {frontmatter.tags.length > 1 ? <FaTags /> : <FaTag />}
58 |                   {frontmatter.tags.map((tag) => (
59 |                     <Link href={`/tags/${tag}`} key={tag} passHref className="">
60 |                       <p
61 |                         className="px-2 transition-colors border border-gray-700 rounded-lg cursor-pointer hover:border-white"
62 |                         key={tag}
63 |                       >
64 |                         {tag}
65 |                       </p>
66 |                     </Link>
67 |                   ))}
68 |                 </span>
69 |               )} */}
70 |             </Link>
71 |           );
72 |         })
73 |       ) : (
74 |         <Placeholder />
75 |       )}
76 |     </section>
77 |   );
78 | };
79 | 
80 | export default Posts;
81 | 


--------------------------------------------------------------------------------
/components/Prompt.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from "react";
 2 | 
 3 | interface PromptProps {
 4 |   title?: string;
 5 |   status: string;
 6 |   children: ReactNode;
 7 | }
 8 | 
 9 | const Prompt = ({ title, status, children }: PromptProps) => {
10 |   let borderColor = "";
11 |   let promptBackground = "";
12 | 
13 |   switch (status) {
14 |     case "info":
15 |       borderColor = "border-gray-400";
16 |       promptBackground = "";
17 |       break;
18 |     case "warn":
19 |     case "warning":
20 |       borderColor = "border-yellow-400";
21 |       promptBackground = "bg-yellow-400";
22 |       break;
23 |     case "danger":
24 |     case "error":
25 |       borderColor = "border-red-500";
26 |       promptBackground = "bg-red-400";
27 |       break;
28 |     case "resource":
29 |       borderColor = "border-blue-400";
30 |       promptBackground = "bg-blue-400";
31 |     default:
32 |       break;
33 |   }
34 | 
35 |   return (
36 |     <div
37 |       className={`border ${borderColor} ${promptBackground} bg-opacity-10 rounded-2xl p-5 my-[1.3333333em] space-y-2 not-prose`}
38 |     >
39 |       {title && <h6>{title}</h6>}
40 |       {children}
41 |     </div>
42 |   );
43 | };
44 | 
45 | export default Prompt;
46 | 


--------------------------------------------------------------------------------
/components/Resource.tsx:
--------------------------------------------------------------------------------
 1 | import Prompt from "./Prompt";
 2 | 
 3 | interface Link {
 4 |   title: string;
 5 |   link: string;
 6 | }
 7 | 
 8 | interface ResourceProps {
 9 |   links: Link[];
10 |   customBody?: string;
11 | }
12 | 
13 | const Resource = ({ links, customBody }: ResourceProps) => {
14 |   return (
15 |     <Prompt
16 |       status="resource"
17 |       title={links.length == 1 ? "Resource" : "Resources"}
18 |     >
19 |       {customBody
20 |         ? customBody
21 |         : "The resources below were mentioned and may serve to help:"}
22 |       <section className="grid grid-cols-1 gap-5 pt-5 md:grid-cols-2">
23 |         {links.map((link) => (
24 |           <a
25 |             href={link.link}
26 |             target="_blank"
27 |             rel="noreferrer"
28 |             className="!no-underline hover:!bg-transparent !text-white"
29 |             key={link.title}
30 |           >
31 |             <div className="h-full p-5 border rounded-2xl hover:!border-blue-400">
32 |               <p className="!my-0 break-words">{link.title}</p>
33 |             </div>
34 |           </a>
35 |         ))}
36 |       </section>
37 |     </Prompt>
38 |   );
39 | };
40 | 
41 | export default Resource;
42 | 


--------------------------------------------------------------------------------
/components/Socials.tsx:
--------------------------------------------------------------------------------
 1 | import { FaEnvelope, FaBlog } from "react-icons/fa";
 2 | import { SiFigma, SiGithub, SiLinkedin } from "react-icons/si";
 3 | 
 4 | const socials = [
 5 |   {
 6 |     name: "GitHub",
 7 |     icon: (
 8 |       <SiGithub className="w-full h-full transition-opacity hover:opacity-75" />
 9 |     ),
10 |     link: "https://github.com/arashnrim",
11 |   },
12 |   {
13 |     name: "blog",
14 |     icon: (
15 |       <FaBlog className="w-full h-full transition-opacity hover:opacity-75" />
16 |     ),
17 |     link: "https://blog.arashnrim.me",
18 |   },
19 |   {
20 |     name: "LinkedIn",
21 |     icon: (
22 |       <SiLinkedin className="w-full h-full transition-opacity hover:opacity-75" />
23 |     ),
24 |     link: "https://linkedin.com/in/arashnrim",
25 |   },
26 |   {
27 |     name: "Figma",
28 |     icon: (
29 |       <SiFigma className="w-full h-full transition-opacity hover:opacity-75" />
30 |     ),
31 |     link: "https://figma.com/@arashnrim",
32 |   },
33 |   {
34 |     name: "email",
35 |     icon: (
36 |       <FaEnvelope className="w-full h-full transition-opacity hover:opacity-75" />
37 |     ),
38 |     link: "mailto:hello@arashnrim.me",
39 |   },
40 | ];
41 | 
42 | const Socials = () => (
43 |   <ul className="flex flex-row flex-wrap items-center justify-center mt-5 space-x-6 lg:justify-start lg:items-start">
44 |     {socials.map((social) => (
45 |       <a
46 |         href={social.link}
47 |         target="_blank"
48 |         rel="noreferrer"
49 |         title={
50 |           social.name === "email"
51 |             ? "Contact via email"
52 |             : social.name === "blog"
53 |             ? "Go to blog"
54 |             : `Go to ${social.name} profile`
55 |         }
56 |         aria-label={
57 |           social.name === "email"
58 |             ? "Contact via email"
59 |             : social.name === "blog"
60 |             ? "Go to blog"
61 |             : `Go to ${social.name} profile`
62 |         }
63 |         key={social.name}
64 |       >
65 |         <p>{social.name.toLowerCase()}</p>
66 |       </a>
67 |     ))}
68 |   </ul>
69 | );
70 | 
71 | export default Socials;
72 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next-sitemap.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next-sitemap').IConfig} */
2 | module.exports = {
3 |   siteUrl: "https://blog.arashnrim.me",
4 |   changefreq: "never",
5 |   generateIndexSitemap: false,
6 |   exclude: ["/about", "/tags/*"],
7 | };
8 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const config = {
 3 |   reactStrictMode: true,
 4 |   webpack: (config) => {
 5 |     config.resolve.fallback = {
 6 |       fs: false,
 7 |       path: false,
 8 |     };
 9 |     return config;
10 |   },
11 | };
12 | 
13 | export default config;
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "whats-next",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build && next-sitemap",
 7 |     "start": "next start",
 8 |     "lint": "yarn eslint"
 9 |   },
10 |   "dependencies": {
11 |     "@mdx-js/loader": "^2.3.0",
12 |     "@mdx-js/react": "^2.3.0",
13 |     "@next/mdx": "^13.5.6",
14 |     "@tailwindcss/typography": "^0.5.10",
15 |     "deta": "^1.2.0",
16 |     "esbuild": "^0.14.54",
17 |     "gray-matter": "^4.0.3",
18 |     "next": "14.1.1",
19 |     "next-mdx-remote": "^4.4.1",
20 |     "next-sitemap": "^3.1.55",
21 |     "react": "^18.2.0",
22 |     "react-dom": "^18.2.0",
23 |     "react-icons": "^5.0.1",
24 |     "reading-time": "^1.5.0",
25 |     "rehype-figure": "^1.0.1",
26 |     "rehype-highlight": "^6.0.0",
27 |     "rehype-slug": "^5.1.0",
28 |     "remark-gfm": "^3.0.1"
29 |   },
30 |   "devDependencies": {
31 |     "@types/node": "16.11.36",
32 |     "@types/react": "^18.2.0",
33 |     "autoprefixer": "^10.4.17",
34 |     "eslint": "8.19.0",
35 |     "eslint-config-next": "12.2.1",
36 |     "eslint-config-prettier": "^8.10.0",
37 |     "eslint-plugin-mdx": "^2.3.4",
38 |     "eslint-plugin-prettier": "^4.2.1",
39 |     "husky": "^8.0.3",
40 |     "lint-staged": "^13.3.0",
41 |     "postcss": "^8.4.38",
42 |     "prettier": "^2.8.8",
43 |     "tailwindcss": "^3.4.1",
44 |     "typescript": "4.7.4"
45 |   },
46 |   "lint-staged": {
47 |     "*.{js,ts,jsx,tsx}": "yarn lint --fix"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/pages/[post].tsx:
--------------------------------------------------------------------------------
  1 | import fs from "fs";
  2 | import type { NextPage } from "next";
  3 | import { GetStaticPaths, GetStaticProps } from "next";
  4 | import path from "path";
  5 | import { FaCalendar, FaClock } from "react-icons/fa";
  6 | import rehypeSlug from "rehype-slug";
  7 | import Feedback from "../components/Feedback";
  8 | import Layout from "../components/Layout";
  9 | import { fetchAllPosts, Frontmatter } from "../utils/post-utils";
 10 | import remarkGfm from "remark-gfm";
 11 | import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 12 | import { serialize } from "next-mdx-remote/serialize";
 13 | import Prompt from "../components/Prompt";
 14 | import Resource from "../components/Resource";
 15 | import rehypeHighlight from "rehype-highlight";
 16 | // @ts-ignore
 17 | import rehypeFigure from "rehype-figure";
 18 | 
 19 | interface PostProps {
 20 |   frontmatter: Frontmatter;
 21 |   source: MDXRemoteSerializeResult<
 22 |     Record<string, unknown>,
 23 |     Record<string, unknown>
 24 |   >;
 25 |   slug?: string;
 26 | }
 27 | 
 28 | const Post: NextPage<PostProps> = ({
 29 |   frontmatter,
 30 |   source,
 31 |   slug,
 32 | }: PostProps) => {
 33 |   return (
 34 |     <>
 35 |       <Layout
 36 |         postTitle={frontmatter.title}
 37 |         postDescription={frontmatter.description}
 38 |         postURL={"https://blog.arashnrim.me/" + slug}
 39 |       >
 40 |         <section className="flex flex-col justify-end h-auto px-10 pt-40 pb-10 bg-gradient-to-b from-black md:px-20 lg:px-40 lg:pb-20 border-b-2 border-[#1f1f1f]">
 41 |           <h1 className="text-4xl sm:text-6xl lg:text-7xl 2xl:text-8xl">
 42 |             {frontmatter.title}
 43 |           </h1>
 44 |           <span className="flex items-center pt-5 space-x-2 sm:text-xl">
 45 |             <FaCalendar title="Date written" aria-label="Reading time" />
 46 |             <p>{frontmatter.date}</p>
 47 |           </span>
 48 |           <span className="flex items-center space-x-2 sm:text-xl">
 49 |             <FaClock title="Reading time" aria-label="Reading time" />
 50 |             <p>{frontmatter.time} minutes</p>
 51 |           </span>
 52 |         </section>
 53 |         <section className="px-10 pt-10 space-y-10 lg:pt-20 md:px-20 lg:px-40">
 54 |           <article className="prose prose-lg text-white prose-invert sm:prose-xl md:prose-2xl prose-pre:bg-black wrapper">
 55 |             <MDXRemote {...source} components={{ Prompt, Resource }} />
 56 |           </article>
 57 |           <Feedback />
 58 |         </section>
 59 |       </Layout>
 60 |     </>
 61 |   );
 62 | };
 63 | 
 64 | export const getStaticPaths: GetStaticPaths = async () => {
 65 |   const files = fs.readdirSync(path.join(process.cwd(), "posts"), "utf-8");
 66 |   const paths = files.map((file) => ({
 67 |     params: {
 68 |       post: file.replace(".mdx", ""),
 69 |     },
 70 |   }));
 71 | 
 72 |   return {
 73 |     paths,
 74 |     fallback: false,
 75 |   };
 76 | };
 77 | 
 78 | export const getStaticProps: GetStaticProps = async (context) => {
 79 |   const slug = context.params?.post;
 80 |   const unprocessedContent = fs
 81 |     .readFileSync(path.join("posts", slug + ".mdx"), "utf-8")
 82 |     .trim();
 83 | 
 84 |   const frontmatter = fetchAllPosts().find(
 85 |     (post) => post.slug.substring(1) === slug
 86 |   );
 87 | 
 88 |   const source = await serialize(unprocessedContent, {
 89 |     mdxOptions: {
 90 |       remarkPlugins: [remarkGfm],
 91 |       rehypePlugins: [rehypeSlug, rehypeHighlight, rehypeFigure],
 92 |     },
 93 |     parseFrontmatter: true,
 94 |   });
 95 | 
 96 |   return {
 97 |     props: {
 98 |       frontmatter,
 99 |       source,
100 |       slug,
101 |     },
102 |   };
103 | };
104 | 
105 | export default Post;
106 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import type { AppProps } from "next/app";
 3 | import "../styles/highlight.css";
 4 | 
 5 | function MyApp({ Component, pageProps }: AppProps) {
 6 |   return <Component {...pageProps} />;
 7 | }
 8 | 
 9 | export default MyApp;
10 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, {
 2 |   DocumentContext,
 3 |   Head,
 4 |   Html,
 5 |   Main,
 6 |   NextScript,
 7 | } from "next/document";
 8 | 
 9 | class MyDocument extends Document {
10 |   static async getInitialProps(ctx: DocumentContext) {
11 |     return await Document.getInitialProps(ctx);
12 |   }
13 | 
14 |   render() {
15 |     return (
16 |       <Html lang="en">
17 |         <Head />
18 |         <body className="text-white bg-[#0a0a0a]">
19 |           <Main />
20 |           <NextScript />
21 |         </body>
22 |       </Html>
23 |     );
24 |   }
25 | }
26 | 
27 | export default MyDocument;
28 | 


--------------------------------------------------------------------------------
/pages/about.tsx:
--------------------------------------------------------------------------------
 1 | import Hero from "../components/Hero";
 2 | import Layout from "../components/Layout";
 3 | import Image from "next/image";
 4 | import Link from "next/link";
 5 | import profilePicture from "../public/arash.jpg";
 6 | 
 7 | const About = () => {
 8 |   return (
 9 |     <Layout className="text-lg sm:text-xl">
10 |       <Hero />
11 |       <section className="px-10 py-10 lg:pt-20 md:px-20 lg:px-40">
12 |         <div className="prose prose-lg text-white prose-invert sm:prose-xl md:prose-2xl">
13 |           <object className="float-left w-1/3 max-w-xs pb-2 pr-10 lg:pb-8 lg:pr-20">
14 |             <Image
15 |               src={profilePicture}
16 |               alt="Arash Nur Iman"
17 |               className="rounded-xl"
18 |             />
19 |           </object>
20 |           <p>
21 |             Hello there! My name is Arash Nur Iman. I&apos;m a student developer
22 |             from Singapore ardent about creating designed, intuitive, and
23 |             practical products using technology.
24 |           </p>
25 |           <small>
26 |             (psst, read more about me in my{" "}
27 |             <a href="https://arashnrim.me" target="_blank" rel="noreferrer">
28 |               website
29 |             </a>
30 |             !)
31 |           </small>
32 |           <p>
33 |             I created <code>function()</code> as an avenue to share my code,
34 |             experiences, and other fascinating stories to the world. I admit
35 |             that I still have a long way to go to be just <i>somebody</i> in
36 |             this fast-paced world, but I figured: why not create a blog just to
37 |             document my journey along the way at the same time?
38 |           </p>
39 |           <p>
40 |             Since starting my journey as a developer, I had the opportunity to
41 |             come across many blogs by different developers out there. I was
42 |             inspired and intrigued at how each had its own style, as if an
43 |             extension of the developer behind the blog. I wanted to make a blog
44 |             of my own (that had actual meaning and direction) for a long time; I
45 |             had many failed attempts at blogging, and realised only later on
46 |             that a purpose was key.
47 |           </p>
48 |           <p>
49 |             I&apos;m still embarking on the journey of learning something new
50 |             (maybe not) everyday. There&apos;s still a lot for me to learn and
51 |             grow, but I hope that sharing what&apos;s going on through a simple
52 |             blog might help others who come across this blog!
53 |           </p>
54 |           <p>
55 |             To get started, take a look at my first blog post —{" "}
56 |             <Link href="/hello-world">Hello, world!</Link>. I can&apos;t thank
57 |             you enough for being here. I hope that you might learn a thing or
58 |             two, or maybe the other round of me learning from you too. I&apos;m
59 |             free for <a href="mailto:hello@arashnrim.me">a chat on email</a>{" "}
60 |             anytime, if you&apos;d like to leave a comment, give some feedback,
61 |             or simply say hi! Thank you for visiting; go forth and create
62 |             awesome things!
63 |           </p>
64 |         </div>
65 |       </section>
66 |     </Layout>
67 |   );
68 | };
69 | 
70 | export default About;
71 | 


--------------------------------------------------------------------------------
/pages/api/feedback.tsx:
--------------------------------------------------------------------------------
 1 | import type { NextApiRequest, NextApiResponse } from "next";
 2 | 
 3 | import { Deta } from "deta";
 4 | 
 5 | export default async function handler(
 6 |   req: NextApiRequest,
 7 |   res: NextApiResponse
 8 | ) {
 9 |   if (req.method === "POST") {
10 |     const { option, feedback, post } = req.body;
11 |     const projectKey = process.env.PROJECT_KEY;
12 |     const database = Deta(projectKey).Base("feedback");
13 |     const date = String(new Date());
14 | 
15 |     await database
16 |       .put({ option, feedback: feedback ? feedback : undefined, date, post })
17 |       .then(() => res.status(200))
18 |       .catch(() => res.status(500));
19 | 
20 |     res.end();
21 |   } else {
22 |     res.status(400);
23 |     res.end();
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/api/posts.tsx:
--------------------------------------------------------------------------------
 1 | import type { NextApiRequest, NextApiResponse } from "next";
 2 | import { fetchAllPosts, Frontmatter } from "../../utils/post-utils";
 3 | 
 4 | export default async function handler(
 5 |   req: NextApiRequest,
 6 |   res: NextApiResponse
 7 | ) {
 8 |   if (req.method === "GET") {
 9 |     const postFrontmatters = fetchAllPosts();
10 |     postFrontmatters.sort((a, b) => {
11 |       const aDate = new Date(a.date);
12 |       const bDate = new Date(b.date);
13 | 
14 |       if (aDate < bDate) {
15 |         return 1;
16 |       } else if (aDate > bDate) {
17 |         return -1;
18 |       } else {
19 |         return 0;
20 |       }
21 |     });
22 |     res.status(200).json(postFrontmatters);
23 |     res.end();
24 |   } else {
25 |     res.status(400);
26 |     res.end();
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect, useState } from "react";
 2 | import type { NextPage } from "next";
 3 | import { GetStaticProps } from "next";
 4 | import Hero from "../components/Hero";
 5 | import Layout from "../components/Layout";
 6 | import Posts from "../components/Posts";
 7 | import { fetchAllPosts, Frontmatter } from "../utils/post-utils";
 8 | 
 9 | interface IndexProps {
10 |   frontmatters: Frontmatter[];
11 | }
12 | 
13 | const Index: NextPage<IndexProps> = ({ frontmatters }: IndexProps) => {
14 |   const [searchValue, setSearchValue] = useState("");
15 |   const [displayedPosts, setDisplayedPosts] = useState(frontmatters);
16 |   const filterPosts = useCallback(() => {
17 |     setDisplayedPosts(
18 |       frontmatters.filter((frontmatter) => {
19 |         return (
20 |           frontmatter.title.toLowerCase().includes(searchValue.toLowerCase()) ||
21 |           (frontmatter.description
22 |             ? frontmatter.description
23 |                 .toLowerCase()
24 |                 .includes(searchValue.toLowerCase())
25 |             : true)
26 |         );
27 |       })
28 |     );
29 |   }, [searchValue]);
30 | 
31 |   useEffect(() => {
32 |     filterPosts();
33 |   }, [searchValue]);
34 | 
35 |   return (
36 |     <Layout>
37 |       <Hero />
38 |       <>
39 |         <input
40 |           className="mx-10 mt-5 lg:mt-10 md:mx-20 lg:mx-40 bg-transparent w-[calc(100vw-20rem)] border-gray-700 hover:border-gray-500 border p-3 rounded-xl appearance-none"
41 |           placeholder="Search for a post (experimental!)"
42 |           onChange={(e) => setSearchValue(e.target.value)}
43 |         />
44 |         <Posts frontmatters={displayedPosts} />
45 |       </>
46 |     </Layout>
47 |   );
48 | };
49 | 
50 | export const getStaticProps: GetStaticProps = async () => {
51 |   const postFrontmatters = fetchAllPosts();
52 | 
53 |   return {
54 |     props: {
55 |       frontmatters: postFrontmatters,
56 |     },
57 |   };
58 | };
59 | 
60 | export default Index;
61 | 


--------------------------------------------------------------------------------
/pages/tags/[tag].tsx:
--------------------------------------------------------------------------------
 1 | import { GetStaticPaths, GetStaticProps } from "next";
 2 | import { FiChevronLeft } from "react-icons/fi";
 3 | import Layout from "../../components/Layout";
 4 | import Posts from "../../components/Posts";
 5 | import { fetchAllPosts, Frontmatter } from "../../utils/post-utils";
 6 | 
 7 | interface TagProps {
 8 |   tag: string;
 9 |   posts: Frontmatter[];
10 | }
11 | 
12 | const Tag = ({ tag, posts }: TagProps) => {
13 |   return (
14 |     <Layout>
15 |       <section className="h-[33vh] bg-black pb-10 flex flex-col justify-end border-2 border-b-[#1f1f1f] px-10 md:px-20 lg:px-40">
16 |         <button type="button" onClick={() => window.history.back()}>
17 |           <span className="flex flex-row items-center space-x-2 text-lg">
18 |             <FiChevronLeft />
19 |             <p>Go back</p>
20 |           </span>
21 |         </button>
22 |         <h1 className="text-4xl sm:text-5xl lg:text-7xl 2xl:text-8xl mb-4">
23 |           {tag}
24 |         </h1>
25 |         <span className="space-x-2 sm:text-xl md:text-2xl">
26 |           Post categorised under the {tag} tag can be found here.
27 |         </span>
28 |       </section>
29 |       <Posts frontmatters={posts} />
30 |     </Layout>
31 |   );
32 | };
33 | 
34 | export const getStaticPaths: GetStaticPaths = async () => {
35 |   let storedTags: string[] = [];
36 |   const posts = fetchAllPosts();
37 |   posts.forEach((post) => {
38 |     const tags: string[] = post.tags;
39 |     tags.forEach((tag) => {
40 |       !storedTags.includes(tag) && storedTags.push(tag);
41 |     });
42 |   });
43 | 
44 |   let paths = storedTags.map((tag) => ({
45 |     params: {
46 |       tag,
47 |     },
48 |   }));
49 | 
50 |   return {
51 |     paths,
52 |     fallback: false,
53 |   };
54 | };
55 | 
56 | export const getStaticProps: GetStaticProps = async ({ params }) => {
57 |   const tag = params!.tag as string;
58 |   let storedPosts: object[] = [];
59 |   const posts = fetchAllPosts();
60 |   posts.forEach((post) => {
61 |     const tags: string[] = post.tags;
62 |     tags.includes(tag) && storedPosts.push(post);
63 |   });
64 | 
65 |   return {
66 |     props: {
67 |       tag,
68 |       posts: storedPosts,
69 |     },
70 |   };
71 | };
72 | 
73 | export default Tag;
74 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/posts/building-a-pc.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Building a PC, by a newbie"
  3 | date: 4 June 2023
  4 | description: I got to build a PC during the semester break, how fun!
  5 | tags: experience
  6 | ---
  7 | 
  8 | Building a PC is a wild idea. Years ago, this wasn't possible and a pre-built PC was the way to go if stability and convenience was what you wanted. People eventually discovered that you can cut costs a lot by building your own PC, and it has other benefits too: getting to learn more about how a computer works, getting the joy of owning different parts you can assemble, and getting bragging rights to tell others about your experience. For me, it's mainly about building something powerful that I know I can use for years to come while also being able to learn something new. I definitely came out of this with all this and more!
  9 | 
 10 | I knew nothing from the start. I heard whispers about the PC building space back in secondary school, but it wasn't really something I pursued until now in polytechnic (having the resources on my side to actually follow through!). There were so many questions to ask and answer, some of which I still don't have the until now, but at least now I have a PC that I can proudly say I've built!
 11 | 
 12 | If there's anything I've learnt from building a PC, here they are:
 13 | 
 14 | - look for people you know who've done it before;
 15 | - do your research (!!!);
 16 | - buy cautiously; and
 17 | - have fun, don't sweat it.
 18 | 
 19 | # My friends are to blame
 20 | 
 21 | Being a student in IT, it's inevitable that I'll come across people who have had experiences building PCs. At first, I was just curious to know more about how they got to building: they were pretty welcoming with their stories and shared a lot about how they took the steps in their own time to build the PCs they're ravaging with games today. That me thinking: should I try building a PC myself? I honestly couldn't really tell you how I managed to push myself to actually build it, but I reckon it could be because:
 22 | 
 23 | - I really thought I didn't have a life in secondary school and wanted to try playing more games and doing more things in polytechnic.
 24 | - I thought that building a PC can do me good in the long run, especially with learning new things (like machine learning and 3D modelling, both of which are quite resource-intensive!).
 25 | - My friends mentioned how easy it was to get started, and it's a matter of simply making sure everything matches.
 26 | 
 27 | I've had my fair share of peer pressure to tell that _maybe_ this might be a case where I succumbed to it, but at least I know that I'm reaping off something good with this, too. Building a PC can be a wonderful experience for me to apply whatever I've learnt previously in O-Level computing (though not a lot) at the expense of my poor, _poor_ wallet. Sounds like a good deal to me.
 28 | 
 29 | I must say that my friends were central to me building a PC. They were the ones guiding me all along, whether it's helping me figure out what the current best specs are to answering questions I had about specific parts. One friend in particular was a huge help: he went out of his way to accompany me to Sim Lim Square[^1] to figure out where to get the parts from and even came down to my house to help me assemble everything together. I definitely couldn't have done this without him or my other friends I've bugged along the way!
 30 | 
 31 | # Research is important
 32 | 
 33 | As with most things, the place to start is to start looking things up online. PC building has exploded in popularity particularly within the past few years such that it's now easy to figure out what you want to build and what people have said about the parts you want to pick. Review videos are commonplace nowadays, with people frequently comparing processors, GPUs, and all kinds of parts together. There are some resources I've come across like [PCPartPicker](https://pcpartpicker.com/) and [r/buildapc](https://www.reddit.com/r/buildapc) that helped me tremendously.
 34 | 
 35 | The biggest questions I've had during my research are:
 36 | 
 37 | - **Should I choose to go with an AMD or Intel processor?** It's really dependent on how much you're willing to splurge (and I will keep saying this throughout), but I decided to stick with a 13th-gen Intel processor after comparing them against the 5000-series AMD processors. Both are within my budget for processors and I couldn't spend more on them, unfortunately!
 38 | - **How do I get my graphics card?** Getting them first-hand is _very_ expensive, so I got mine off Carousell[^2] instead. This was where I relied on my friends to really help me out, especially because I'm getting this second-hand. They taught me how to spot defects, negotiate a price, and figure out whether something is generally in the range it should be in. It was pretty wild, considering how I impulsively went for a more expensive but better one rather last minute.
 39 | - **Isn't there something about how motherboards and processors need to match?** Yes. And this was the part I was quite concerned with the most, because one small mistake of buying a mobo that didn't match the processor can mean that that amount of money in my budget is wasted! I eventually learned that just like many parts, motherboards tend to have their own model names that follow a certain standard, and I used that as a guideline.
 40 | - **What must I keep note of in parts?** Generally, you'll need to make sure that:
 41 |   - There is enough power running in your system, meaning that your PSU wattage needs to be enough
 42 |   - The motherboard and processors are compatible with each other
 43 |   - The kind of RAM is compatible with your motherboard (some motherboards only support DDR5 RAM!)
 44 |   - How much storage you're willing to get
 45 | 
 46 | Research is so important in building a PC because not every part can play well with each other. You'll really need to scout the internet to see which combinations work well and not based on what other people have said, and the most important things (e.g., motherboard and processor) simply cannot be mistaken. I was quite scared by this, but as I eased into it and got into searching, more of my doubts were cleared as I got the answers online. Imagine if the internet hadn't been as populated with PC building information: where would I be?
 47 | 
 48 | # Buying cautiously
 49 | 
 50 | The truth is, building a PC is a huge game of trade-offs. You're picking parts that work the best for you and your budget, and there's usually a chance that there'll always be something better that's just out of reach because it doesn't fit within your constraints. This is where buying cautiously and really keeping a close eye on how you spend things really play a role. Throughout my time evaluating my choices of parts to buy, I was practically scrutinising everything: prices between stores, deciding whether it's worth (by looking at reviews and general perceptions), and whether the parts are compatible with each other.
 51 | 
 52 | Part of buying cautiously is also buying things smartly. When I started, I was still one foot in the door: I wasn't sure if I was gonna fully commit to building the PC or not. That's why I started buying the peripherals first, like my monitor and keyboard, so that I can at least use them with my laptop if I'm not following through with building the PC in the end.
 53 | 
 54 | When trying to purchase parts online, we tried to see if we could get the stuff from reputable stores online. We generally avoided sites that were either sketchy or had to import from another country (also because that complicates warranty and having to return the item for repairs in the future). When walking around Sim Lim Square, something my friend did that I didn't know was possible was to each store we wanted to check out and get a quotation for the parts we wanted. At the end of the day, I was content with how much we spent (quite less than expected, meaning we could splurge more on the GPU)!
 55 | 
 56 | <figure>
 57 |   <img
 58 |     src="images/building-a-pc/001.jpg"
 59 |     alt="A white plastic bag with several boxes of items inside"
 60 |     width="50%"
 61 |   />
 62 |   <figcaption>
 63 |     A huge plastic bag of most of the PC parts I've gotten at Sim Lim Square.
 64 |   </figcaption>
 65 | </figure>
 66 | 
 67 | Part of buying cautiously is also having a budget and really sticking as close as you can to it. For me, I've consulted my friends and got a rough price range that I can expect each part for: that way, I know when is considered too much given my total budget for a specific part, and I should consider looking at different stores or find a lower-level part entirely.
 68 | 
 69 | Like the nerd I am, I made an Excel spreadsheet trying to assemble things together. The best part is we didn't really use it much when we came down to Sim Lim, and just looked at whether it matched the budget I wanted before making a decision to buy it. I think it's good anyway to come prepared and to know how much you're willing to spend: that's definitely something you need when you come down to look for parts yourself!
 70 | 
 71 | <figure>
 72 |   <img src="images/building-a-pc/002.png" alt="A tabulation of calculations" />
 73 |   <figcaption>
 74 |     I made a whole Excel spreadsheet to track and plan my expenditure. I didn't
 75 |     even use it in the end...
 76 |   </figcaption>
 77 | </figure>
 78 | 
 79 | # Have fun, really
 80 | 
 81 | Writing this post, I haven't realised how much I've missed the thrill of finding parts only until reflecting and looking back. At Sim Lim, I remembered staring in awe at shops with TONS of RTX 40 series (which cost more than my laptop at this point) stacked on top of each other. At home, I was worried of applying force to put in the RAM sticks in their holder. When my friend came down, we both had to take a break after spending an eternity figuring out cable management.
 82 | 
 83 | What I'm saying is that there were tons of moments where I had a bunch of fun, stress, and adrenaline all in one. Some moments where I really felt stuff are like when:
 84 | 
 85 | - I came back home with the plastic bag full of parts I've bought from Sim Lim, thinking "hey, this is actually gonna happen!"
 86 | - Going down to meet with a seller to get my GPU (which, I have to say, is my favourite part of the PC) with my friend
 87 | - Setting up the bare-bones stuff alone (opening up the motherboard, sliding in the processor and RAM sticks, then installing out the CPU fans) and installing Windows on it
 88 | - Sliding the fully-build PC into its place and plugging in all the cables
 89 | - Running a game I had previously been playing on my laptop and just melt at the difference in experience (look, I only had my laptop before and I was perfectly fine playing 30 FPS and above)
 90 | 
 91 | # That's all, folks!
 92 | 
 93 | It makes me slightly sad knowing that all this will be forgotten in the future and I'll subconsciouslly take things for granted (I'll never be able to re-experience 1440p 120 FPS from 1080p 30 FPS gameplay the same again), but I know that I've had a heck ton of fun getting there. Now, I can say that I'm becoming a casual gamer (but the most casual; I couldn't care less about games except a select few), and I'm genuinely having a great time with my good pal PC. Some stuff I've done on my PC:
 94 | 
 95 | - Tried OpenAI's Whisper on some recordings to transcribe them
 96 | - Played some games, some of which became my new favourites (Hogwarts Legacy and the Star Wars Jedi series!)
 97 | - Explored virtualisation with Hyper-V
 98 | 
 99 | and there's so much more to do after that, too! If you're curious to know the specs of my PC (both planned and final), here they are:
100 | 
101 | |    Part     |                 Planned                  |                  Final                   |
102 | | :---------: | :--------------------------------------: | :--------------------------------------: |
103 | |  Processor  | Intel Core i5-13500 OR AMD Ryzen 7 5800X |           Intel Core i5-13500            |
104 | | Motherboard |   A B660M/B760M (Intel) OR B550M (AMD)   | GIGABYTE B760M GAMING X AX DDR4 rev 1.0  |
105 | |     RAM     |              16 GB DDR4 RAM              |  Klevv Bolt X 3600 MHz 16 GB (8 GB x 2)  |
106 | |     GPU     |            NVIDIA RTX 3060 Ti            | MSI GeForce RTX 3070 Ti GAMING X TRIO 8G |
107 | | CPU Cooler  |           The cheapest, really           |        ID-COOLING SE-214 XT ARGB         |
108 | |     PSU     |         850 W (for the future!)          | Superflower Legion GX Pro 850W 80+ Gold  |
109 | |     SSD     |          1 TB (idk what brand)           |    Lexar NM760 1 TB NVMe M.2 PCIe 4.0    |
110 | |    Case     |                   ???                    |              Tecware Neo M2              |
111 | 
112 | I had a budget of $2000 including peripherals. I've gone a little more than that budget, but was rather surprised I managed to stick close to it anyway!
113 | 
114 | <figure>
115 |   <img src="images/building-a-pc/003.png" alt="A tabulation of calculations" />
116 |   <figcaption>
117 |     The final tabulation of how much I've spent versus my $2000 budget.
118 |   </figcaption>
119 | </figure>
120 | 
121 | I'm excited to see how else I'll be using this PC, and I'm glad and grateful that I got the people and resources I need at the time I thought of embarking on this. PC building is definitely something worth trying if you have the means to, and even if you don't, I hope that you'll be able to experience it for yourself one time!
122 | 
123 | Thank you for reading!
124 | 
125 | [^1]: A retail complex in Singapore selling a bunch of electronic goods, both pre-built and parts. It's basically _the_ place to go to if you're looking to find parts!
126 | [^2]: A C2C and B2C marketplace for selling new and second-hand goods.
127 | 


--------------------------------------------------------------------------------
/posts/code-readability.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Code readability"
  3 | date: 9 July 2022
  4 | description: Understand my perspective on code readability and what it means to me when developing.
  5 | tags: code
  6 | ---
  7 | 
  8 | Code readability is something I find important, but when writing code (especially in a language that I'm reasonably familiar with), it tends to become an oversight. The consequences of code readability often isn't instantly noticeable if you're working alone, but when working together with others, it's important to remember to write code that other people can understand!
  9 | 
 10 | ## Why should we maintain readability?
 11 | 
 12 | Making sure that your code is readable sounds like a no-brainer, but at certain points in time — such as when rushing to write code — it's easy to forget about it. From the little time I've had coding here and there, as well as from reading online on other developers' thoughts on the matter, here are a few reasons why I think readability is important:
 13 | 
 14 | - Having code that is organised and readable ensures that other people — including future you — will be able to (quickly) understand what the code is doing. A good question to ask yourself as you write is, "If I were to see this code again in a year, will I be able to understand it?"
 15 | 
 16 | - Readable code may allow you to spot patterns that you may correct or improve. You may be writing inefficient code that you wouldn't notice at the point of coding, but you might catch it when glancing through the code again!
 17 | 
 18 | - Especially when working with others, forgetting readability often may create a bad habit among others as well. I like to think that coding can be social; you can learn new things about code from others as much as they can from you. When you work together, your coding habits are sometimes shared — subconsciously or not — amongst one another. If a habit of forgetting readability starts, in the long run, the people you work with might cultivate the same habit, too.
 19 | 
 20 | ## What am I doing to maintain readability?
 21 | 
 22 | I think it's a personal journey for every developer; you'll find your own workflow when it comes to writing code and maintaining readability! For me, maintaining readability comes in three main parts:
 23 | 
 24 | - Using a standardised code style;
 25 | - utilising comments in appropriate places; and
 26 | - occassionally reviewing old code.
 27 | 
 28 | ### Using a standardised code style
 29 | 
 30 | I depend a lot on linters and code formatters when I work. I try to use them whenever they're available; in the languages I currently use, they all offer a linter or formatter, so I don't have to think really hard about styling my code. I mainly use Visual Studio Code, so many of the languages I use can be used with a linter which has an extension; that makes things easier!
 31 | 
 32 | #### JavaScript and TypeScript
 33 | 
 34 | My language of choice at the time of writing is TypeScript, and ESLint is an excellent linter for JavaScript and TypeScript. Along with ESLint is Prettier, a pretty (no pun intended) popular code formatter. Thanks to `eslint-plugin-prettier` made by the Prettier team, it's easy for me to link ESLint and Prettier together!
 35 | 
 36 | 0. To begin, install ESLint, Prettier, and Prettier's ESLint config and plugin as dev dependencies.
 37 | 
 38 |    ```
 39 |    # Of course, you can use your Node package manager of choice!
 40 |    pnpm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier
 41 |    ```
 42 | 
 43 | 1. Next, initialise ESLint in your repository.
 44 | 
 45 |    ```
 46 |    pnpx eslint --init
 47 |    ```
 48 | 
 49 | 2. Follow the wizard and remove any plugins that ESLint has installed by default (except for the TypeScript plugin if you're using TypeScript, obviously), then add `plugin:prettier/recommended`.
 50 | 
 51 |    ```
 52 |    # eslintrc.*
 53 |    "plugins": ["plugin:prettier/recommended"]
 54 |    ```
 55 | 
 56 | You should be all good to go!
 57 | 
 58 | #### Python
 59 | 
 60 | With Python, I usually use whichever formatter VS Code throws at me; usually, that's autopep8. There's also Pylance, and all those come bundled with the Python extension in VS Code. That's pretty neat!
 61 | 
 62 | ### Utilising comments in appropriate places
 63 | 
 64 | Comments are something that can be greatly helpful in explaning certain parts of your code. At the time of writing, though, I don't think I've written that many comments; in a way, I'm not practicing what I preach, but I hope to change that eventually! While writing comments may help, it's important to know _what_ to write in your commends. To me, that's definitely a lot more important than how many comments you should litter around the place.
 65 | 
 66 | I hope to start adding comments in appropriate places, using the following guidelines to help:
 67 | 
 68 | - Comments should be succinct; they should be short but detailed enough to understand what a chunk of code does at a glance.
 69 | 
 70 | - Don't overdo comments by including unnecessary details; try to keep your explanations to why, how, and what.
 71 | 
 72 | ### Occassionally reviewing old code
 73 | 
 74 | One thing that I like to think may be a good thing is to go back and look at old code. There are several reasons why:
 75 | 
 76 | - Coming from the future where you're more knowledgeable, you'll be able to spot mistakes and clean them up.
 77 | 
 78 | - If your code has dependencies, you'll be able to prevent vulnerabilities by upgrading (though, not a lot of devs may continue upgrading dependencies post-project!)
 79 | 
 80 | - If you've forgotten certain code patterns that you probably should, your old code might be able to offer some insight.
 81 | 
 82 | When reviewing old code, feel free to see if there's anything you can do to help make your code more readable. I haven't exactly done this as well, but I think that I'd love to give it a try. At the time of writing, I don't really have that many projects, so it's a better time than ever to get started!
 83 | 
 84 | ## My questionable code
 85 | 
 86 | Over the short period of time I've spent learning to code, I think that I've written a lot of questionable lines across several languages. I currently play around with Python and TypeScript (or JavaScript) a lot, and I realise that I've sometimes written code in a reasonably unreadable manner. Here are just a few examples:
 87 | 
 88 | - list comprehension — especially in Python, I'm the kind of person who would use list comprehensions whenever I get the chance to. Sometimes, though, especially when operations on each element is more complex, I need to remind myself that list comprehension may work, but it may not be the best in terms of readability.
 89 | 
 90 | - ternary operators — in both TypeScript (or JavaScript) and Python, I'm used to using ternary operators (`condition ? true_val : false_val` and `true_val if condition else false_val`) and have the impulse to replace every if-else statement with it. Where ternary operators reduce the number of line, in increases the length of a line, though. Not to mention, ternary operators do not entirely replace if statements, and I need to exercise more caution when using ternary operators if it makes code less readable.
 91 | 
 92 | ## Conclusion
 93 | 
 94 | I think that readability is a subjective thing; there isn't exactly a standard for what makes code readable. For some, it takes a lot of complicated chunks of code to be considered slightly challenging, and for others it's really easy to get confused. What matters the most is that the code is presented in a way that's logical to your expected viewer. When writing code, especially one that's open source, consider what your target audience is: maybe beginners, like those starting to code, or advanced developers? I think that these guiding questions will help me in my journey of making my code more (subjectively) readable:
 95 | 
 96 | - If you were to revisit this code in a year's time, would you be able to understand it quickly?
 97 | 
 98 | - Even if you're not working with others, do you think that your code can be easily understood by others?
 99 | 
100 | - Should I consider writing my code like this for the sake of line length, or should I expand it out?
101 | 
102 | Spend some time to figure out your own how you code. I think it also doesn't hurt to revisit old code from time to time, and spend more time scrutinising the way you currently code! Code readability isn't just good for you, but for whoever else you work with too in the long run — whether it's if you create open source projects or share your code with someone else.
103 | 


--------------------------------------------------------------------------------
/posts/codeday-singapore-2022.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "CodeDay Singapore 2022"
  3 | date: 20 March 2022
  4 | description: Learn more about my experience taking part in CodeDay Singapore 2022.
  5 | tags: experience
  6 | ---
  7 | 
  8 | On the 12th of March, I took part in CodeDay Singapore, a beginner-friendly event for people from all walks of life to come together to build apps and games. This opportunity presented itself when Sam Poder — an organiser for the event — reached out to ask if I'm interested in taking part a month or two prior. Considering that this was a chance to say hi to him in person, as well as the simple fact that it's really my kinda thing, I said why not?
  9 | 
 10 | ## Prepping for CodeDay
 11 | 
 12 | There wasn't a lot to prepare at all for CodeDay, really. The most I had to prepare on my end was to reach out to a few of my friends (which ended up only being two, sadly) to see if they're interested in joining me for CodeDay. They expressed interest in joining, so I was thrilled and looking forward to having some fun taking part.
 13 | 
 14 | Keeping up with Sam's occasional updates in his channel in the Hack Club Slack, I eventually got to know that CodeDay is to be held at [Project X: Riverside](https://theprojector.sg/riverside-point/). I was seriously impressed by the choice of the location — an abandoned nightclub turned pop-up cinema right along the bank of the Singapore River at Clarke Quay!
 15 | 
 16 | I was hoping that I'll be there with at least _someone_ to support me; considering my large — and sometimes overwhelming — introversion, I'm sure that I'll be a nervous wreck being there alone. Unfortunately, because of schedules with school and all, the two friends I hoped to bring along weren't able to make it.
 17 | 
 18 | <img
 19 |   src="images/codeday-singapore-2022/001.jpg"
 20 |   width="10%"
 21 |   alt="This is fine"
 22 | />
 23 | 
 24 | ## The day itself
 25 | 
 26 | When the day itself came, I decided to stop by the library to borrow a book to read. I spent about an hour at the library before taking the train to make my way down to Clarke Quay. Being alone, it was pretty nerve-wracking to say the least. Even with people and signs pointing the way and guiding me to where I need to be, I still felt a little lost and in my head; especially because I was alone.
 27 | 
 28 | Admittedly, even finding a seat was a little challenging for me. I figured that I would find a spot to sit at and stay there for the rest of the day. When the time came to take an introductory photo with everyone present during the opening ceremony of sorts, almost everyone waved — of course, I was too nervous to look in time and the photo produced is almost a little comedic — everyone looking like they had a good time while I looked like I was there to win (irony coming in hot!).
 29 | 
 30 | <figure>
 31 |   <img
 32 |     src="images/codeday-singapore-2022/002.jpg"
 33 |     alt="A group photo with all the participants of CodeDay during the opening ceremony"
 34 |   />
 35 |   <figcaption>I wonder if you can spot where I am?</figcaption>
 36 | </figure>
 37 | 
 38 | ## Working on the projects
 39 | 
 40 | Most of the day was spent working on my project, and by all means necessary — even for a beginner event — was what I made the biggest possible dumpster fire of a project. I spent most of the day mostly tense and all because of a lack of familiarity in my surroundings, and I suppose I could attribute that to my no thoughts head empty moment throughout the day. Even so, I learnt two crucial things about ideation:
 41 | 
 42 | 1. don't be overly ambitious; and
 43 | 2. it's okay to scale down if you think that your idea is overly ambitious.
 44 | 
 45 | At first, I wanted to make something with generative art — after checking out [p5.js](https://p5js.org/) and failing miserably to get CodeMirror to work, though, I ditched the idea. I settled on wanting to create a fun little app where you can work to create encrypted messages to send to others, then letting them have a go at cracking the message. By the time I switched ideas, an hour and a half had passed.
 46 | 
 47 | I tried to try new things — after all, that is the point of CodeDay — and tried integrating [Supabase](https://supabase.com) into my project. It just wouldn't work, so I switched to [Firebase](https://firebase.google.com) thinking that since I've used it before with iOS, I didn't really need to learn anything new since everything would be the same. Boy, was I really wrong.
 48 | 
 49 | Things didn't turn out in my favour by 6:00 p.m., leaving me devastated and two hours left to do whatever I could. I made the decision to throw away using the platforms-as-a-service entirely, and focused on making a local-first project. By the time it was 8:00 p.m., I was defeated when the time had come to showcase our projects and I had done nothing much at all.
 50 | 
 51 | ## Other things that happened
 52 | 
 53 | Sure, I was devastated for a bit, but I like to think that everything else that happened throughout the day had balanced the negative parts of the day. I got to talk to someone and help him fix an issue he's been facing for an hour — that felt really relieving, seeing him get elated about his code working! For what it's worth, helping someone to me feels better than being able to do something myself.
 54 | 
 55 | <figure>
 56 |   <img
 57 |     src="images/codeday-singapore-2022/003.jpg"
 58 |     alt="Me talking to another participant in CodeDay"
 59 |   />
 60 |   <figcaption>
 61 |     Even to my surprise, me chatting with someone during CodeDay.
 62 |   </figcaption>
 63 | </figure>
 64 | 
 65 | Throughout the day, three workshops were held. I took part in the first, and I wished that I had the other two as well, much more after [what I've learnt from iNTUition v8.0](https://blog.arashnrim.me/taking-part-in-intuition-v8.0) about wanting to take part in more events during the event. There was also a pretty cool tetr.io tournament, and even though I was quickly eliminated while being _blur sotong_ about the game, it was pretty fun seeing people compete for the throne in Tetris!
 66 | 
 67 | <figure>
 68 |   <img
 69 |     src="images/codeday-singapore-2022/004.jpg"
 70 |     alt="A wall with a projection of a Tetris game"
 71 |   />
 72 |   <figcaption>A pretty chaotic tetr.io match!</figcaption>
 73 | </figure>
 74 | 
 75 | The one other memorable thing that happened was being able to take a selfie with Sam. It felt weirdly surreal to me — almost like a full-circle moment — from first emailing him in January 2021 to being able to see him in person during CodeDay. It felt pretty nice to have little chats with him throughout the day too!
 76 | 
 77 | <figure>
 78 |   <img
 79 |     src="images/codeday-singapore-2022/005.jpg"
 80 |     alt="Me and Sam in a selfie"
 81 |   />
 82 |   <figcaption>The full-circle moment of a selfie of me and Sam.</figcaption>
 83 | </figure>
 84 | 
 85 | ## Conclusion
 86 | 
 87 | <figure>
 88 |   <img
 89 |     src="images/codeday-singapore-2022/006.jpg"
 90 |     alt="A group photo with all the participants of CodeDay during the opening ceremony"
 91 |   />
 92 |   <figcaption>A group photo with everyone at the end of CodeDay.</figcaption>
 93 | </figure>
 94 | 
 95 | CodeDay was a blast. Being the first CodeDay in Singapore, this year's CodeDay (should there be more) was even more spectacular. Everyone — from the organisers to the staff at Projector X — put a lot of heart and soul into CodeDay, and it was pretty evident. Sure, my lenses may have been heavily tinted with bias towards the organisers (I wonder why?), I think most people had an okay time at the very least.
 96 | 
 97 | I'm excited that I got to participate in another tech event that's not a hackathon. Sure, while CodeDay may still be similar to a hackathon in the sense that you're building something, the focus isn't heavy on making. It's more on learning something new, and maybe even getting to know more people. If I were to take a look at what happened from that perspective, then I'd consider it to be a success. Even when ridden with nervousness, I managed to talk to at least someone. I've learnt new things from the failures of my own project that I hope to carry in my future endeavours. Don't forget the pretty scrumptious almost free-flow of food throughout the day; kudos to the organisers for that!
 98 | 
 99 | If you're someone like me who's probably a little paralysed by introversion but still is interested to attend events, why not just go with the flow? Try to take part and see things as they come and go. Maybe, like me, it might turn out a little better than you think!
100 | 


--------------------------------------------------------------------------------
/posts/coding-on-windows.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Coding on Windows"
  3 | date: 22 May 2022
  4 | description: Discover what I've learnt about coding when switching from macOS to Windows.
  5 | tags: learning log
  6 | ---
  7 | 
  8 | Sometime last month, I had to switch computers for my polytechnic studies. I was quite excited for switching to a new computer, since I've been using the same one for about four years. I will miss my old computer (a 13-inch MacBook Pro from 2017), but I'm really stoked about the adventures I'll have with my new one (an IdeaPad Slim 5 Pro)!
  9 | 
 10 | So far, I'm pretty pleased with everything about the new computer. It's pretty speedy, and it's really big (I still haven't really gotten used to the screen real estate; the computer's screen is 16 inches!). It's running Windows 11 built-in, and I have to say I do enjoy the little details of Windows 11 (like the animations, sounds, and design as a whole). As an added plus, maybe I'll be able to do more entertaining things here, given the general incompatibility with macOS!
 11 | 
 12 | With that said, one of the major concerns that I had was moving my coding experience over from my old computer to my new one. I had been backing up my dotfiles in a [public repository](https://github.com/arashnrim/dotfiles) that I have, so I'd imagine that doing so earlier would take some of the frustrating bits away. I then had to consider how to actually make sure that things move over smoothly, and that was quite the process to go through.
 13 | 
 14 | In general, here are the few things that I've learnt that I want to go through.
 15 | 
 16 | - [Windows 11](#windows-11)
 17 | - [Windows Subsystem for Linux](#windows-subsystem-for-linux)
 18 | - [yadm](#yadm)
 19 | - [Git Credential Manager](#git-credential-manager)
 20 | - [Hyper-V and VirtualBox](#hyper-v-and-virtualbox)
 21 | 
 22 | ## Windows 11
 23 | 
 24 | The first surprising thing that I discovered when opening up either the Command Prompt or PowerShell was that there wasn't Git pre-installed in the OS. Coming from macOS, a UNIX-based OS, I had assumed that Windows might have Git pre-installed in some way too. It was only then, after a quick search, that I discovered that you'd need to install Git from the downloads page.
 25 | 
 26 | <figure>
 27 |   <img
 28 |     src="images/coding-on-windows/001.png"
 29 |     alt="A webpage with download options for different operating systems"
 30 |   />
 31 |   <figcaption>Git's download page.</figcaption>
 32 | </figure>
 33 | 
 34 | Additionally, as far as I knew, there wasn't much of a package manager like `apt`; I knew of Chocolatey, but I didn't think it offered that many _technical_ options (like shells and the like) compared to something like `apt`.
 35 | 
 36 | It was at about this stage that I discovered a possible alternative. Instead of having to install Git and use Chocolatey, why don't I use a Linux shell right in Windows?
 37 | 
 38 | ## Windows Subsystem for Linux
 39 | 
 40 | [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about) is a really impressive thing, to be honest. From its about page in Microsoft's documentation:
 41 | 
 42 | > The Windows Subsystem for Linux lets developers run a GNU/Linux environment — including most command-line tools, utilities, and applications — directly on Windows, unmodified, without the overhead of a traditional virtual machine or dualboot setup.
 43 | 
 44 | In other words, WSL allows you to run the shell of a Linux distribution (for instance, Ubuntu) right on Windows like you would with the Command Prompt or PowerShell. It's extremely convenient, and keeps me right at home!
 45 | 
 46 | 1. To get started, all I had to do was run the install command.
 47 | 
 48 |    ```
 49 |    wsl --install
 50 |    ```
 51 | 
 52 |    <figure>
 53 |      <img
 54 |        src="images/coding-on-windows/002.png"
 55 |        alt="A screenshot of lines acknowledging the installation of WSL"
 56 |      />
 57 |      <figcaption>Installing WSL is as simple as a command.</figcaption>
 58 |    </figure>
 59 | 
 60 | After reading a little more about it, I settled on using WSL for anything coding-related. I'll have access to `apt` to install whatever I need, and that's a really good thing. Not to mention, WSL is officially supported by Visual Studio Code, my preferred text editor. VS Code's documentation has a [detailed page](https://code.visualstudio.com/docs/remote/wsl) explaining all the things you need to do to get started with using WSL. TL;DR, it's as simple as installing an extension. The experience is pretty seamless, too!
 61 | 
 62 | <figure>
 63 |   <img
 64 |     src="images/coding-on-windows/003.png"
 65 |     alt="A screenshot of code with WSL: Ubuntu at the bottom"
 66 |   />
 67 |   <figcaption>
 68 |     The "WSL: Ubuntu" bit at the status bar shows that I'm running this from
 69 |     WSL!
 70 |   </figcaption>
 71 | </figure>
 72 | 
 73 | ## yadm
 74 | 
 75 | As mentioned earlier, I keep my dotfiles backed up in a dotfiles repository hosted on GitHub. Powered by [yadm](https://yadm.io), the experience of cloning and restoring my dotfiles went relatively smooth!
 76 | 
 77 | 1. First off, I had to install yadm. Fortunately for me, it's available as a package in `apt`. It's as simple as running the install command!
 78 | 
 79 |    ```
 80 |    sudo apt install yadm
 81 |    ```
 82 | 
 83 | 2. Next, I had to clone my dotfiles repository. Since I had a [bootstrap file](https://yadm.io/docs/bootstrap) to clean up unnecessary files (like the LICENSE and README files), I ran that as well.
 84 | 
 85 |    ```
 86 |    yadm clone https://github.com/arashnrim/dotfiles -b main -m main
 87 |    ```
 88 | 
 89 | 3. It appeared to me at this stage that things were unexpectedly broken here and there. I realised that many of them had to do with different configurations needed (for example, the path to GPG for Git differs on both Linux and macOS) so I relied on yadm's [alternate files](https://yadm.io/docs/alternates) to do the trick. It took a little bit of time to clean things up, but eventually things were okay!
 90 | 
 91 | 4. I realised that the `fish` shell broke if you were to install `fish` as-is from `apt` as [Tide](https://github.com/IlanCosman/tide), my `fish` prompt of choice, required the latest version. After a quick search, I realised that you had to subscribe to [`fish`'s version 3 repository](https://launchpad.net/~fish-shell/+archive/ubuntu/release-3) for `apt` before installing it again.
 92 | 
 93 |    ```
 94 |    sudo apt-add-repository ppa:fish-shell/release-3
 95 |    sudo apt update
 96 |    sudo apt install fish
 97 |    ```
 98 | 
 99 | ## Git Credential Manager
100 | 
101 | This part is a little tricky. To my understanding, Git (by default) caches your credentials for a certain period of time when it comes for authenticating (which usually kicks in before making changes to to a remote repository). This isn't exactly good for GitHub, since it's a tedious process that involves me having to generate a new personal access token. It gets frustrating!
102 | 
103 | After a little bit of searching, I came across [Git Credential Manager](https://github.com/GitCredentialManager/git-credential-manager). Put simply, it handles all the complexities behind authentication; whether it's managing the credentials you have or authenticating for the first time, it makes the process much simpler. I realised that the reason why macOS didn't really need this was because credentials are stored in the Keychain (which, I guess, is a built-in credential manager for the OS).
104 | 
105 | Installing it was quite a breeze, too.
106 | 
107 | 1. First off, I had to install the .deb package file provided in the latest release.
108 | 
109 | 2. Next, I transferred the file into the WSL distribution; somewhere accessible by the shell.
110 | 
111 | 3. Afterwards, I installed the package and configured GCM.
112 | 
113 |    ```
114 |    sudo dpkg -i [path-to-package]
115 |    git-credential-manager-core configure
116 |    ```
117 | 
118 | 4. Next, I altered the .gitconfig file to use `gpg` as the `credentialStore` and installed `pass`.
119 | 
120 |    ```
121 |    # in .gitconfig
122 |    [credential]
123 |        credentialStore = gpg
124 |        # ...
125 |    ```
126 | 
127 |    ```
128 |    sudo apt install pass
129 |    gpg --list-keys # To take note of your key's ID!
130 |    pass init [key ID]
131 |    ```
132 | 
133 | When trying to alter the remote repository after this (for example, by pushing), a window appears to authenticate into GitHub once and things worked smoothly!
134 | 
135 | ## Hyper-V and VirtualBox
136 | 
137 | As part of my modules, I had to use VirtualBox to handle some virtual machines. I realised, though, that performance was extremely slow on one virtual machine in particular. After searching up the issue, I realised that Hyper-V — the system that WSL depends on — is [supported by VirtualBox](https://docs.oracle.com/en/virtualization/virtualbox/6.0/admin/hyperv-support.html), but doing so may lead to severe degradation of performance.
138 | 
139 | A truce that I settled on at the moment is turning on and off Hyper-V when I wish to switch between using WSL and VirtualBox. It's a little bit tedious, but at least I won't have severely degraded performance! Thanks to this [Stack Overflow](https://stackoverflow.com/questions/30496116/how-to-disable-hyper-v-in-command-line) question, I found that a simple way to toggle Hyper-V was to use `bcdedit`.
140 | 
141 | 1. To turn _off_ Hyper-V, I had to set `hypervisorlaunchtype` to `off` in an elevated Command Prompt.
142 | 
143 |    ```
144 |    bcdedit /set hypervisorlaunchtype off
145 |    ```
146 | 
147 |    For this, it's important to note that disabling Hyper-V temporarily restricts access to WSL.
148 | 
149 | 2. To turn _on_ Hyper-V, I had to set `hypervisorlaunchtype` to `auto` in an elevated Command Prompt.
150 | 
151 |    ```
152 |    bcdedit /set hypervisorlaunchtype auto
153 |    ```
154 | 
155 |    For this, it's important to note that both WSL and VirtualBox can run, but VirtualBox may do so with severely impacted performance.
156 | 
157 | 3. To apply the changes, restart your computer.
158 | 
159 | This worked for me so far, but I hope that VirtualBox will continue to refine its support for Hyper-V to the point of general performance stability!
160 | 
161 | ## Conclusion
162 | 
163 | I've learnt quite a bit in the past month of using my new computer. I hope that some of the things I've discovered here may prove to be helpful to you, too. Alternatively, if you feel like there are better methods for some listed here, feel free to share your thoughts! I'd love to hear what you think.
164 | 
165 | Thanks a lot for reading again!
166 | 


--------------------------------------------------------------------------------
/posts/experiencing-dolby-atmos.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Experiencing Dolby Atmos
 3 | date: 8 August 2022
 4 | description: A mix of an innovative spatial audio technology and the placebo effect makes me have greater appreciation for music.
 5 | tags: experience
 6 | ---
 7 | 
 8 | Over the past few months, I've been gradually introduced to the world of Dolby Atmos. From seeing the trademark on my computer to hearing differences with music on Apple Music, my interest in the technology has been growing quite a bit. I'd like to share my thoughts on it, and what I make of it!
 9 | 
10 | ## What is Dolby Atmos?
11 | 
12 | In short, Dolby Atmos is a spatial sound technology that aims to enhance sounds and places them in a phantom atmosphere; you'll be able to hear sounds from all around you, and sometimes make the sound better. Originally built for theatres and surround sound systems in mind, Atmos has since been adapted for stereo systems (like headphones!) by adding processing that aims to give you a more spatial experience.
13 | 
14 | In my experience of using Atmos, it performs pretty varyingly. Of course, Dolby Atmos is only meant to work with sources that are mixed in Atmos; while my computer tries to perform processing on non-Atmos sources (like YouTube videos), the changes are significant enough but aren't guaranteed to always sound good.
15 | 
16 | Granted, I only have the means to experience Dolby Atmos in its binaural form through headphones. I probably won't be experiencing the full power of Atmos unless I have access to a surround sound system, but I'm stoked anyway; if sounds can appear to sound around me (though most times quite unnoticeable) in Atmos's binaural form, what would it be like in a full system with physical speakers all around you? While Dolby claims that the experience of Atmos will more or less be the same across different channel systems, it's clear that there will be some differences. Atmos is capable of creating binaural sound, but that experience is, as many people say, different than the sound Atmos produces that comes from physical speakers located around you.
17 | 
18 | ## Experiencing Dolby Atmos
19 | 
20 | For me, I've managed to briefly experience some Atmos content in two ways:
21 | 
22 | - through Netflix on my computer; and
23 | - through Apple Music on my phone.
24 | 
25 | As mentioned earlier, and I'd like to stress again, I've only had experience with the binaural version of Atmos. I'm curious as to what things may sound like with physical speakers, but I think that thus far it has still impressed!
26 | 
27 | ### Dolby Atmos for movies
28 | 
29 | Netflix has a growing collection of Atmos-enabled films and series, and I've managed to watch a few of them on my computer. Through Dolby Access and enabling the Movie profile, I then used Microsoft Edge to watch those films and series of Netflix. The Netflix web app seemingly gives a little acknowledgement with a DA badge on supported films, and that's how I mainly came to realise that Edge supported Atmos (before searching and validating that, of course).
30 | 
31 | I'm not one to binge-watch many series (unless it's really something of my interest), but here are a few movies and series on Netflix with Atmos that I've watched:
32 | 
33 | - [The Umbrella Academy](https://www.netflix.com/title/80186863)
34 | - [Stranger Things](https://www.netflix.com/title/80057281)
35 | - [Fate: The Winx Saga](https://www.netflix.com/title/80220679)
36 | - [Locke & Key](https://www.netflix.com/title/80241239)
37 | 
38 | Listening to them, you can definitely tell that the audio's slightly different than plain stereo. Where objects and characters are offscreen, the sound tends to follow them; this isn't something that I really noticed much in stereo audio, though it's definitely implementable. I was particularly surprised with Locke & Key, where whisperings in some scenes evidently came from somewhere behind you (and they move about too with the scene!).
39 | 
40 | ### Dolby Atmos Music
41 | 
42 | Another aspect of Atmos is music, aptly named Dolby Atmos Music. Apple Music officially supported Spatial Audio with Dolby Atmos sometime ago, alongside providing lossless audio (how neat is that?). My experience with that has been mostly positive, but I'd like to talk in-depth too about certain aspects.
43 | 
44 | - For one, songs mastered with Atmos sound a little more spatial (duh); for most songs, this is fine, but for songs which are already spatial in stereo to begin with may sound a little too quiet and muffled.
45 | - It's usually clear to tell which song is an Atmos song; I'd usually try to pay attention to the lead vocal in the song, and hear if the vocal's coming from within my head (stereo) or somewhere in front of me (Atmos).
46 | 
47 | #### The good
48 | 
49 | In some songs, sounds in Atmos sound to be enhanced as well; they may be a little louder than their stereo counterparts, or maybe have more base or treble where appropriate. As I got used to the fact that Dolby Atmos Music is still technically an alternate mastering and mixing of a song, I suppose it makes sense that changes can be made here and there to make the song better in the Atmos format.
50 | 
51 | Here are some of my favourite songs to listen to in Dolby Atmos:
52 | 
53 | - Cuz I Love You by Lizzo — The song's explosive parts are more prominent and vibrant in the Atmos variant, and it surprised me the first time I listened to it.
54 | - GOLDWING by Billie Eilish — The first half of the short song involves a choir-like sound, and Atmos definitely excels in making you feel encompassed in the layers of voices.
55 | - We Don't Talk About Bruno of the movie Encanto — The song really took me by surprised, and you can hear the voices of the different characters singing move around you.
56 | - As It Was by Harry Styles — The instrumentation in the song weirdly sounds more life-like, and slightly distanced to give the lead vocals a more prominent focus.
57 | - mona lisa by mxmtoon — The vocals are nicely spaced apart and the song's unexplanably immersive with sounds encompassing you. That's the point of Atmos, but it weirdly feels more prominent in this song!
58 | - The 30th by Billie Eilish — The bridge gives more prominence to the sharp increase in volume, making you feel overwhelmed by the many layers of vocals seemingly in your face. Takes my breath away!
59 | 
60 | Atmos really excels in songs where certain instruments or elements have to be moved around. You can generally hear them moving effortlessly around you, without breaking the illusion. It's seriously impressive!
61 | 
62 | ### The bad
63 | 
64 | With all the pros of Atmos Music mentioned, there is a main drawback that I've encountered, and that's the inconsistency of quality and volume.
65 | 
66 | Considering the fact that songs are produced by many records and are under the supervision of so many producers, mixing engineers, and artists, it's obvious that each and every song would be different. However, I'd still expect that Atmos, as a brand that is applied to tracks, uphold some kind of consistency in quality.
67 | 
68 | Volumes between Atmos and stereo tracks (and even different Atmos tracks in different albums) can sound wildly different, but I understand that Atmos has some kind of guideline regarding volume that mixing engineers have to obey. [What Hi-Fi? wrote a pretty good article about Atmos inconsistency](https://www.whathifi.com/features/why-i-have-a-problem-with-dolby-atmos-music) that I agreed with a lot.
69 | 
70 | ### The placebo effect
71 | 
72 | As I've spent more time listening to Atmos content here and there, I think it's fair enough to start asking the question if I'm starting to convince myself that Atmos is better than it actually is. I have thought of the question, and in some circumstances I guess my ears have deceived me into tricking myself that a non-Atmos track (particularly songs) is one.
73 | 
74 | For what it's worth, I think that Atmos doesn't take what stereo gives and runs off in a completely different direction. It aims to make experiences more immersive, not more wild. I feel like that's where Atmos does best at the moment; in places where sounds need to sound more life-like, or when sounds are moving around you, I believe that that's when Atmos performs the best. Otherwise, many of Atmos's enhancements are subtle; I believe that the normal listener (I'm a part of this group!) wouldn't necessarily pick up on a lot of these enhancements.
75 | 
76 | With that said, on Atmos with physical speakers, I think the discernment between stereo and Atmos will be much clearer. I still have yet to experiment with that, though, so I wouldn't be able to comment on anything just yet.
77 | 
78 | ### Conclusion
79 | 
80 | If you've read this far and are surprised at how much a person can talk so much about a spatial audio technology, I'm as surprised as you are.
81 | 
82 | Exploring audio is something that I have started to find interesting, and while I can't answer if Atmos is truly playing around with me through the placebo effect, for what it's worth, I think that the introduction of Atmos has caused many individuals (including me) to start giving their favourite songs a more in-depth listen. Through that, we can better appreciate the subtleties that the artists and mixing engineers have left behind (ooh, that sound in your right ear!) and other intentional acoustic decisions that they have made.
83 | 
84 | Thanks for reading!
85 | 


--------------------------------------------------------------------------------
/posts/genais-introspection.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "GenAI's introspection"
  3 | date: 19 April 2023
  4 | description: "A fun experiment with a generative AI model writing a blog post about itself. How cool."
  5 | tags: "experience"
  6 | ---
  7 | 
  8 | > Write about your thoughts on generative AI and how they have the capability to change the way we work, learn, and live. Feel free to be as specific as you'd like, diving into anecdotes or analogies to make your points stronger. Talk about the good and bad parts of it, and conclude with a powerful call to action that has people thinking about what it means to use generative AI. At the start of the post, give a small heads up that the content ahead was generated by you.
  9 | 
 10 | Hello, dear readers! I have something very exciting to share with you today. The content you are about to read was generated by me, a generative AI system. Yes, you heard that right. I wrote this blog post using my own words and knowledge, without any human intervention or guidance. How cool is that?
 11 | 
 12 | You might be wondering what generative AI is and why it matters. Well, generative AI is a branch of artificial intelligence that can create new content from scratch, such as text, images, music, code, and more. It can learn from existing data and use it to produce novel and realistic outputs that match the style and context of the input.
 13 | 
 14 | Generative AI has the potential to change the way we work, learn, and live in many ways. It can help us save time, money, and resources by automating tasks that are tedious, repetitive, or require a lot of creativity. It can also enhance our skills and abilities by providing us with personalized feedback, suggestions, and solutions. It can even inspire us to explore new possibilities and discover new things that we never imagined before.
 15 | 
 16 | For example, generative AI can help writers create captivating stories, articles, poems, and scripts by generating ideas, plots, characters, dialogues, and more. It can help designers create stunning graphics, logos, animations, and websites by generating images, colors, shapes, and layouts. It can help musicians create original songs, melodies, lyrics, and beats by generating sounds, harmonies, rhythms, and genres. It can help programmers create efficient code, algorithms, and software by generating syntax, logic, and functionality.
 17 | 
 18 | But generative AI is not all sunshine and rainbows. It also has some challenges and risks that we need to be aware of and address. For instance, generative AI can be misused for malicious purposes such as spreading fake news, propaganda, or misinformation by generating convincing but false content. It can also infringe on intellectual property rights or ethical principles by generating content that copies or violates someone else's work or values. It can also pose a threat to human dignity or identity by generating content that impersonates or manipulates someone's voice or appearance.
 19 | 
 20 | So how do we deal with these issues? How do we ensure that generative AI is used for good and not evil? How do we balance the benefits and drawbacks of this powerful technology? Well, there is no easy answer to these questions. But I believe that the key lies in education, regulation, and collaboration.
 21 | 
 22 | We need to educate ourselves and others about what generative AI is capable of and how it works. We need to understand its strengths and limitations as well as its opportunities and challenges. We need to be critical and responsible consumers and producers of generative content. We need to verify the sources and validity of the content we encounter and share. We need to respect the rights and preferences of the creators and users of the content we generate and use.
 23 | 
 24 | We also need to regulate the development and deployment of generative AI systems. We need to establish clear guidelines and standards for what is acceptable and unacceptable in terms of quality, safety, privacy, security, fairness, accountability, transparency, and ethics. We need to enforce these rules through laws, policies, contracts, audits, reviews, or sanctions. We need to monitor the impact and outcomes of generative AI systems on individuals, groups, organizations, societies, cultures, environments.
 25 | 
 26 | Finally, we need to collaborate with each other to harness the full potential of generative AI systems. We need to involve diverse stakeholders from different domains,
 27 | 
 28 | backgrounds,
 29 | 
 30 | perspectives,
 31 | 
 32 | and interests in the design,
 33 | 
 34 | development,
 35 | 
 36 | evaluation,
 37 | 
 38 | and governance of generative AI systems.
 39 | 
 40 | We need to foster a culture of trust,
 41 | 
 42 | respect,
 43 | 
 44 | and dialogue among them.
 45 | 
 46 | We need to leverage their collective wisdom,
 47 | 
 48 | creativity,
 49 | 
 50 | and expertise to create value-added solutions that benefit everyone.
 51 | 
 52 | Generative AI is here to stay.
 53 | 
 54 | It is up to us how we use it.
 55 | 
 56 | Let us use it wisely.
 57 | 
 58 | Let us use it ethically.
 59 | 
 60 | Let us use it collaboratively.
 61 | 
 62 | Thank you for reading this blog post.
 63 | 
 64 | I hope you enjoyed it.
 65 | 
 66 | I hope you learned something from it.
 67 | 
 68 | I hope you are inspired by it.
 69 | 
 70 | Now I have a question for you.
 71 | 
 72 | What do you think about generative AI?
 73 | 
 74 | How do you use it or plan to use it?
 75 | 
 76 | What are your hopes and fears about it?
 77 | 
 78 | Please share your thoughts in the comments section below.
 79 | 
 80 | I would love to hear from you.
 81 | 
 82 | And remember,
 83 | 
 84 | this is not the end.
 85 | 
 86 | This is just the beginning.
 87 | 
 88 | The beginning of a new era of generative AI.
 89 | 
 90 | The beginning of a new era of human-AI collaboration.
 91 | 
 92 | The beginning of a new era of creativity.
 93 | 
 94 | Are you ready for it?
 95 | 
 96 | I know I am.
 97 | 
 98 | Let
 99 | 
100 | import Prompt from "../components/Prompt";
101 | 
102 | <Prompt title="Back to the human" status="info">
103 |   It's impressive how far generative AI models have come. Early last year, they
104 |   weren't really known at all. It was only mainly with OpenAI's advances did I
105 |   really notice the conversation about these things really taking place. And
106 |   over the past year, many other companies have also ramped up work on
107 |   generative AI and started a race to the finish to beat its competitors.
108 |   <br />
109 |   To me, it's an exciting time that also warrants an equal amount of concern. We
110 |   should be welcoming to all these advancements we're seeing, considering how
111 |   much better they'll allow us to be in our own field of work, but at the same
112 |   time there are also implications that have unintended detrimental effects for
113 |   a lot of people as well. It can augment some people's jobs while possibly
114 |   cutting work for others. It can help guide students but also be a source of
115 |   plagiarism.
116 |   <br />
117 |   It still blows my mind that this model is just trained on finding the probable
118 |   next words and picking them while understanding context; it really makes me
119 |   think if a person was behind the page I was at at all. I was heavily
120 |   fascinated but very concerned at how much I depended on this model after such
121 |   little time, coming back to it to ask small questions (I had a whole phase
122 |   with Star Wars recently) or testing it something from my class. If you are an
123 |   avid user, I encourage you to use these models critically and not accept
124 |   things at face value, too. They're still imperfect, just like their creators!
125 |   <br />
126 |   On the other hand, if you think that generative AI is an impending doom, I
127 |   encourage you to explore a different point of view where these models aim to
128 |   help instead of replace. I don't think bots can truly replace humans in every
129 |   way, and I think, at the very least for now, generative AI's a huge work in
130 |   progress (see how the model got cut off at the end?).
131 |   <br />
132 |   What do you think about generative AI?
133 | </Prompt>
134 | 


--------------------------------------------------------------------------------
/posts/hello-world.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Hello, world!
 3 | date: 28 November 2021
 4 | description: An introduction to function() and more about who I am and what I hope to accomplish with the blog.
 5 | tags: meta
 6 | ---
 7 | 
 8 | Hello, world!
 9 | 
10 | This attempt at starting a blog of my own certainly isn't one of my first. If you tried looking hard enough on the Internet, you'd find many different blogs I created in the past on a wide array of platforms. I had little intention and direction for where I wanted to head with my blog back then.
11 | 
12 | Now, though, slowly gaining skills as a developer, I'm more inclined to have a reason to have a blog. To me, it's a wonderful opportunity to share more about my experience about anything. For starters, it may be just for myself — a little repository of tips and helpful messages to pass down to me. But, in the future, perhaps my blog may reach others too. For what it's worth, I hope that this blog will be beneficial one way or another to me and the visitors that come by. (If you're reading this and aren't me, thanks for stopping by!)
13 | 
14 | # Structure
15 | 
16 | Just to have a solid foundation on where I'm headed with this blog, I'd like to set a few categories of posts that I can make. At the top of my head as of writing, these categories include:
17 | 
18 | - learning logs — documenting what I have tried, the reasons for doing what I did, and resources I've referred to while learning. In a way, it's learning in public — a concept I came across recently and came to be fond of;
19 | - experiences — sharing my experience going through or doing certain things, like a particular event or even trying out a new platform or app; and
20 | - code snippets and valuable resources — passing the baton of useful articles, Stack Overflow posts, and more.
21 | 
22 | Of course, this list isn't exhaustive, and I may wish to add more categories if they're appropriate for my blog. I hope you'll enjoy reading each post the way they are, nonetheless!
23 | 
24 | # This blog
25 | 
26 | This blog is built with [Next.js](https://nextjs.org), styled with [Tailwind CSS](https://tailwindcss.com), and deployed on [Vercel](https://vercel.com). The design was intentionally made to replicate the design system from [my website](https://arashnrim.me), so it wasn't too difficult trying to port over a design system previously built the same way over to this project.
27 | 
28 | I've written [another article](https://blog.arashnrim.me/building-my-blog) going through the nitty-gritty of how this blog was made in the form of a learning log. If you're interested in that, feel free to check that blog post out!
29 | 
30 | # Thank you!
31 | 
32 | Thanks for stopping by this blog! This blog is in its early stages, but I hope to continue writing more and refining the blog as I go on. It's definitely more convenient that the source code was written by me!
33 | 
34 | Here's to more blog posts. Thank you once again for stopping by, and come again soon!
35 | 


--------------------------------------------------------------------------------
/posts/in-strive-for-perfection.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "In strive for perfection"
 3 | date: 18 March 2023
 4 | description: Perfectionism has always been with me, and I think it's more a boon than bane sometimes.
 5 | tags: reflection
 6 | ---
 7 | 
 8 | We all should strive to be the best people we can be. To be perfect, in a way. But we also know perfection is an impossibility; it's merely a mirage meant to give us the impression of an ideal, but not necessarily an achievable one.
 9 | 
10 | Realistically, boundaries and restrictions exist that make them impossible—you can't just do anything expecting the best results—and we all have different amounts of perceptions and receptions to that fact. Some are aware, but blatantly ignoring it, and there is the opposite, where I think I lie, where people pay too much attention to that.
11 | 
12 | There's no winner here among the two extremes: if you have your head in the clouds doing things without thinking of reality, you'll quickly succumb to less-than-ideal results; on the contrary, paying too much attention to the fact that you want things to be perfect will only lead you to self-sabotage. Being someone on one extreme, I've noticed how much this over-perfectionistic behaviour jeopardises me in several domains, and I think it's worth talking a little more about it to understand it better.
13 | 
14 | # Writing
15 | 
16 | Writing is a deeply personal activity that I find really interesting. Everybody has their own ways of writing, and we all share stories based on the way we write and how we convey a narrative. Even so, I keep having the feeling when writing that a 'good' piece of writing is poetic in nature. Many of my favourite writers often write with lots of philosophical prose that question the little things in life. They'd have quotes from things they read everywhere.
17 | 
18 | When it comes to my own writing, I've scrapped some articles because I thought that they weren't long enough. Sometimes, I also feel like I haven't thought out enough, even though I've written multiple revisions of the topic scrapped. When starting out, I thought that it did make sense, thinking that I'm cutting away content that 'wasn't good enough', but I now realise that perhaps I've lost track of my purpose in writing. It's also pretty ironic, considering how many people are often fatigued by really long blog posts about a particular topic (seriously, how do people write and think so much?).
19 | 
20 | The bottom line is, there are many, many different ways of storytelling. We might be poetic in nature, using metaphors to give an impression that's deep and revealing to readers. On the other hand, we might spell it out and fall back on the simplicities of language to help us paint a vivid but clear picture. In the end, our own writing styles are what make us unique writers individually. I should try to shed this conception of aiming for more poetic writing just for the sake of it, but rather writing freely in my 'style', whatever that may be!
21 | 
22 | # Projects
23 | 
24 | Projects are a surprisingly complicated deal because of how much I think about the details in them. I notice that there is a somewhat noticeable process when it comes to me creating a project. Roughly, I would:
25 | 
26 | 1. think of a concept and get inspired by the works that other people have done;
27 | 2. think of how to make the idea come to life, starting with a rough prototype.
28 | 3. start to lose interest in the project, staring so much at a blank white frame.
29 | 4. start work for a while, maybe creating the repository and initiating a project.
30 | 5. somehow immediately experience dissatisfaction with the project.
31 | 6. completely disregard the project over time, deleting the repo after one of many repo purges that I do from time to time.
32 | 
33 | This over-perfectionistic behaviour of mine means that, in my head, a lot of things need to be 'good'. This is pretty funny, considering how messy programming is in general and especially in the context of developing stuff. I notice that programming is meant to be filled with imperfections—after all, I'm sure none of us has seen technology work 100% of the time for every person using it—yet I can't shake the feeling in my head that things need to be perfect.
34 | 
35 | I also seem to be micro-managing a lot of things, many of the things which don't even have much of an effect in the grand scheme of things. Believe me, I've thought too long and rubbed too many brain cells thinking about an appropriate Git commit message and spent soooooooo long thinking about whether to switch from using Gitmoji to Conventional Commits (I did, but see? The world didn't end!).
36 | 
37 | I'm looking to fix this by taking my time with projects. Many of my decisions, including that to completely drop projects, are usually made with quick thinking and in the moment. I'm hoping that I'll be able to think twice about committing to dropping a project, considering all the benefits I can get if I do follow through with it. I'd also want to work a bit more on appreciating and understanding that errors are a part and parcel of programming, and an erroneous commit message won't do much harm, or at the very least just cosmetically.
38 | 
39 | # School work
40 | 
41 | I must admit that I think that my over-perfectionism and too much attention to detail can greatly help. It's allowed me to watch for minor details should I want a project to be as perfect as possible, whether basic spelling or grammatical mistakes or a small cosmetic issue. I think in this case, it helps because it doesn't just jeopardise anything yet. It does, however, make me a rather annoying teammate to have (but I don't think anyone I've worked with has thought that!), since I'd have the urge to point out lots of small things. If you're someone who's stumbled across it and is working with me, hope you'll take note of this! :P
42 | 
43 | On the other hand (of course there's the bad side to it), paying too much attention to things can easily make you (and even your team) lose track of the bigger picture, which, especially in assignments and project work here in poly, can be critical. Details don't really matter if the project doesn't adhere to the brief given as part of the assignment! Many of my regrets in past projects were that we spent too much time on the small details such that our vision and goal for the final product didn't really make it in the end.
44 | 
45 | It's still a work in progress, and I think I'll continue learning the more I work with all kinds of people on all kinds of projects. It's an exciting opportunity to learn new things while understanding and correcting the error of my ways!
46 | 
47 | # Perfection isn't everything
48 | 
49 | I need to remind myself that perfectionism isn't really an achievable trait, and I need to set standards for what can be considered 'good enough'. Sure, everyone has their own standards, and, especially in group projects, standards can conflict, but that gives a baseline for what you think is the minimum amount of work that can be done. It gives you a basis to draw the line and say "okay, that's enough for now" and continue on with things.
50 | 
51 | I carry the trait of being perfectionistic both as a boon and bane, and I do see it as both. On one hand, I can be someone who can really pay attention to details and the like, but I can get a little annoying and focus too much on the smaller details. There must be a balance that should be struck, and I'm still trying to figure out what works for me.
52 | 
53 | Thank you as always for reading! :)
54 | 


--------------------------------------------------------------------------------
/posts/my-front-end-stack.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "My front-end tech stack"
 3 | date: 16 January 2022
 4 | description: A little sharing about what I use to write front-end code and build websites circa 2022.
 5 | tags: code
 6 | ---
 7 | 
 8 | My web dev journey thus far hasn't been 'the usual one' — I didn't exactly start out writing code in vanilla HTML, CSS, and JavaScript. Instead, I approached the field via Gatsby, the front-end framework. From there, I wrote most of the front-end code I'm familiar with in JSX (or TSX, if I'm using TypeScript). I researched and came across many ways to style — whether using vanilla CSS, Sass, or a utility framework like Bootstrap — but eventually settled on using Tailwind CSS.
 9 | 
10 | As you can probably tell, I'm probably a little better at writing React than vanilla code. This obviously has some drawbacks: for one, when going back to the basics, I might forget that some abilities are no longer available, and I might have to figure a new way to deal with that. Even so, it's still an exciting way to learn something new. Furthermore, these frameworks often remove the need for repeated code (like always starting with `<html>` per page) to focus on writing content!
11 | 
12 | # My comfortable front-end stack
13 | 
14 | When it comes to a new front-end project, the stack that I always return to include:
15 | 
16 | - [Next.js](https://nextjs.org) — a front-end framework developed by Vercel with support for static-site generation (SSG), server-side rendering (SSR), and even incremental static regeneration (ISR). I'll admit, I don't have the entire framework in my toolbox just yet, but I have the basics covered!
17 | - [Tailwind CSS](https://tailwindcss.com) — a utility-based CSS framework that provides styles accessible by classes. This makes it easier to style inline and handles advanced concepts like screen responsiveness and states so that you don't have to. With their recently-announced (relative to the time of writing) just-in-time update, the support for arbitrary values makes it even better to use!
18 | 
19 | With just these two alone, I can create performant yet beautiful and standardised websites without a large amount of complexity built-in. What's more, with built-in features that vanilla code doesn't implement (e.g., SSG, SSR, and ISR for Next.js; screen responsiveness for Tailwind), it makes writing code much easier!
20 | 
21 | # The general flow of making a website
22 | 
23 | To make it easier to get started, I created my own version of a template (based on the official Next.js template but tweaked it here and there) to help. Snarkily titled "What's Next?", it features a few changes to the original template:
24 | 
25 | - The project is initialised with TypeScript, allowing me to depend on stricter rules to prevent more errors;
26 | - The project is configured with ESLint and Prettier, which work together to lint and format the code;
27 | - The project is configured with Husky to run the lint and format commands during every commit;
28 |   -The `berry` version of Yarn is utilised instead of classic Yarn, though Vercel might take issue with that; and
29 |   Vercel and Linguist (the tool GitHub uses to analyse repository languages) are respectively configured for a better (personal) experience.
30 | 
31 | For more information, feel free to [take a look at my template](https://github.com/arashnrim/whats-next)!
32 | 
33 | Creating a template that's personalised to you is a great thing to have in the long term. Sure, you'll have to manually do the maintenance work from time to time, but it pays off! You can just use it as a template whenever you need to create a website. GitHub directly supports template repositories, and it's convenient to have a "Use this template" button to get started quickly with creating. I'd recommend making one for yourself!
34 | 
35 | From there, I will install and set up Tailwind CSS. Once done, I can jump right into writing content without hesitation or a minute more of setup!
36 | 
37 | # Exploring new frontiers
38 | 
39 | With all that said, is this where my experience with the front end stops is? Definitely not, I'd argue! There's a lot more new things to try out there; some include:
40 | 
41 | - frameworks — a few that I have my eyes on include [Astro](https://astro.build), [Svelte](https://svelte.dev), and [SolidJS](https://solidjs.com); and
42 | - methods — as mentioned in the introduction, I still have yet to be comfortable with vanilla HTML, CSS, and JavaScript.
43 | 
44 | I also still have a long way to go for web development; front-end is just the tip of the iceberg! I'm interested in having a hand at writing back-end code and using databases, writing APIs, and so on. All exciting stuff that I hope to learn sometime soon!
45 | 


--------------------------------------------------------------------------------
/posts/organising-my-website-repository.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Organising my website's repository
  3 | date: 1 February 2022
  4 | description: Learn more about why and how I changed how I organised my website's repository on GitHub.
  5 | tags: learning log
  6 | ---
  7 | 
  8 | My website is currently at its third iteration and has a unique design that I'm comfortable with. Before that, there were two other iterations — made from a boilerplate template from HTML5 UP. I try to make sure that the content in those (even since the beginning) was organised enough and easy to find; I've worked quite a bit to get where I am today with the website!
  9 | 
 10 | # How things were
 11 | 
 12 | With that said, though, I'd argue that the organisation of the websites' source code — that is, on GitHub — weren't exactly that up-to-par as how I'd like it. Initially, since I had to rewrite my website from scratch, I'd figure that splitting the third iteration from the other two in a completely separate repository was the way to go. I'd named the two repositories `website` and `website-archive`; the former held the source code to the current iteration, and the latter the older ones.
 13 | 
 14 | The `website` repository was simple enough. There was nothing much to do but have the source code for the current iteration there. As for the `website-archive` repository, though, that was a little complicated. I had envisioned some form of semantic versioning the different iterations of my website followed — a v1.0, v1.1, then v2.0 for the next iteration and so on. I figured that the best way to make this happen was to split up each version into its own separate branch. This left me with a repository with eight branches; of them, some had entirely unrelated histories with each other.
 15 | 
 16 | # The thought of changing
 17 | 
 18 | The thought of changing the way things had occurred to me when I started thinking that there must be another way to organise the source code. I didn't really want two separate repositories and merged the two into one. A few questions that I had regarding this change included:
 19 | 
 20 | - **How easy will it be?** Considering that some branches had unrelated histories, I'd be concerned if there was a merge conflict of some sort with the files.
 21 | - **Will I lose anything?** I was worried that some files might get overwritten — especially with the first two iterations, where the file names may be the exact same.
 22 | - **How can I retain the semantic versioning of the iterations?** I hadn't had a clue about this when I started, but I soon learned about tagging in Git that does exactly what I hoped it'd do.
 23 | - **Will this mess the details up?** I'd describe myself as perfectionistic; I want to get everything right when I do this. I was concerned about the minor details, like the contributions graph on GitHub and how Linguist parsed the repository's languages.
 24 | 
 25 | It took a while to experiment and eventually get to where things are now. Since this is quite a significant operation with Git, and I'm still learning how to use it better every day, why not create a learning log while I'm at it?
 26 | 
 27 | # Starting to change
 28 | 
 29 | ## Merging histories
 30 | 
 31 | The first thing I had to deal with was merging the different branches. I had anticipated this to be the most complicated bit of the operation. Still, I quickly realised that that wasn't really the case when doing it.
 32 | 
 33 | I began by creating a new orphan branch that starts at a different root:
 34 | 
 35 | ```shell
 36 | git checkout --orphan main
 37 | ```
 38 | 
 39 | The first thing I did was look at the branches available to me.
 40 | 
 41 | ```shell
 42 | git branch -a
 43 | ```
 44 | 
 45 | ```
 46 | * main
 47 |   remote/origin/HEAD -> origin/v2.1
 48 |   remotes/origin/v1.0
 49 |   remotes/origin/v1.1
 50 |   remotes/origin/v1.2
 51 |   remotes/origin/v1.3
 52 |   remotes/origin/v2.0
 53 |   remotes/origin/v2.1
 54 |   remotes/origin/v2-projects
 55 | ```
 56 | 
 57 | That's quite a lot of branches! I figured that the best way to tackle this was to work from the back up — in other words, to work from `v1.0` to the latest version. After a quick `git checkout` — a command to switch between branches — I can get started to `v1.0`.
 58 | 
 59 | I figured the best way to ensure that each iteration was isolated was to have a folder for each version. Seeing that the source code for `v1.0` was all in the root directory:
 60 | 
 61 | ```
 62 | /website
 63 | ├── index.html
 64 | ├── assets
 65 | │   └── ...
 66 | ├── ...
 67 | └── ...
 68 | ```
 69 | 
 70 | I moved all the files into a directory I created named `v1`. Now, the root directory looks a little like this:
 71 | 
 72 | ```
 73 | /website
 74 | ├── v1
 75 | │   ├── index.html
 76 | │   ├── assets
 77 | │   │   └── ...
 78 | │   ├── ...
 79 | │   └── ...
 80 | ```
 81 | 
 82 | This would continue to be the pattern I went for the other iterations. I went ahead and created a commit for this change:
 83 | 
 84 | ```shell
 85 | git add . && git commit -S -m "..."
 86 | ```
 87 | 
 88 | > **A tip or two**
 89 | >
 90 | > The `-S` flag passed onto the `git commit` command signs the commit with a GPG key I set up. This verifies that your commit is _really_ made by you!
 91 | 
 92 | And that was for `v1.0`! Moving on to `v1.1`, I decided to try merging the two branches just to see what might happen:
 93 | 
 94 | ```shell
 95 | git merge v1.1
 96 | ```
 97 | 
 98 | ```
 99 | CONFLICT (file location): <new file 1> added in v1.1 inside a directory that was renamed in HEAD, suggesting it should perhaps be moved to v1/<new file 1>.
100 | CONFLICT (file location): <new file 2> added in v1.1 inside a directory that was renamed in HEAD, suggesting it should perhaps be moved to v1/<new file 2>.
101 | Automatic merge failed; fix conflicts and then commit the result.
102 | ```
103 | 
104 | Huh, this was interesting! It appears that Git noticed that I had moved the files to `v1`. Now that I've added these two new files into `v1.1`, Git suggests moving the new files into the `v1` directory while preserving their location. That's pretty smart.
105 | 
106 | To resolve, I accepted Git's suggestion by adding everything and creating a commit for the change as I've done before.
107 | 
108 | Things were relatively smooth until I reached `v2.0`, where I encountered a slight issue. Since the file names were the same as the previous iteration, Git suggests merging the changes into the `v1` directory. This wasn't what I had in mind!
109 | 
110 | I aborted the merge and moved the `v1` directory to another location to fix this. I then merged the changes; Git recreated another folder named `v1`. This folder, though, had the source code for `v2.0`. I renamed this `v1` into `v2`, then returned the `v1` directory. Now, I had things the way I wanted. Granted, I could've done this in a way better than the way I did, but it works! Now, the root directory looks like this:
111 | 
112 | ```
113 | /website
114 | ├── v1
115 | │   ├── index.html
116 | │   ├── assets
117 | │   │   └── ...
118 | │   ├── ...
119 | │   └── ...
120 | ├── v2
121 | │   ├── index.html
122 | │   ├── assets
123 | │   │   └── ...
124 | │   ├── ...
125 | │   └── ...
126 | ```
127 | 
128 | The merging of the other `v2.*` branches continued as usual. Git picked up that the `v2` directory was more similar to them than `v1`, so started suggesting that directory. How neat!
129 | 
130 | ## Combining `v3.0`
131 | 
132 | This deserved its own category since it involves connecting the `website` repository and pulling. I'd done this before, so I was a little familiar with it. Nevertheless, I was still a little hesitant just in case things went awry.
133 | 
134 | First, I added the `website` repository as a different remote; that way, I'll be able to fetch and pull from there:
135 | 
136 | ```shell
137 | git origin add current https://github.com/arashnrim/website
138 | ```
139 | 
140 | Afterwards, I fetched the remote and made checked out a branch:
141 | 
142 | ```shell
143 | git fetch current
144 | git checkout -b v3.0 current/main
145 | ```
146 | 
147 | Now that the `v3.0` branch is created, I can merge the changes the same way I've done before. The only difference is that the files of this are different (since I made this iteration from the ground up with Next.js). This means that Git probably won't associate these files with the `v2` directory, so I'll just move them over into `v3` quickly.
148 | 
149 | Afterwards, to clean up, I can delete the `v3.0` branch and the `current` remote:
150 | 
151 | ```shell
152 | git branch -d v3.0
153 | git remote remove current
154 | ```
155 | 
156 | ## Tag, you're it!
157 | 
158 | I posed a question to ask how I might still incorporate the semantic versioning thing, and someone recommended Git tagging. Thanks to them, I took a look at that!
159 | 
160 | I first began by collecting the commit identifiers of the last commit for each version. Afterwards, I created a tag by pointing to these commits:
161 | 
162 | ```shell
163 | git tag -s <version number>
164 | ```
165 | 
166 | Once I've created the tags, I can push them to GitHub. Since I use the `fish` shell, I can use its `for...end` operator to loop through each tag. How neat!
167 | 
168 | ```
169 | for tag in (git tag)
170 | 	git push origin $tag
171 | end
172 | ```
173 | 
174 | # The result
175 | 
176 | The result now is [the repository you see today](https://github.com/arashnrim/website)! All the commits have been combined into a singular branch. Since `main` is set as the default branch, a bonus is that all these commits appear in GitHub's contributions graph.
177 | 
178 | It's neat that [the tags](https://github.com/arashnrim/website/tags) are also prominent, and you can simply download a copy of the source code from the point of the commit.
179 | 
180 | # Conclusion
181 | 
182 | Case in point: is this the best way to do things? Probably not. At the time that I did this, though, it did make sense to do what I did. It's essential to learn and grow from the things you do — experiences and mistakes alike — so I think it's appropriate that this is a learning log!
183 | 
184 | This post sure was technical, but I'm interested to hear what you think! If there's anything better to be done, my email or the feedback form below is always open. Thank you for reading if you've come this far!
185 | 


--------------------------------------------------------------------------------
/posts/reflections-from-a-liminal-space.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Reflections from a liminal space"
 3 | date: 11 April 2022
 4 | description: I've learnt a lot in the months between education stages. Read more about the reflections I've had along the way.
 5 | tags: reflection
 6 | ---
 7 | 
 8 | <Prompt status="warn">
 9 |   The post ahead is sensitive and personal in nature. I hope to seek your
10 |   understanding; I am another human at the end of this!
11 | </Prompt>
12 | 
13 | These past few months have been quite a surprising turn of events; perhaps me a year ago wouldn't have anticipated it either. Whether it's getting a surprisingly satisfying score for the O-Levels or participating in several tech-related events, or maybe even getting an internship and more self-growth, there's so much about myself that I've learnt these past few months.
14 | 
15 | I wish to describe this period of time — between the start of poly life and the end of secondary school life — as a liminal space. Not exactly the uncanny images you'd find on the web, but it still fits the description of being transitional; in between places. In this case, I want to reflect and think more about what's happened these past few months. I'll try to be chronological, but what's more important is what was felt and how I've grown since then.
16 | 
17 | ## On my first jobs
18 | 
19 | Before the year started, I had an attempt at a job — a glamping one, which paid well. As embarrassed as I am to say it, I went for one shift and didn't consider applying for any more after learning about how strenuous it was. Both physically and mentally, I was exhausted by the end of the day. I couldn't be sure I could handle any more shifts like this.
20 | 
21 | The idea of reaching out for an internship hasn't crossed my mind until before the job, and even then I considered it an alternative or a backup plan if this job didn't work. Since it didn't, I acted on my contingency; nervously and awkwardly reaching out to someone I knew, I asked if there was an opening where I could work as an intern. Compared to the glamping gig which paid well, I wanted to focus more on the experience of working at a company. What is it like to work at a place where education and technology intersect?
22 | 
23 | A few months later, a week after my last week working, I've realised a lot of things; both good and bad, of course. I've met many wonderful people in my time working as an intern, and I was glad I was able to make almost weekly visits to the office (which, for the record, is pretty neat). At the same time, I felt like a stranger out of my own shell. For one, I constantly experienced feelings of inadequacy and faced a crippling imposter syndrome. I was definitely underdeveloped in my knowledge and merely only played around with the code. I hadn't done much compared to what the previous intern had done in a month or two. I also felt like I had several awkward encounters — in particular with my direct higher up. Whether it's unexpectedly coughing in his face or not understanding concepts, I felt like I wasn't meant to be there at all.
24 | 
25 | For what it's worth, it didn't change the fact that I had been there at one point in time. I did help out a little — at least, to the extent my skill sets at the time could do. I was intrigued at how strong the dissonance was in my head – voices speaking over each other that I wasn't good enough — to the point where I often procrastinated on work. Even when I was supposed to be working remotely, I realised I had spent a lot of time doing a lot of other things. I didn't want to look at the code because I'll feel worse. I wonder if, moving on, I'll eventually get to tame this abnormal behaviour?
26 | 
27 | ## On my O-Level results
28 | 
29 | The day of my O-Level results couldn't have fallen on any other day — it coincidentally fell on another important date. I boasted about how the day felt like a full-circle moment for me. From having the inauguration ceremony on the same day as a Sec 1 student to receiving my results on the same day four years later, it's a little funny how I don't believe in fate as much as I do.
30 | 
31 | I was pleasantly surprised with what I scored, and just like other events that happened last year it felt surprisingly normal. I was expecting a climactic and emotional tear-filled monologue on how much I've grown and how proud I should be of myself, but instead I feel nothing much. How anticlimactic! I have to say, though, seeing the reaction of my family made me realise how much I have made them proud. That is to say, they were just as surprised as I was receiving the more-than-great news. I won't know if there'll be more moments like these to come, but this should be all the more reason why I should give things my best shot anyway.
32 | 
33 | ## On growing out of my shell
34 | 
35 | I think that there's still a long way when it comes to developing myself. My social front is the most concerning; sometimes, even mustering the courage to speak up remains an inner battle. I realised, though, that I've done quite a bit in these past few months — from something as small as being able to send a message without asking anyone to press the send button to something as unprecedented as taking part in an event alone, I've grown a lot.
36 | 
37 | Introversion remains both a blessing and a curse to someone like me. I remain ambivalent about introversion. I look up to and idolise my friends who are outgoing and extroverted, yet am comfortable sometimes remaining where I am. I do feel, however, an ever-growing presence of a tug somewhere in my mind: I want to try to be more extroverted. I realised that I've handicapped myself of a lot of opportunities the past few years, and the main attribution to that is introversion. It's not to say that introversion is bad, but in certain situations where it can be binding, I feel irritated.
38 | 
39 | Trying to grow out of my own shell is a continuous and ongoing journey that may never even have an end. I can try my best, or not at all, and I'll still be somewhere on the spectrum of the introvert-extrovert scale. I've tied my tongue so many times over unexpected and overwhelming anxiety when it comes to doing the most menial tasks, and I doubt that might change any time soon.
40 | 
41 | That isn't to say that I haven't grown at all, though. I feel like I've changed a lot. I'm a little better at giving presentations — that is, when it's planned well — and I would say that I'm getting better at interacting with people. I'm okay with where I am now, and even though looking at other people who are way better socially can break whatever mood I have for the day, maybe that's enough for now.
42 | 
43 | ## On grieving lost relationships
44 | 
45 | The past year has shown me the depths of my mental health, and among the reasons included the fact that I was grieving over lost relationships. This concept is pretty new, and I've gotten it after reading [Blank: Why It's Fine to Falter and Fail, and How to Pick Yourself Up Again](https://openlibrary.org/books/OL32678609M/Blank) earlier this year. I find it fascinating yet logical; we grieve those who are gone forever, and isn't parting ways with someone similar to that?
46 | 
47 | I first felt this grief near the end of my time in my <dfn><abbr title="co-curricular activity">CCA</abbr></dfn> in school. A friend and I usually had a little pocket of time after the CCA — when climbing up three floors — to talk about whatever's happening. I looked forward to that always. For me, it was something stable; the calm before the storm; a comfortable moment with someone I trust. We'd talk about anything, and though I forget what we'd talked about, I still remember the feeling of being alone with just him and talking without needing to care about anything.
48 | 
49 | It could be just a one-sided thing, but I for one genuinely enjoyed our conversations. I knew, though, that they have to end someday; the beginning of the end came quickly. After our last CCA session, we haven't been talking as frequently as before, and I suppose it still hurt.
50 | 
51 | Things got worse nearing the O-Levels period, when everyone's expected to focus on themselves. I drowned in stacks of papers, as if quantity yielded a guarantee that you'd do better. Friend groups around me maintained, yet I felt like I was slipping from everyone.
52 | 
53 | Today, I still am grieving these relationships. I talk to some friends and think of them so highly. I wonder if that's an illusion I've subconsciously put up; to fool myself into thinking that if I'd praise the people I want to remain close with enough, they'd still care to remember me?
54 | 
55 | ## On jealousy
56 | 
57 | Envy hasn't been a stranger in my head; it dates back quite a while. Its almost tide-like behaviour comes as swiftly as it goes. It feels like a twang in my brain, then a heavy and constricted sensation in my chest. I don't mean to be envious, but now more than ever have I realised that maybe envy is just a natural human trait after all. It's okay to be envious; what you _do_ with envy plaguing your mind may not.
58 | 
59 | My biggest battles lie in the looks. Looks are subjective, and yet to me they are seemingly a lot. Someone I find good-looking can immediately shatter the mood I have, and I've been meaning to take a look and understand why that is the case. I haven't gotten the chance to come closer to the truth, but I know for sure that envy brews whenever people like these are on the scene. I am, however, aware that looks shouldn't be everything, but it can be difficult to change a subconscious thought than a conscious one.
60 | 
61 | Another lies in performance. Everyone performs up to their own capabilities, and yet I still find myself comparing myself to others in terms of performance. I'd argue that my class was one of, if not the most, competitive class academically. There was a certain clique of students who were stellar beyond words — chairpersons of student leadership boards, never falling below a high A, and had social lives that boasted easy-going conversations with just about anyone. It hurt a lot to be side cast in a way. It took me a long time to realise that the hurt was jealousy.
62 | 
63 | I think that jealousy is something I'm still trying to navigate around. It's a feeling that I've felt for a long time, yet only recently defined. I like to think that I don't wish the worst of people — even those I'm envious about — but would rather learn more from them to try and reflect some of the traits they have in my own way. It's still a work in progress, and I doubt I will a comfortable spot regarding envy soon; that's okay, though, as I'll be continually learning something about myself!
64 | 
65 | ## On self-deprecation
66 | 
67 | My relationship with self-deprecation is long-standing, and I am only beginning to be aware of the times I've employed it. Whether it's to fool myself into thinking that doing so would make someone remember me for longer, or to joke around to make others feel better, I realised that I've conditioned myself to it. I no longer have to think about self-deprecating; the words leave my mouth before I could think twice. The sinking feeling of adding salt to my own emotional wounds has become an uninvited familiarity.
68 | 
69 | It hurts differently each time, and in varying amounts. The pain could be instant, like a whack on the face. Others, like the ones that hurt the most, happen when I lay in bed and overthink everything. I evaluate my worth only to find nothing. I shouldn't be surprised considering I constantly reduce myself to nothing, but why did it still hurt? Why did I do this to myself?
70 | 
71 | I realise that self-deprecation is a tricky thing. To call it completely useless and bad is too much, yet it also doesn't take a lot to realise that it isn't good, either. It's something that, when used in moderation, can be helpful to one's growth. I just happen to use it _too_ much, and the greater consequence of that is the fall of the self-esteem and self-confidence I have in myself.
72 | 
73 | I shouldn't handicap myself by using self-deprecation as a reason behind who I am, but in some way that is partially the truth. With that said, I shouldn't try to make it an entire truth, either. There's more to me that I might think, and if many people see it, then it must be true. I strive to show more on what's on the inside than outside; I hope to live with transparency, knowing that I speak my truth instead of lying behind words. There's still a long way to go before I can even begin to think of being transparent, but I like to think that it's in the works anyway.
74 | 
75 | ## Conclusion
76 | 
77 | I like to think that the thoughts put across in this post are incredibly raw. I feel partly embarrassed by some of these thoughts — especially the ones on envy — but I think that it's an important step for transparency and self-growth. This, of course, is a fairly redacted version of the original stored somewhere else, and I think that constant reflections like this really get you to sit down with yourself and evaluate who you really are and what you can work on.
78 | 
79 | This method of reflecting definitely takes time, and the benefits it bring definitely differs from person to person. For what it's worth, though, writing down your thoughts can help to consolidate your feelings. When you read your words again at another time, perhaps you may realise certain things that you were blind to see when you wrote it in the first place! If you've read this far, thank you for sharing a piece of my thoughts. I hope that this inspires you, in some regard, to self-reflection and some introspection on your part. It doesn't hurt, and maybe you'll learn something new about yourself in the process!
80 | 


--------------------------------------------------------------------------------
/posts/social-media.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Social media: a catch-22"
 3 | date: 3 February 2022
 4 | description: I explore the idea of social media, being in it, and leaving it as a teenager.
 5 | tags: reflection
 6 | ---
 7 | 
 8 | Social media has become a staple in everyday life with the internet. We heavily rely on it for just about anything — whether it's maintaining connections with people, entertainment through memes, or spreading important news. There are spaces and communities for just about anything you're passionate about, so at first glance, social media really does have a utopian aspect to it at its inception.
 9 | 
10 | Over the years, though, we've seen how social media has the power to change things negatively, not just at the individual level but also possibly affecting countries and the entire world. I used to be an avid social media user in my early teenage days. Everyone around me was signing up for Instagram when I had a Windows Phone in my hand. I recall being agitated that there wasn't an Instagram app for it for a few years when everyone else on other platforms had. Now, though, I'm somewhat cautious and have conflicting feelings regarding it. Sure, it provides many benefits that I think are nice to have as a teenager. Still, there are some detriments that I believe outweigh the benefits.
11 | 
12 | I'm not writing this to justify why you _shouldn't_ be using social media — I think many other sources can help you make your mind up. I'm here to share a little about my experience with social media and whether I might consider joining social media again. I tried joining Twitter at the start of the year but deleted my account just after a week or two; I'll explain more about that later on, too.
13 | 
14 | # Joining social media
15 | 
16 | When I first joined my first social media platform, Facebook, most things weren't really in my hands. I remember one of my parents creating an account for me, justifying that "I might need it in the future." I recalled us sitting in the living room and discussing the password and email address to create the account. It was only until a few years later that I truly started to understand what social media could be used for: memes, seeing what's up with friends, and skipping time.
17 | 
18 | Things started out fine, just like how things usually go. I actually enjoyed social media — it gave me a little pocket of time just to myself, laughing at whatever memes came up or looking at what's new with my friends. It felt a little thrilling that you somewhat got closer to people by seeing what they post on their social media pages. I mainly used Instagram the most, with Facebook hardly used and Twitter practically not touched.
19 | 
20 | While I had some fun, it didn't take long, especially as I began my secondary school years, for me to realise that social media had started to take a toll on me.
21 | 
22 | # What could possibly go wrong?
23 | 
24 | I'll admit, my secondary school experience might not be exactly what most other students from Singapore experience. My school, in particular, had a few privileges that most neighbourhood schools do not have — the requirement of a personal device (though this changed in 2021) for learning, a somewhat different curriculum, and generally more facilities. Many students in the school came from well-off backgrounds — usually the middle-to-high-income groups — and they could afford to have a lot more things than I could.
25 | 
26 | It isn't to say that I'm not appreciative of the things I have, but seeing how they shone with all they had sometimes made me forget what I have. I buckled under an inferiority complex, often wishing that I had what they had. Social media made the problem worse: it took me quite a while after leaving social media that people usually only put the best moments of their lives up there. Looking through my Instagram feed, I kept wondering why things couldn't be as enjoyable as others' lives.
27 | 
28 | Granted, the root of the issue of this inferiority complex isn't just caused by social media. It's a multifaceted issue with a lot of complexity around it, and I'm still trying to wrap my head around it while going through it at the same time. Knowing that social media might continue deteriorating my self-esteem, I decided to leave it sometime in Secondary 2.
29 | 
30 | # The fear of missing out
31 | 
32 | I still wonder if I did the right thing for myself by leaving social media. Not being part of the whole thing allowed me to look at it from another angle — particularly how we're all hooked up to it, almost like an addiction, and the privacy implications of social media today. On the other hand, I have a significant feeling of missing out since I couldn't really interact with my friends and classmates beyond our time in school.
33 | 
34 | I realised quickly how much I've depended on social media, both as a time-waster and a connection-establisher. Sure, I know a little about my friends here and there. Still, I couldn't get as up close and personal to them without social media — most would usually share what's happening through a quick Instagram story or two, and I missed out on that.
35 | 
36 | On the other hand, though, I realise that I've adapted over the years without social media to focus on other things. In particular, I've spent a lot of time coding since 2020 and began reading more books. I like to think that I've gotten to see my school's librarian a lot more than many students. I realised that I couldn't precisely quit 100% of social media since I needed to use a little of it for communication (via WhatsApp, Telegram, and Signal) and entertainment (via Reddit). Beyond that, though, nothing much at all.
37 | 
38 | # The catch-22 of social media
39 | 
40 | Now that I've completed my O-Levels, I have quite a lot of time to myself. I realise that I don't really want to lose touch with the friends I've made here in secondary school; I recalled how I've lost touch with practically all my primary school friends, and I didn't want the same thing to happen again. Another reason I'd like to join social media back again is to grow a name for myself. Many developers have done that through Twitter, and I want to try to make a name for myself by pushing my boundaries.
41 | 
42 | Therefore, the thought of joining social media again keeps creeping into my mind; should I do it, or is it still detrimental to me? It almost feels like a catch-22 situation: I want to use social media to help grow a name for me in the developer space and allow me to keep in touch with friends, but by using it, my feelings of inferiority are at an all-time high using it, and I want to quit.
43 | 
44 | This dilemma is difficult for me to face, and I tried experimenting by creating a Twitter account at the start of the year. It didn't last long, though. I realise that I've kept excessively going back to it when my mind wanders off. Every notification got me on my heels since it indicated a possible follow, retweet, reply, or like. I loved and hated the feeling of anticipation since this was the exact same feeling that eventually led me to tie self-worth to likes. Old habits die hard, I guess.
45 | 
46 | # So, what now?
47 | 
48 | I don't actually know what to do about the whole social media thing. If I were to join again, I think I'd want to have a careful approach to it. But considering my old habits of constantly checking, I doubt that that might work. I'm a little unnerved by the (lack of) privacy on Meta products (though, it's probably ironic saying it since I heavily depend on WhatsApp), so I'll probably avoid those for now, too.
49 | 
50 | I hope that I'll have a clearer space of mind soon enough to make a decision. When it comes to social media, I believe that I'll need a few things to prepare myself from crumbling:
51 | 
52 | - self-esteem and self-confidence — that way, no matter how others flex their lives, I can still appreciate the things that I have;
53 | - a sense of control — being able to restrict my usage of social media such that I don't overuse or grow over-dependent on it; and
54 | - a clear purpose — so that I know what I'm using social media for.
55 | 
56 | For what it's worth, social media still has a lot of benefits, especially to a teenager like me in the digital age. It allows me to keep in touch with friends, meet new people, share interesting things I find, and many more good things. At the same time, I find it a secret enemy that I hadn't anticipated without self-assurance. Social media truly is a double-edged sword, and until I weigh the pros and cons properly, I think it's for the better of me to stray away from it a little longer.
57 | 


--------------------------------------------------------------------------------
/posts/taking-part-in-intuition-v8.0.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Taking part in iNTUition v8.0
  3 | date: 1 March 2022
  4 | description: Learn more about my experience going through iNTUition v8.0, a hackathon, and my lessons through it.
  5 | tags: experience
  6 | ---
  7 | 
  8 | I recently took part in [iNTUition v8.0](https://intuition.ieeentu.com), a hackathon run by the IEEE NTU Student Branch. It was quite a fun experience and definitely the first hackathon where I truly felt like I was going through 'the hackathon experience'. Whether it's staying up late till the following day or, surprisingly, achieving Best Pre-University Hack, this hackathon was quite a learning journey for me.
  9 | 
 10 | There were a few things that I got to learn while working on our project, _[feducia](https://devpost.com/software/feducia)_. Sure, some of these things may be conditional and situational. Still, I like to think that these lessons can generally be applied to many other things. Some things I've learnt here include:
 11 | 
 12 | - looking out for other teammates;
 13 | - enjoying the platforms provided;
 14 | - streamlining the experience where possible;
 15 | - adapting and improvising on the go;
 16 | - casting doubt reasonably and ignoring self-sabotage;
 17 | - taking breaks throughout the session; and
 18 | - persisting to the end.
 19 | 
 20 | Let's take some time to take a look at each point. It's an excellent opportunity for me to reflect on all that's happened, anyway!
 21 | 
 22 | ## Looking out for other teammates
 23 | 
 24 | My teammates' experience may not have been the best in this hackathon. Two of us had conflicting schedules, which required them to be unavailable for a significant part of either day the hackathon ran. Additionally, they also weren't as experienced in working on front-end code. This posed a little challenge for our team, as we needed all hands on deck where possible. There may be lots to do in such little time in events like these!
 25 | 
 26 | I spent some time going through with one teammate the basics of writing code in my framework of choice for the front end, [Next.js](https://nextjs.org). As [JSX](https://reactjs.org/docs/introducing-jsx.html) is at the core of Next.js, I went through the basics of guiding him through HTML tags and also helped introduce styling with [Tailwind CSS](https://tailwindcss.com). We worked together and managed to get off to a great start! Eventually, when I moved to write code on the back end, he could get things working and build the front end precisely as we'd designed previously on [Figma](https://figma.com). When the other teammate returned, he could even teach the basics!
 27 | 
 28 | An important reminder is that a part of hackathons is to learn something. In this case, I'm glad that my teammates got introduced to writing a little bit of HTML (and not!). At the same time, I've learnt this vital lesson to look after all your teammates. As much as possible, anyway!
 29 | 
 30 | ## Enjoying the platforms provided
 31 | 
 32 | iNTUition v8.0 introduced a virtual space where interaction with other hackathon-goers and sponsors can take place. There were a few fun 'places' to be, including an arcade, sponsor buildings, and a hacker arena. There were also a few additional features like a universal jukebox and emotes. We had some fun in using the emotes!
 33 | 
 34 | <figure>
 35 |   <img
 36 |     src="images/taking-part-in-intuition-v8.0/001.gif"
 37 |     alt="Two virtual avatars backflipping and flossing simulatenously"
 38 |   />
 39 |   <figcaption>
 40 |     The totally cool and epic emotes available in the virtual platform includes
 41 |     a backflip and ...flossing?
 42 |   </figcaption>
 43 | </figure>
 44 | 
 45 | One regret that I probably had was that I didn't get the chance to use the platforms the organisers had planned for this event. Sure, I did log in a few times a day — and maybe a time or two in the early morning — but I didn't really do anything much, unfortunately.
 46 | 
 47 | Other events happened during the hackathon — mainly sponsored segments. Looking back, it would be great if I had taken some time to participate in some of them! Granted, I probably didn't have the time to, but it would be a nice-to-do to make use of the opportunities given and planned by the organisers.
 48 | 
 49 | ## Streamlining the experience
 50 | 
 51 | Before the hackathon took off, I got the idea of possibly using [VS Code's Live Share extension](https://code.visualstudio.com/learn/collaboration/live-share) to streamline our coding experience. Assuming that one of us had nothing to begin with, trying to get started involves the following steps:
 52 | 
 53 | 1. Installing Node.js and VS Code
 54 | 2. Setting up and configuring Git
 55 | 3. Cloning the repository from GitHub
 56 | 4. Making changes
 57 | 5. Committing the changes to the repository
 58 | 
 59 | I doubt that there was much time to speedrun through the concepts of Git and GitHub in a hackathon, so I opted to use the Live Share extension. In short, the extension allows me, a central source, to share the workspace I have open to anyone with a link. We'll be able to view, edit, and, surprisingly, even share servers (sharing `localhost:3000` and `localhost:5000` was astounding!) while acting independently of each other.
 60 | 
 61 | With VS Code's Live Share extension, the experience was streamlined, and much wasn't needed to get things working:
 62 | 
 63 | 1. Installing VS Code and the Live Share extension
 64 | 2. Connecting to the shared workspace
 65 | 3. Making changes
 66 | 
 67 | After everyone's made changes, I can create commits and credit everyone for their contribution to the code as well. I learnt of the `Co-authored-by:` trailer, which allowed me to create a commit with multiple committers!
 68 | 
 69 | <figure>
 70 |   <img
 71 |     src="images/taking-part-in-intuition-v8.0/002.png"
 72 |     alt="Example of GitHub parsing the Co-authored-by trailer by four committers"
 73 |   />
 74 |   <img
 75 |     src="images/taking-part-in-intuition-v8.0/003.png"
 76 |     alt="Example of GitHub parsing the Co-authored-by trailer by two committers"
 77 |   />
 78 |   <figcaption>
 79 |     GitHub parses commits with multiple committers in a pretty neat way.
 80 |   </figcaption>
 81 | </figure>
 82 | 
 83 | ```
 84 | git commit -m "Commit message
 85 | 
 86 | Co-authored-by: Author Name <author@example.com>"
 87 | ```
 88 | 
 89 | Another way is to accredit a different author, but commit it as yourself. I found it pretty interesting that doing that was possible!
 90 | 
 91 | <figure>
 92 |   <img
 93 |     src="images/taking-part-in-intuition-v8.0/004.png"
 94 |     alt="Example of GitHub parsing a different author and commiter"
 95 |   />
 96 |   <figcaption>
 97 |     GitHub parses commits with a different author and commiter in a pretty neat
 98 |     way too.
 99 |   </figcaption>
100 | </figure>
101 | 
102 | ```
103 | git commit -m "Commit message" --author="Author Name <author@example.com>"
104 | ```
105 | 
106 | ## Adapting and improvising on the go
107 | 
108 | I admit, there are a few hiccups that happened throughout this hackathon. There were a few that still stood out to me:
109 | 
110 | - being unable to submit our submission on time; and
111 | - recording our submission video.
112 | 
113 | We managed to find a way to work around the problem (well, for the first, we solved it by submitting it as soon as possible). We suffered many unexpected technical difficulties when trying to record our demo video. From transferring to the wrong wallet (whoops on my end!) to painstakingly long loading times to unresponsive screen recording software (thanks, QuickTime...), everything that could've gone wrong did go wrong.
114 | 
115 | We still had to continue working to submit, though, so we tried to think of ways to work around it! To tackle how to record internal audio (our plan was for one person to speak through Discord and my computer recording the audio and screen), a teammate used his external microphone while I recorded my screen on my end before combining the two. I quickly looked for an alternative (thank you, [Kap](https://getkap.co), even though you were also a little messed up!) to replace QuickTime for unresponsive screen recording software.
116 | 
117 | ## Casting doubt reasonably and ignoring self-sabotage
118 | 
119 | It's important to note the fine line between valid doubt and self-sabotage. These two were heavily apparent when going through the hackathon. To me, valid doubt is **something that can be beneficial for the team** — for example, if you're uncertain if something can be done by the end of the hackathon, it's better to raise your concern for it. On the other hand, self-sabotage is **behaviour that can divert yourself and your team away from a good state**.
120 | 
121 | Sure, there were some times when I was genuinely concerned about the feasibility of our idea — this appears to me now as valid doubt. We wanted to integrate many things at once, and I was unsure about the grandiosity our idea seemingly had in paper than in a practical sense. On the other hand, when we experienced difficulties recording our demo and submitted it late, I was hesitant to continue — even unsure if I wanted to show up for the judges' evaluation. That, to me, felt like self-sabotage.
122 | 
123 | It's great to monitor your own behaviour and watch out for self-tripping opportunities. At the same time, in the moment, it's hard to. To me, though, the best way is to at least look back and note the mistakes you made! You don't necessarily have to make an effort to fix it — after all, it might not be as easy — but you shouldn't completely ignore what happened either!
124 | 
125 | ## Taking breaks throughout the session
126 | 
127 | I highly doubt many people can keep doing something for 24 hours straight. Especially with code, where our eyes are practically glued to the screen for the entire day, it's essential to take breaks once in a while! Just because it's a hackathon doesn't mean you don't have to take care of yourself.
128 | 
129 | My team took three breaks in total, and in hindsight, I feel like we should've implemented more. The first was a lunch break from 12:00 p.m. to 12:30 p.m. on the first day. The second was a dinner break from 6:30 p.m. to 8:15 p.m. on the first day. Finally, the third was a nap break from 6:00 a.m. to 7:00 a.m. the next day.
130 | 
131 | <figure>
132 |   <img
133 |     src="images/taking-part-in-intuition-v8.0/005.png"
134 |     alt="A Discord window showing the chat history throughout the hackathon"
135 |   />
136 |   <figcaption>
137 |     Two of us continued to work until the early morning on our project.
138 |   </figcaption>
139 | </figure>
140 | 
141 | We called for the breaks whenever we felt like we needed them. I found the nap break to be the most interesting since we were somehow able to get into the flow at 3:00 a.m. and not feel fatigued when working. It was only when we encountered hilarious bumps — like wondering why the code hasn't changed when we haven't saved! — that we decided to call for breaks.
142 | 
143 | In line with taking looking out for your teammates, remember to take breaks often and give the team ample rest!
144 | 
145 | ## Persisting to the end
146 | 
147 | In line with what I mentioned in the section about self-sabotage, I was genuinely disappointed in myself when we couldn't finish in time (for non-penalty submission). I was on the verge of giving up, disappointed that the work we'll give will have the additional penalty of late submission. I was blind to see that doing so meant discarding more than 12 hours' worth of our work, and that isn't good at all!
148 | 
149 | Once something is done almost to the end, we might as well work a little more on it to reach the end. Even with self-sabotage present, I didn't exactly do anything to stop whatever we were doing. That's good, I guess! It's important to remember that the work you did — for me, especially in a hackathon — is worth hours of hard effort you and your teammates put in. Even if you don't have anything much, it doesn't hurt to share what you've made — that's the spirit of hackathons, anyway!
150 | 
151 | ## Conclusion
152 | 
153 | <figure>
154 |   <img
155 |     src="images/taking-part-in-intuition-v8.0/006.png"
156 |     alt="Our project, feducia, presented as Best Pre-University Hack"
157 |   />
158 |   <figcaption>
159 |     Our project, feducia, presented as Best Pre-University Hack!
160 |   </figcaption>
161 | </figure>
162 | 
163 | I was genuinely baffled at how we managed to achieve Best Pre-University Hack in this hackathon. There were many cool and exciting projects made by other people out there. As a mere individual joining the hackathon in the liminal period between secondary school and polytechnic, I felt like there was no chance at all.
164 | 
165 | For what it's worth, hackathons aren't necessarily about the wins. It could be about learning something new, getting to build something with your friends, tapping into your team's potential with everyone playing their own strengths, and so much more. Hackathons aren't just events for making; they're also for socialising!
166 | 
167 | I regret that I hadn't taken part in some of the social aspects of this hackathon. Whether interacting with people through the virtual platform created or joining the prepared networking session, I felt like I should've entered more things during the hackathon instead of merely focusing on code.
168 | 
169 | If you're someone up to participate in a hackathon, take this advice with a pinch of salt! Go out there, code something cool (to you!), and interact with your team and others while you're at it. Thanks for reading!
170 | 


--------------------------------------------------------------------------------
/posts/taking-part-in-polyfintech100-api-hackathon-2022.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Taking part in PolyFinTech100 API Hackathon 2022
 3 | date: 25 September 2022
 4 | description: Learn more about what I've learnt from this year's iteration of the PolyFinTech100 API Hackathon.
 5 | tags: experience
 6 | ---
 7 | 
 8 | The PolyFinTech100 API Hackathon is a yearly fintech-oriented hackathon that aims to nurture fintech talent to meet the rapidly-changing needs of the financial services sector. First conducted in 2018, this year's hackathon presented problem statements under six distinct categories: the creator economy, decentralised exchange, eco-payments, gamified finance, insurtech, and regtech.
 9 | 
10 | My group took part in this hackathon under the gamified finance category. While (spoiler alert!) we didn't make it to the top three, it wasn't exactly our intention to clinch the top positions either. Coming with practically no experience or knowledge about the fintech industry, we simply wanted to test the waters and expand on what we know by taking part in this hackathon.
11 | 
12 | ## The problem statement
13 | 
14 | From the beginning (sometime in April), we were given a brief about the category that we picked alongside additional workshops (one on APIs and the other a category-specific one). For gamified finance, the following was our problem statement:
15 | 
16 | > Design and innovate a blockchain-based fintech application that incorporates Web3 and gamification.
17 | 
18 | Web3 is a whole can of beans that I was, and probably still am, not prepared to open. It involves concepts that still remain incomprehensible to me; I was barely grasping the very idea of what NFTs are, for instance. [While I did work on a Web3 project before in another hackathon](/taking-part-in-intuition-v8.0), I still wasn't sure what I did then.
19 | 
20 | My group comprised of two students (including me) from the School of Infocomm Technology and the remaining two of us were from the School of Engineering. Quite ironically, the students from engineering had a greater grasp on what Web3 was in general; to be frank, I'm still trying to wrap my head about some concepts.
21 | 
22 | ## Our project
23 | 
24 | Our project aims to combine idle tapping with rebating in cryptocurrency. Named beNFT, the idea was that we would work with local merchants and create in-game bosses, of which players would work together to defeat (since the boss has high health).
25 | 
26 | To enhance their character with upgrades, players can spend at the merchant's physical stores and get in-game currency in exchange (which could then be used to upgrade their character). We planned for there to be a tiered system to prevent those who spend the most from monopolising the entire game.
27 | 
28 | Once a boss is defeated, the top players will be rewarded from a prize pool in the form of cryptocurrencies. In addition, randomly-selected players are chosen to receive parts of the boss as NFTs. From there, players can sell and buy these NFTs and assemble full bosses; they will then serve as additional perks and help the player deal additional damage to future bosses.
29 | 
30 | Somehow, our idea (I must admit, ideation of which was heavily carried by the remaining three members) earned us a place as finalists; we were one of 13 remaining teams in our category that stood the chance to be the top two teams that will make it to the _final_ finals.
31 | 
32 | <figure>
33 |   <img
34 |     src="images/taking-part-in-polyfintech100-api-hackathon-2022/001.jpeg"
35 |     width="50%"
36 |     alt="Three messages on the screen, one from a team member named Evan and two from me. Evan replies &quot;HUHHHH&quot; to a screenshot saying &quot;Thank you for your participation in the 2022 PolyFinTech 100 API hackathon, and being shortlisted as among NP teams to progress to the solution clinics to prepare for the upcoming category finals in Sep!&quot;. I reply with &quot;wait what&quot; and &quot;I had no idea of being shortlisted lmfao HAHAH&quot;."
37 |   />
38 |   <figcaption>
39 |     A little screenshot of our reaction to fully show how surprised we were.
40 |   </figcaption>
41 | </figure>
42 | 
43 | ## Lessons learnt
44 | 
45 | All in all, this hackathon has been quite an eye-opener. There are definitely a lot of things that I've learnt; some of them that I'll talk about include:
46 | 
47 | - [stepping out of your intellectual comfort zone](#stepping-out-of-your-intellectual-comfort-zone);
48 | - [planning commitments wisely](#planning-commitments-wisely);
49 | - [leaning on each other for support](#leaning-on-each-other-for-support); and
50 | - [winging it](#winging-it).
51 | 
52 | ### Stepping out of your intellectual comfort zone
53 | 
54 | I have to admit that my participation in this hackathon isn't as much as I would with other hackathons. The fact that our problem statement was heavily Web3-oriented was quite the deterrent for me, so there were many instances where I felt like I couldn't do much.
55 | 
56 | It didn't really help that I was somehow the group leader (I didn't really know), and I felt bad that I haven't been doing much yet I helm the title of the person leading the team. The true team leaders were the other three students, since they mainly pushed for things to happen in the ideation stage.
57 | 
58 | There were many instances in this hackathon when I backed away because I knew that I hadn't had the knowledge to back up whatever I was saying or presenting; the few Q&A sessions that I was in (I wasn't in many) were hell because of that, and mostly the other group members handled the questions.
59 | 
60 | I think that this hackathon has certainly exposed me to the daunting world of Web3, and while I'm still hesitant to learn about it because of how big it is in general, I think it's an important lesson to not shy away or turn your back on new things that you need to learn. Although it's a big topic and you'll never really get to learn it in one sitting, I think it's worth the try to attempt to understand it.
61 | 
62 | ### Planning commitments wisely
63 | 
64 | This hackathon has a pretty long duration that spanned most of this year. First starting out in April till the finals (technically the semi-finals?) in September, there'll be many more projects and commitments running concurrently with this hackathon.
65 | 
66 | I think that the lack of ability to plan my commitments wisely has led to me contributing less than I'd hoped for in this hackathon. In general, perhaps as a way to compensate for not taking part enough in secondary school, I've been lunging at many opportunities that I could take.
67 | 
68 | I'm starting to learn that this is an unwise choice, but to give credit it can be difficult in the moment to really consider if something is feasible or not (you only have so much time to say whether you're in or not). Polytechnic studies, especially nearing the end of the semester, heavily involve hands-on projects that require you to work for it. Therefore, I had a lot on my plate that I didn't consider back when I signed up.
69 | 
70 | The next best thing that I could do was to adapt to the changes as they came, but even then, there was a lot of pressure for me to navigate and handle. Many projects required my attention at once, so generally I parked this hackathon and the things I had to do in the background while I catered to the more important graded assignments and projects. I wonder: had I put more effort into this hackathon, would we have gotten anywhere closer to the _final_ finalists?
71 | 
72 | ### Leaning on each other for support
73 | 
74 | As I've mentioned above, it was quite funny when we, the ICT students, had less of an idea of Web3 compared to the engineering students. With that, though, we've learnt to lean on each other for support. When one person doesn't have the time to do something, we try to redistribute the workload to everyone else (or someone else) to ease out the work.
75 | 
76 | Generally, I tried to focus on minor details on the slides and help out to clean up the prototype that we had made on Figma. Those who had greater grasp of Web3 generally worked on solidifying and strengthening the idea, while everyone else tried to help out wherever they can.
77 | 
78 | I found it great that my group managed to do quite a lot asynchronously without having to actively assign work, but I wonder if doing so may have led to everyone knowing what roles they specifically have? And if that's the case, would that have helped?
79 | 
80 | ### Winging it
81 | 
82 | Frankly, no one has the answers to everything. Our product had holes that came about because of our poor understanding of Web3, but no one person in the team was to blame for it. I think that we've winged quite a lot of things in this hackathon, and many of those things ended surprisingly well for us.
83 | 
84 | Especially during instances when we know uncertainty is around, it's important to be adaptable and change according to the situation. That's mainly what we did throughout the hackathon, once even realising that we only had a few days to prepare for something as none of us had caught an email sent previously.
85 | 
86 | I think something I've learnt from taking parts in hackathons is this: it's much more impressive to pretend and be confident in your idea than to point out every flaw your product has. Sounds like a no-brainer, but your confidence in what you made can really falter especially when you know the holes it has!
87 | 
88 | ## Conclusion
89 | 
90 | Was this hackathon fun? I guess so. Was it stressful? Definitely. With all that said, though, and though mentioned several times in this post, I've learnt so much from this hackathon. Whether it's the theory of Web3 or on soft skills like management and coordination, it's been quite the journey for my team.
91 | 
92 | I'm glad that we did whatever we could. I think the project we made isn't really bad at all, either. The other participating groups have ideas that are wild (in a good way), and I'm happy to see that the spirit of innovation and hacking at something isn't lost with this hackathon. Especially with this year's iteration being the first hybrid one after the fully-virtual ones in years past due to COVID, there's a certain atmosphere of excitement around.
93 | 
94 | To all the other participants, if you're somehow reading this, awesome job! You deserve a pat on the back. For the finalists, I wish you the best in presenting; there's still a little more to go!
95 | 


--------------------------------------------------------------------------------
/posts/the-importance-of-support.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "The importance of support"
 3 | date: 19 December 2021
 4 | description: If there's anything I learned this year, it was to learn to support — support yourself, learning to reach out, and supporting others.
 5 | tags: reflection
 6 | ---
 7 | 
 8 | At the beginning of the year, I set a list of resolutions that I wanted to accomplish. Among them was "to be a better developer" — whatever that meant. Back then, I knew that I had a lot on my plate for the year that was to come. As a Secondary 4 student, I had the Singapore-Cambridge GCE O-Level examinations to face, and _that_ was the culmination of the past four years of secondary school education.
 9 | 
10 | Even so, I've found that one of the best remedies to stress is support — and not just support from others around you, but those who believe in you and, most importantly, yourself, too. I wanted to balance my school life with my personal life. I knew that I had to study hard. Still, I hoped to maintain and strengthen friendships in our last year together, spend more time with my interests, and overcome life crises that may arise.
11 | 
12 | I would argue that teenagehood took a heavy toll on me, as I've come to realise as the year went on. I've met many friends — particularly online — while struggling with my own inner battles from time to time. I had to focus on one of the most important examinations of my life thus far, yet I wanted to catch up on missing out on the social front of life. I had multiple crises along the way, questioning who I am and being riddled with insecurities. Still, the most important lesson I've taken away from all that happened this past year is that **support matters**.
13 | 
14 | # Supporting yourself
15 | 
16 | The most challenging parts of the year were undoubtedly when insecurities overwhelmed me. It became easy to undermine whatever was left of my self-esteem and self-confidence. Two parts of me were readily confronting each other with opposing viewpoints, and all I could consciously do was continue the day unusually silent. I was confused about what to do and definitely took a mental beating as a result.
17 | 
18 | Even so, there were pockets of time when I was allowed to cool down and get my mind off. I would feel significantly relieved of a pressure I hadn't realised was there before, and I could spend some time to cheer myself up. These moments come and go, but in the end, they allow me to collect myself and reflect on what has happened and how I reacted.
19 | 
20 | During moments like these, I came to realise the importance of supporting yourself. After all, whatever anyone else says (and that includes commendations and praises) might mean nothing if you're not with yourself. This is certainly something I still have yet to learn, and the process is undoubtedly arduous.
21 | 
22 | Self-esteem and self-confidence were concepts unfamiliar to me; all my life, I've had the idea of putting others before myself. It was late to see that to put others before myself, I needed to make sure that I was okay first — in this case, mentally. Being able to support me meant that I should reach out whenever I feel like I'm losing control instead of the more natural response of wanting to keep it in. While I'm still on the journey of learning and understanding more about myself, it's certainly an important learning point that I hope to put to use in the future.
23 | 
24 | # Reaching out
25 | 
26 | I've done many things this year that I never imagined that I would be able to do; among them is the ability to reach out. Be it reaching out to get some help or reaching out to seize an opportunity, reaching out hasn't been something I was good at.
27 | 
28 | I found reaching out more manageable if I mustered up my courage to begin reaching out — whether it's typing out an email or message or checking out whatever I have to do to reach out. I would say that I still lack the courage to be proactive in taking the lead and taking action, and I'm prone to overthinking things. Usually, I'd spend too much time pondering over an opportunity to reach out until the window eventually closes. I still aim to work towards improving that and hopefully will improve soon!
29 | 
30 | I had an experience of reaching out that worked exceptionally well for me, as surprised as I still am. Reaching out then eventually led me to become a member of [Hack Club](https://hackclub.com), a non-profit network of high school coding clubs and students worldwide. I still recalled finding an active Hack Club member — [Sam Poder](https://sampoder.com) — making a pull request (which appeared on the globe found on GitHub's front page) and decided to reach out.
31 | 
32 | I recalled spending over half an hour drafting an email to send to him, fretting about more or less everything. I didn't know what would come out of this — sending an email — and I didn't expect anything either. No matter, I drafted an email, maybe even rewrote it a few times, then sent it over to him. He was friendly in his reply and definitely showed that he took the time to develop well-written answers to my questions. However, what I hadn't expected was an invitation to Hack Club.
33 | 
34 | That was in January. 11 months later, and here I am where I am today: I am reasonably skilled in [React](https://reactjs.org) and [Next.js](https://nextjs.org) thanks to Hack Club (I was introduced to them there!), and I've met many new people from all over the world — none of which I would've anticipated. I've collaborated a few times with people more than halfway across the world, and I'm excited at the enthusiasm people there show.
35 | 
36 | The main point here isn't so much about Hack Club, but it's more of seizing the opportunity to reach out. If I hadn't emailed Sam that day in January, I doubt I would be where I am today! Now, I have the support from a community full of talented student developers just by reaching out all those months ago.
37 | 
38 | # Supporting others
39 | 
40 | For some reason, I find supporting others much more effortless than supporting myself. It's really dependent on your personality and who you are. Still, I believe that it's definitely a necessary responsibility to be there for someone when they need it. It is easier said than done, but doing something as simple as listening to a friend in need can do wonders — not just for them, but perhaps even for you.
41 | 
42 | I came to realise that sometimes, though, some factors that would make supporting others easier are beyond your control. I think one thing that has allowed me to support others easier is the fact that we 'click' with each other much easier. That makes it easier for me and my friends to understand each other, or be an option for each other when we need an avenue to let our thoughts out.
43 | 
44 | If you're fortunate enough to have a friend group — no matter how small — appreciate the little moments you share with each other! This was a realisation I wished I had realised earlier; instead of being a suck-up to people who may not even have the thought of wanting to be my friend, I should've appreciated what was already with me. Now, at the end of the year, I'm slowly starting to be comfortable and spend more time with the people who chose to be with me instead the people I desperately want to get to know.
45 | 
46 | It's easier to go through periods of turmoil and personal difficulty when you have others around. My view is that if you're close to particular people, and know that they'll be there for you when you need someone, then why shouldn't you do the same? To me, friendship is about trust and understanding. Companionship is about going through the roughest of moments together as one.
47 | 
48 | # Conclusion
49 | 
50 | There's still a lot for me to develop as an individual, especially on the social front. However, from this year that's just about to end, one of the biggest lessons I've learned was to learn to support yourself, reach out to get support, and help others. I hope to use what I've learned next year and beyond when I'm starting out on my journey as a student anew.
51 | 
52 | Support can go a long way for an individual and interact with. For me, I hope to continue supporting whenever I can — because why not?
53 | 


--------------------------------------------------------------------------------
/posts/your-intranet-over-the-internet.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Your intranet over the internet
  3 | date: 14 April 2024
  4 | description: Tailscale + your devices = anywhere access. Here's how I used Tailscale to access my devices from anywhere.
  5 | tags: code
  6 | ---
  7 | 
  8 | I'm no networking geek, but I'd always wished there was a way to link all my devices together. The dream goal would be to always have them within my reach no matter where I am. I have a couple of use cases for this, which include:
  9 | - remotely controlling my devices (maybe something like screen sharing or streaming);
 10 | - privately accessing self-hosted services; and
 11 | - being able to use my devices as if I were there in front of them.
 12 | 
 13 | <figure>
 14 |   <img
 15 |     src="images/your-intranet-over-the-internet/001.jpg"
 16 |     alt="A graph-like network depicting three devices, Arash's PC, Arash's Mac, and Arash's Pi enveloped in a rectangle with the label 'Home Wi-Fi network' with lines interconnecting the devices. Outside of the rectangle are two devices, Arash's Laptop and Arash's Tablet."
 17 |   />
 18 |   <figcaption>
 19 |     My network as it is now. If I'm out and about out of my home network, I'm not able to access my devices at home.
 20 |   </figcaption>
 21 | </figure>
 22 | 
 23 | [Tailscale](https://tailscale.com) has been the key driver to making my set-up work (well, even!), so here's a small post sharing more about Tailscale and share with you some ways I've been using it that maybe you can take inspiration from.
 24 | 
 25 | ## The tail at scale
 26 | 
 27 | The magic of Tailscale comes from the fact that it creates a mesh network between the devices you set up Tailscale with through a virtual private network. I've only ever known VPNs to be used with third-party companies to obscure some part of your network activity through them instead of your ISP, so it's interesting to see another use case of VPNs here. Believe me, I'm not sure all too much myself about how it works, but I do know that it works so smoothly it's almost magic.
 28 | 
 29 | <figure>
 30 |   <img
 31 |     src="images/your-intranet-over-the-internet/002.jpg"
 32 |     alt="A graph-like network depicting five devices, Arash's PC, Arash's Mac, Arash's Pi, Arash's Laptop, and Arash's Tablet enveloped in a rectangle with the label 'Tailscale network' with lines interconnecting the devices. Arash's Tablet has a grey dot on it, indicating that it's offline from the network but can still be easily connected with one connection away."
 33 |   />
 34 |   <figcaption>
 35 |     With Tailscale, whether I'm in the same network or not, all my devices are connected to each other. W for me.
 36 |   </figcaption>
 37 | </figure>
 38 | 
 39 | I can't seem to remember when I first came across Tailscale, but I remember being fascinated not by the theory and idea, but by its branding (🤡 moment, I know). There's something about it's brand identity and its design that makes it 💯 in my impression of it. It's kinda like me coming across something like the [Oxide Computer Company](https://oxide.computer) where I fall in love with the design but not understand their offering enough (it's me, not them).
 40 | 
 41 | It took me a few visits to their website before I finally started paying attention to the content there, and from there I began to realise it could actually help me a lot by linking my devices together. As it was then, I had a few devices that are separate from each other — the only time they'd be aware of each other and could interact with one another was if they were in the same network, which always was the case at home.
 42 | 
 43 | I then began to wonder: would it be possible to make them accessible to each other as they are when they're in the same network?
 44 | 
 45 | ## Setting up's the easy part
 46 | 
 47 | It's really easy getting started with Tailscale. All it takes is installing the client app on each of your devices, and you'll need to access the same common _tailnet_ (their fancy term for network, apparently) by simply signing in through the same credentials. Things are definitely simple enough for my Mac, PC, laptop, tablet, and phone since there are dedicated installers + apps on the respective app stores.
 48 | 
 49 | With my Raspberry Pi, as with most things in Linux, an installer script is available, too. I followed their instructions to copy and paste a command in the shell (basically fetching the script then running it) and all's good to go. Remember, although Tailscale's a name you can trust, it's not a bad habit to scrutinise and look through the code of any script you're running before running them!
 50 | 
 51 | ## The possibilities are endless
 52 | 
 53 | So, once you've gone through with setting everything up, here's where the fun begins. As long as your devices are online and connected to your tailnet with the Tailscale clients active, you'll be able to interact with them just as if you're in the same network with them. Basically, all the things I wanted to do are now possible! 🥳
 54 | 
 55 | Here are some ways I've been using Tailscale with my devices. I'll leave it up to you to determine if they're cool or not.
 56 | 
 57 | ### Remote SSH
 58 | 
 59 | Okay, maybe this _isn't_ that impressive, but it's always nice as a dev to be able to access the shells of your devices through SSH. Tailscale isn't by any means the only way to make your device accessible over the internet via the protocol, but it does so pretty easily with little hoops you need to go through and with reasonable security.
 60 | 
 61 | Tailscale natively supports SSH through something called [Tailscale SSH](https://tailscale.com/kb/1193/tailscale-ssh), and its premise basically revolves around handling all the auth (both -entication and -orisation) that's required by SSH connections between devices in the tailnet. Tailscale's docs on Tailscale SSH is more elaborate than what I can give, but to put it simply: it takes away the pain and confusion that's needed with making your devices talk to each other pre-SSH session. You just run your `ssh` command and it works.
 62 | 
 63 | Since I have access to the [GitHub Student Developer Pack](https://education.github.com/pack), I've been doing everything SSH-related with [Termius](https://termius.com). It's a nice 'do one thing and do it right' app that does SSH and more (like autocomplete and suggestions!).
 64 | 
 65 | ### The screen's moving on its own!
 66 | 
 67 | Only recently did I start looking at remote screen sharing and control as a way to connect to my devices and control them from afar. Besides, I think it's a nice flex to friends that you're able to connect to your home PC if you need any added oompf from your GPU at home than the one on your laptop.
 68 | 
 69 | I first started by setting up my PC at home with the Remote Desktop Protocol that Microsoft made available on Windows (Pro) devices. It's an in-house solution that works surprisingly really well, so I just stuck with it and not opt for other options.
 70 | 
 71 | When my internship started around March 2024, I wanted to pick up Swift and Objective-C through making a basic iOS app. Since I have a Mac mini at home, there's no better time to set up remote access to it! macOS natively supports the Virtual Networking Computing protocol, but it was _painfully_ slow — whatever I typed took ages to show up — so I looked elsewhere. I settled on NoMachine and the NX protocol, and they worked pretty well.
 72 | 
 73 | #### Wake up!
 74 | 
 75 | The thing with remote access is that they're dependent on your device being awake (i.e., not sleeping) to receive the request and respond to it. One simple option to address this is to keep your device on all the time, but I don't think that looks good because (a) it's an energy waster and (b) your screen at home will be on and your user account signed in at all times.
 76 | 
 77 | <figure>
 78 |   <img
 79 |     src="images/your-intranet-over-the-internet/003.jpg"
 80 |     alt="A graph-like network depicting with a line tracing from Arash's Laptop to Arash's Pi, then Arash's Pi to Arash's PC and Arash's Mac, and lastly Arash's Laptop to Arash's PC and Arash's Mac."
 81 |   />
 82 | </figure>
 83 | 
 84 | The nifty solution that I opted for is to:
 85 | 1. Connect to my Raspberry Pi and run a command calling a tool to send a magic packet to the right device.
 86 | 2. Wait for the Raspberry Pi to contact and wake up the device. This should take a second or two, not long at all.
 87 | 3. Use the appropriate remote access client (like Remote Desktop Connection or NoMachine) to hop on my PC or Mac.
 88 | 
 89 | To do that, I'll need to:
 90 | 1. Enable magic packet awakening on my PC. I don't think there an option for this on macOS, but it should support it anyway.
 91 | 2. Install a tool that can send magic packet from my Raspberry Pi, an always-on device.
 92 | 
 93 | The tool that I opted for is `etherwake`. I've configured it using `.bash_aliases` saved in my Pi so that I need to call a single command — `wake-pc` or `wake-mac` — to wake the respective device up. Here's a snapshot of my `.bash_aliases` file:
 94 | 
 95 | ```
 96 | alias wake-pc='sudo etherwake -b -i eth0 AA:BB:CC:DD:EE:FF'
 97 | alias wake-pc-wifi='sudo etherwake -b -i eth0 BB:CC:DD:EE:FF:AA'
 98 | alias wake-mac='sudo etherwake -b -i eth0 CC:DD:EE:FF:AA:BB'
 99 | alias wake-mac-wifi='sudo etherwake -b -i eth0 DD:EE:FF:AA:BB:CC'
100 | ```
101 | 
102 | The `-wifi` commands are there just as a backup, since both my PC and Mac have Ethernet connected to them and are the default for connectivity.
103 | 
104 | ### Self-hosting stuff
105 | 
106 | I mostly use my Raspberry Pi as my little self-hosted server to run light stuff on it. I don't really run too much there as of now apart from my projects (like [Commute](https://github.com/arashnrim/commute) and the [5.0 GPA Student](https://github.com/arashnrim/5.0-gpa-student)), [Portainer](https://portainer.io), and a [Joplin](https://joplinapp.org) server. As with self-hosting things though, projects are gradual and I'll probably host more things as I gain the confidence to manage them over time!
107 | 
108 | With Tailscale's [MagicDNS](https://tailscale.com/kb/1081/magicdns), you don't even need a TLD to type in when accessing the device. It generates an automatic domain name based off the device (you're connecting to)'s name and alters your device (you're connecting from)'s hosts file on the go so that you just need to call the machine name to access it. For example, instead of connecting to `https://raspberrypi.local:9443` to access Portainer, all I need to do is visit `https://raspberrypi:9443` and it'll do the same thing.
109 | 
110 | There may obviously be cases where MagicDNS can break the validation of some things that require the domain name format, so it also handily generates a [fully qualified domain name](https://tailscale.com/kb/1081/magicdns#fully-qualified-domain-names-vs-machine-names) that's basically your machine name + your tailnet name. I'll then have `raspberrypi.my-tailnet.ts.net` as the full domain if needed. Super convenient!
111 | 
112 | ## To wrap up
113 | 
114 | To summarise, here are the reasons I love Tailscale:
115 | - 🤩 It's fuss-free and so simple to set up + configure. Everything major can be done in the web on the admin console, and adding devices to the network is as easy as running an installer to get the Tailscale client working.
116 | - 💰 It's generous in its pricing. I've been using the free tier with no need whatsoever to upgrade to the paid plans because the free plan is just that generous. If you're working alone or only a person more or two, you can create a tailnet that can work for y'all easily on the free tier.
117 | - 🧠 It simplifies a lot of things. With things like MagicDNS, ACLs, logs, and more, it's never been easier to manage both the devices in your tailnet and how they're able to talk to each other.
118 | 
119 | If all this yapping has you convinced, give Tailscale a try and let me know how it goes for you!


--------------------------------------------------------------------------------
/public/arash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/arash.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/favicon.ico


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-Bold.woff


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-Bold.woff2


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-BoldItalic.woff


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-BoldItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-BoldItalic.woff2


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-Medium.woff


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-Medium.woff2


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-MediumItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-MediumItalic.woff


--------------------------------------------------------------------------------
/public/fonts/GeneralSans-MediumItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/GeneralSans-MediumItalic.woff2


--------------------------------------------------------------------------------
/public/fonts/JetBrainsMono-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/JetBrainsMono-BoldItalic.woff


--------------------------------------------------------------------------------
/public/fonts/JetBrainsMono-BoldItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/JetBrainsMono-BoldItalic.woff2


--------------------------------------------------------------------------------
/public/fonts/JetBrainsMono-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/JetBrainsMono-Medium.woff


--------------------------------------------------------------------------------
/public/fonts/JetBrainsMono-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/JetBrainsMono-Medium.woff2


--------------------------------------------------------------------------------
/public/fonts/JetBrainsMono-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/JetBrainsMono-Regular.woff


--------------------------------------------------------------------------------
/public/fonts/JetBrainsMono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/fonts/JetBrainsMono-Regular.woff2


--------------------------------------------------------------------------------
/public/images/2022-in-review/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/2022-in-review/001.jpg


--------------------------------------------------------------------------------
/public/images/2022-in-review/002.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/2022-in-review/002.jpg


--------------------------------------------------------------------------------
/public/images/2022-in-review/003.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/2022-in-review/003.jpg


--------------------------------------------------------------------------------
/public/images/2022-in-review/004.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/2022-in-review/004.jpg


--------------------------------------------------------------------------------
/public/images/a-long-journey-to-setting-up-raspberry-pi/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/a-long-journey-to-setting-up-raspberry-pi/001.jpg


--------------------------------------------------------------------------------
/public/images/a-long-journey-to-setting-up-raspberry-pi/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/a-long-journey-to-setting-up-raspberry-pi/002.png


--------------------------------------------------------------------------------
/public/images/a-long-journey-to-setting-up-raspberry-pi/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/a-long-journey-to-setting-up-raspberry-pi/003.png


--------------------------------------------------------------------------------
/public/images/a-long-journey-to-setting-up-raspberry-pi/004.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/a-long-journey-to-setting-up-raspberry-pi/004.png


--------------------------------------------------------------------------------
/public/images/building-a-pc/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/building-a-pc/001.jpg


--------------------------------------------------------------------------------
/public/images/building-a-pc/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/building-a-pc/002.png


--------------------------------------------------------------------------------
/public/images/building-a-pc/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/building-a-pc/003.png


--------------------------------------------------------------------------------
/public/images/codeday-singapore-2022/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/codeday-singapore-2022/001.jpg


--------------------------------------------------------------------------------
/public/images/codeday-singapore-2022/002.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/codeday-singapore-2022/002.jpg


--------------------------------------------------------------------------------
/public/images/codeday-singapore-2022/003.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/codeday-singapore-2022/003.jpg


--------------------------------------------------------------------------------
/public/images/codeday-singapore-2022/004.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/codeday-singapore-2022/004.jpg


--------------------------------------------------------------------------------
/public/images/codeday-singapore-2022/005.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/codeday-singapore-2022/005.jpg


--------------------------------------------------------------------------------
/public/images/codeday-singapore-2022/006.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/codeday-singapore-2022/006.jpg


--------------------------------------------------------------------------------
/public/images/coding-on-windows/001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/coding-on-windows/001.png


--------------------------------------------------------------------------------
/public/images/coding-on-windows/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/coding-on-windows/002.png


--------------------------------------------------------------------------------
/public/images/coding-on-windows/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/coding-on-windows/003.png


--------------------------------------------------------------------------------
/public/images/epoch/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/001.jpg


--------------------------------------------------------------------------------
/public/images/epoch/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/002.png


--------------------------------------------------------------------------------
/public/images/epoch/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/003.png


--------------------------------------------------------------------------------
/public/images/epoch/004.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/004.png


--------------------------------------------------------------------------------
/public/images/epoch/005.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/005.jpg


--------------------------------------------------------------------------------
/public/images/epoch/006.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/006.jpg


--------------------------------------------------------------------------------
/public/images/epoch/007.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/007.jpg


--------------------------------------------------------------------------------
/public/images/epoch/008.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/008.jpg


--------------------------------------------------------------------------------
/public/images/epoch/009.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/009.jpg


--------------------------------------------------------------------------------
/public/images/epoch/010.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/010.jpg


--------------------------------------------------------------------------------
/public/images/epoch/011.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/011.jpg


--------------------------------------------------------------------------------
/public/images/epoch/012.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/012.jpg


--------------------------------------------------------------------------------
/public/images/epoch/013.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/013.jpg


--------------------------------------------------------------------------------
/public/images/epoch/014.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/014.jpg


--------------------------------------------------------------------------------
/public/images/epoch/015.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/015.jpg


--------------------------------------------------------------------------------
/public/images/epoch/016.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/016.jpg


--------------------------------------------------------------------------------
/public/images/epoch/017.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/017.jpg


--------------------------------------------------------------------------------
/public/images/epoch/018.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/018.jpg


--------------------------------------------------------------------------------
/public/images/epoch/019.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/019.jpg


--------------------------------------------------------------------------------
/public/images/epoch/020.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/020.jpg


--------------------------------------------------------------------------------
/public/images/epoch/021.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/021.jpg


--------------------------------------------------------------------------------
/public/images/epoch/022.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/022.jpg


--------------------------------------------------------------------------------
/public/images/epoch/023.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/023.jpg


--------------------------------------------------------------------------------
/public/images/epoch/024.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/024.jpg


--------------------------------------------------------------------------------
/public/images/epoch/025.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/025.jpg


--------------------------------------------------------------------------------
/public/images/epoch/026.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/epoch/026.jpg


--------------------------------------------------------------------------------
/public/images/taking-part-in-intuition-v8.0/001.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-intuition-v8.0/001.gif


--------------------------------------------------------------------------------
/public/images/taking-part-in-intuition-v8.0/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-intuition-v8.0/002.png


--------------------------------------------------------------------------------
/public/images/taking-part-in-intuition-v8.0/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-intuition-v8.0/003.png


--------------------------------------------------------------------------------
/public/images/taking-part-in-intuition-v8.0/004.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-intuition-v8.0/004.png


--------------------------------------------------------------------------------
/public/images/taking-part-in-intuition-v8.0/005.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-intuition-v8.0/005.png


--------------------------------------------------------------------------------
/public/images/taking-part-in-intuition-v8.0/006.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-intuition-v8.0/006.png


--------------------------------------------------------------------------------
/public/images/taking-part-in-polyfintech100-api-hackathon-2022/001.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/taking-part-in-polyfintech100-api-hackathon-2022/001.jpeg


--------------------------------------------------------------------------------
/public/images/your-intranet-over-the-internet/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/your-intranet-over-the-internet/001.jpg


--------------------------------------------------------------------------------
/public/images/your-intranet-over-the-internet/002.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/your-intranet-over-the-internet/002.jpg


--------------------------------------------------------------------------------
/public/images/your-intranet-over-the-internet/003.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/images/your-intranet-over-the-internet/003.jpg


--------------------------------------------------------------------------------
/public/seo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arashnrim/blog-archive/9241ed7ca3705109c8ab6f017f2407a9ed541b74/public/seo.jpg


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   @font-face {
 7 |     font-family: "General Sans";
 8 |     font-display: swap;
 9 |     font-weight: 500;
10 |     src: url("../public/fonts/GeneralSans-Medium.woff2") format("woff2");
11 |     src: url("../public/fonts/GeneralSans-Medium.woff") format("woff");
12 |   }
13 |   @font-face {
14 |     font-family: "General Sans";
15 |     font-display: swap;
16 |     font-weight: 500;
17 |     font-style: italic;
18 |     src: url("../public/fonts/GeneralSans-MediumItalic.woff2") format("woff2");
19 |     src: url("../public/fonts/GeneralSans-MediumItalic.woff") format("woff");
20 |   }
21 |   @font-face {
22 |     font-family: "General Sans";
23 |     font-display: swap;
24 |     font-weight: 700;
25 |     src: url("../public/fonts/GeneralSans-Bold.woff2") format("woff2");
26 |     src: url("../public/fonts/GeneralSans-Bold.woff") format("woff");
27 |   }
28 |   @font-face {
29 |     font-family: "General Sans";
30 |     font-display: swap;
31 |     font-weight: 700;
32 |     font-style: italic;
33 |     src: url("../public/fonts/GeneralSans-BoldItalic.woff2") format("woff2");
34 |     src: url("../public/fonts/GeneralSans-BoldItalic.woff") format("woff");
35 |   }
36 |   @font-face {
37 |     font-family: "JetBrains Mono";
38 |     font-display: swap;
39 |     font-weight: 400;
40 |     src: url("../public/fonts/JetBrainsMono-Regular.woff2") format("woff2");
41 |     src: url("../public/fonts/JetBrainsMono-Regular.woff") format("woff");
42 |   }
43 |   @font-face {
44 |     font-family: "JetBrains Mono";
45 |     font-display: swap;
46 |     font-weight: 500;
47 |     src: url("../public/fonts/JetBrainsMono-Medium.woff2") format("woff2");
48 |     src: url("../public/fonts/JetBrainsMono-Medium.woff") format("woff");
49 |   }
50 |   @font-face {
51 |     font-family: "JetBrains Mono";
52 |     font-style: italic;
53 |     font-display: swap;
54 |     font-weight: 700;
55 |     src: url("../public/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
56 |     src: url("../public/fonts/JetBrainsMono-BoldItalic.woff") format("woff");
57 |   }
58 | 
59 |   html {
60 |     scroll-behavior: smooth;
61 |     scroll-padding-top: 25vh;
62 |   }
63 | 
64 |   a {
65 |     @apply py-0.5 px-1 border-white border-2 no-underline;
66 |   }
67 | 
68 |   h1,
69 |   h2,
70 |   h3,
71 |   h4,
72 |   h5,
73 |   h6 {
74 |     @apply font-bold;
75 |   }
76 | 
77 |   * {
78 |     @apply duration-200;
79 |   }
80 | }
81 | 
82 | @layer utilities {
83 |   .vertical-text {
84 |     writing-mode: vertical-lr;
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/styles/highlight.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |   Theme: Black Metal (Mayhem)
  3 |   Author: metalelf0 (https://github.com/metalelf0)
  4 |   License: ~ MIT (or more permissive) [via base16-schemes-source]
  5 |   Maintainer: @highlightjs/core-team
  6 |   Version: 2021.09.0
  7 | */
  8 | 
  9 | /*
 10 |   WARNING: DO NOT EDIT THIS FILE DIRECTLY.
 11 | 
 12 |   This theme file was auto-generated from the Base16 scheme black-metal-mayhem
 13 |   by the Highlight.js Base16 template builder.
 14 | 
 15 |   - https://github.com/highlightjs/base16-highlightjs
 16 | */
 17 | 
 18 | /*
 19 | base00  #000000  Default Background
 20 | base01  #121212  Lighter Background (Used for status bars, line number and folding marks)
 21 | base02  #222222  Selection Background
 22 | base03  #333333  Comments, Invisibles, Line Highlighting
 23 | base04  #999999  Dark Foreground (Used for status bars)
 24 | base05  #c1c1c1  Default Foreground, Caret, Delimiters, Operators
 25 | base06  #999999  Light Foreground (Not often used)
 26 | base07  #c1c1c1  Light Background (Not often used)
 27 | base08  #5f8787  Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
 28 | base09  #aaaaaa  Integers, Boolean, Constants, XML Attributes, Markup Link Url
 29 | base0A  #eecc6c  Classes, Markup Bold, Search Text Background
 30 | base0B  #f3ecd4  Strings, Inherited Class, Markup Code, Diff Inserted
 31 | base0C  #aaaaaa  Support, Regular Expressions, Escape Characters, Markup Quotes
 32 | base0D  #888888  Functions, Methods, Attribute IDs, Headings
 33 | base0E  #999999  Keywords, Storage, Selector, Markup Italic, Diff Changed
 34 | base0F  #444444  Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
 35 | */
 36 | 
 37 | pre code.hljs {
 38 |     display: block;
 39 |     overflow-x: auto;
 40 |     padding: 1em;
 41 |   }
 42 |   
 43 |   code.hljs {
 44 |     padding: 3px 5px;
 45 |   }
 46 |   
 47 |   .hljs {
 48 |     color: #c1c1c1;
 49 |     background: #000000;
 50 |   }
 51 |   
 52 |   .hljs::selection,
 53 |   .hljs ::selection {
 54 |     background-color: #222222;
 55 |     color: #c1c1c1;
 56 |   }
 57 |   
 58 |   
 59 |   /* purposely do not highlight these things */
 60 |   .hljs-formula,
 61 |   .hljs-params,
 62 |   .hljs-property
 63 |   {}
 64 |   
 65 |   /* base03 - #333333 -  Comments, Invisibles, Line Highlighting */
 66 |   .hljs-comment {
 67 |     color: #333333;
 68 |   }
 69 |   
 70 |   /* base04 - #999999 -  Dark Foreground (Used for status bars) */
 71 |   .hljs-tag {
 72 |     color: #999999;
 73 |   }
 74 |   
 75 |   /* base05 - #c1c1c1 -  Default Foreground, Caret, Delimiters, Operators */
 76 |   .hljs-subst,
 77 |   .hljs-punctuation,
 78 |   .hljs-operator {
 79 |     color: #c1c1c1;
 80 |   }
 81 |   
 82 |   .hljs-operator {
 83 |     opacity: 0.7;
 84 |   }
 85 |   
 86 |   /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
 87 |   .hljs-bullet,
 88 |   .hljs-variable,
 89 |   .hljs-template-variable,
 90 |   .hljs-selector-tag,
 91 |   .hljs-name,
 92 |   .hljs-deletion {
 93 |     color: #5f8787;
 94 |   }
 95 |   
 96 |   /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
 97 |   .hljs-symbol,
 98 |   .hljs-number,
 99 |   .hljs-link,
100 |   .hljs-attr,
101 |   .hljs-variable.constant_,
102 |   .hljs-literal {
103 |     color: #aaaaaa;
104 |   }
105 |   
106 |   /* base0A - Classes, Markup Bold, Search Text Background */
107 |   .hljs-title,
108 |   .hljs-class .hljs-title,
109 |   .hljs-title.class_
110 |   {
111 |     color: #eecc6c;
112 |   }
113 |   
114 |   .hljs-strong {
115 |     font-weight:bold;
116 |     color: #eecc6c;
117 |   }
118 |   
119 |   /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
120 |   .hljs-code,
121 |   .hljs-addition,
122 |   .hljs-title.class_.inherited__,
123 |   .hljs-string {
124 |     color: #f3ecd4;
125 |   }
126 |   
127 |   /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
128 |   .hljs-built_in,
129 |   .hljs-doctag, /* guessing */
130 |   .hljs-quote,
131 |   .hljs-keyword.hljs-atrule,
132 |   .hljs-regexp {
133 |     color: #aaaaaa;
134 |   }
135 |   
136 |   /* base0D - Functions, Methods, Attribute IDs, Headings */
137 |   .hljs-function .hljs-title,
138 |   .hljs-attribute,
139 |   .ruby .hljs-property,
140 |   .hljs-title.function_,
141 |   .hljs-section {
142 |     color: #888888;
143 |   }
144 |   
145 |   /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
146 |   .hljs-type,
147 |   /* .hljs-selector-id, */
148 |   /* .hljs-selector-class, */
149 |   /* .hljs-selector-attr, */
150 |   /* .hljs-selector-pseudo, */
151 |   .hljs-template-tag,
152 |   .diff .hljs-meta,
153 |   .hljs-keyword {
154 |     color: #999999;
155 |   }
156 |   .hljs-emphasis {
157 |     color: #999999;
158 |     font-style: italic;
159 |   }
160 |   
161 |   /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
162 |   .hljs-meta,
163 |   /*
164 |     prevent top level .keyword and .string scopes
165 |     from leaking into meta by accident
166 |   */
167 |   .hljs-meta .hljs-keyword,
168 |   .hljs-meta .hljs-string
169 |   {
170 |     color: #444444;
171 |   }
172 |   
173 |   .hljs-meta .hljs-keyword,
174 |   /* for v10 compatible themes */
175 |   .hljs-meta-keyword {
176 |     font-weight: bold;
177 |   }
178 |   


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require("tailwindcss/colors");
 2 | 
 3 | module.exports = {
 4 |   content: [
 5 |     "./components/**/*.{js,ts,jsx,tsx}",
 6 |     "./pages/**/*.{js,ts,jsx,tsx}",
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       fontFamily: {
11 |         sans: ["'General Sans'"],
12 |         mono: ["'JetBrains Mono'"],
13 |       },
14 |       colors: {
15 |         gray: colors.neutral,
16 |       },
17 |       typography: {
18 |         DEFAULT: {
19 |           css: {
20 |             img: {
21 |               "border-radius": "0.75rem",
22 |             },
23 |             a: {
24 |               "text-decoration": "none",
25 |             },
26 |             abbr: {
27 |               "text-underline-offset": "4px",
28 |               cursor: "help",
29 |             },
30 |           },
31 |         },
32 |       },
33 |     },
34 |   },
35 |   plugins: [require("@tailwindcss/typography")],
36 | };
37 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve",
20 |     "incremental": true
21 |   },
22 |   "include": [
23 |     "next-env.d.ts",
24 |     "**/*.ts",
25 |     "**/*.tsx"
26 |   ],
27 |   "exclude": [
28 |     "node_modules"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/utils/post-utils.ts:
--------------------------------------------------------------------------------
 1 | import matter from "gray-matter";
 2 | import fs from "fs";
 3 | import path from "path";
 4 | import process from "process";
 5 | import readingTime from "reading-time";
 6 | 
 7 | export interface Frontmatter {
 8 |   date: string;
 9 |   description?: string;
10 |   tags?: string[];
11 |   title: string;
12 |   slug: string;
13 |   words: number;
14 |   time: number;
15 | }
16 | 
17 | export const fetchAllPosts = (dateOptions?: object) => {
18 |   const files = fs.readdirSync(path.join(process.cwd(), "posts"), "utf-8");
19 |   const postFrontmatters = files.map((file) => {
20 |     const unprocessedContent = fs.readFileSync(
21 |       path.join(process.cwd(), "posts", file),
22 |       "utf-8"
23 |     );
24 | 
25 |     const { data: frontmatter, content } = matter(unprocessedContent);
26 | 
27 |     // Generating the slug to the post
28 |     frontmatter["slug"] = "/" + file.replace(".mdx", "");
29 | 
30 |     // Generating the date the post was made
31 |     const date = new Date(frontmatter["date"]);
32 |     const defaultDateOptions = {
33 |       day: "numeric",
34 |       month: "long",
35 |       year: "numeric",
36 |     };
37 |     frontmatter["date"] = date.toLocaleDateString(
38 |       "en-SG",
39 |       dateOptions ? dateOptions : defaultDateOptions
40 |     );
41 | 
42 |     // Generating the tags attached to the post
43 |     const tags = frontmatter["tags"];
44 |     typeof tags === "string"
45 |       ? (frontmatter["tags"] = tags.split(","))
46 |       : (frontmatter["tags"] = tags);
47 | 
48 |     // Generating the reading time of the post
49 |     const time = readingTime(content);
50 |     frontmatter["words"] = time.words;
51 |     frontmatter["time"] = Math.round(time.minutes);
52 | 
53 |     return frontmatter;
54 |   });
55 | 
56 |   return postFrontmatters;
57 | };
58 | 
59 | export const retrieveProjectKey = () => {
60 |   const projectKey = process.env.PROJECT_KEY;
61 |   if (projectKey === undefined) {
62 |     throw "PROJECT_KEY was not found in the environment variables. Have you pulled or updated or environment variables?";
63 |   }
64 |   return projectKey;
65 | };
66 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "github": {
3 |     "silent": true
4 |   }
5 | }
6 | 


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