<rss version="2.0">
  <channel>
    <title>Pratyay writes</title>
    <link>https://pratyay.bond</link>
    <description>Pratyay writes - All posts</description>
    <generator>Zine -- https://zine-ssg.io</generator>
    <language>en-US</language>
    <lastBuildDate>Sat, 19 Sep 2026 21:10:54 +0000</lastBuildDate>
    
      <item>
        <title>I have automated most of my social media accounts for free.</title>
        <description>&lt;h1&gt;Recently, I have started writing blogs as a hobby to discipline myself about building a habit which is consistent&lt;/h1&gt;&lt;p&gt;However, writing is only half the battle. As the saying goes, “If people don’t know your product exists, they can’t judge its value.”&lt;/p&gt;&lt;p&gt;To seriously grow, and sharing whatever I do with a wider audience is essential.&lt;/p&gt;&lt;h2&gt;But who is my target audience?&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;People who are curious about technology and are accustomed to read articles.  
These specific requirements make my target audience quite niche,  
Which limits my choices of social media platforms even more limited.  
To keep people informed about my work, I can use microblogging platforms like (X twitter/threads/blue sky/ mastodon) and LinkedIn.
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;But writing 10 different post on 10 different platforms is a lot of work, and I am not into that.&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;Also, as programmers, we tend to be “lazy” as we hate repetitive tasks,&lt;br&gt;also on the other side we love doing overengineering to solve simple problems.&lt;/p&gt;&lt;/blockquote&gt;&lt;h3&gt;&lt;em&gt;Here is what I have so far:&lt;/em&gt;&lt;/h3&gt;&lt;ol&gt;&lt;li&gt;A blog website built with a Static Site Generator (SSG).&lt;/li&gt;&lt;li&gt;An automatically generated RSS feed (handled automatically by the SSG).&lt;/li&gt;&lt;li&gt;A &lt;a href=&quot;https://en.wikipedia.org/wiki/Cron&quot; target=&quot;_blank&quot;&gt;Cronjob&lt;/a&gt;  to check for new posts.&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;First I have had planned to use some action runners on schedule like github actions, to check and trigger based on rss feed, but after I started, going through the different developer sections, I felt that’s not worth my time as some one has already done so.&lt;br&gt;So, Why reinvent the wheel when there are already some good solutions available.&lt;/p&gt;&lt;h3&gt;&lt;em&gt;Exploring automation solutions&lt;/em&gt;:&lt;/h3&gt;&lt;ol&gt;&lt;li&gt;&lt;del&gt;iftttt.com (This  is  free on paper only , and unusable )&lt;/del&gt;&lt;/li&gt;&lt;li&gt;zapier.com (Very limited free plan, but at least allows performing basic automation for free)&lt;/li&gt;&lt;li&gt;&lt;strong&gt;windmill.com (cloud: Very limited free plan, Can be self hosted)&lt;/strong&gt;&lt;/li&gt;&lt;li&gt;&lt;strong&gt;make.com (free plan  isn’t very limited and this is the simplest solution I have found so far)&lt;/strong&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;&lt;strong&gt;So, I will be using &lt;a href=&quot;http://make.com&quot; target=&quot;_blank&quot;&gt;make.com&lt;/a&gt; but how to use make.com to automate my social media posting?&lt;/strong&gt;&lt;/p&gt;&lt;ol&gt;&lt;li&gt;X (twitter) api  used to be free but that’s now paid so using official API dropped. ❌&lt;/li&gt;&lt;li&gt;For threads. though it’s free but platforms are yet to integrate it.&lt;/li&gt;&lt;li&gt;mastodon is free to use in most of the platforms&lt;/li&gt;&lt;li&gt;same for Blue sky  but it isn’t free on zapier .&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;I have only found &lt;a href=&quot;https://eu1.make.com/public/shared-scenario/GT23pzkTgzg/integration-rss-linked-in-bluesky&quot; target=&quot;_blank&quot;&gt;make.com&lt;/a&gt; to be a better suited automation platform even for free users&lt;br&gt;It barely restricts any core features .&lt;br&gt;But the only problem with them is low monthly credits, 1000 for an entire month.&lt;/p&gt;&lt;p&gt;And similar to Deterministic Finite Automata, here each step consumes 1 credit no matter failed or not.&lt;/p&gt;&lt;h4&gt;But why am I telling you all of this and how is this free. Also will you be posting on such unsupported social media platforms manually ?&lt;/h4&gt;&lt;p&gt;&lt;strong&gt;Answer is no. You don’t as we are going to use &lt;a href=&quot;https://buffer.com/join/2705ce7aba72db2c064eae8f641e3bc969d060d68927db95716ea19233461d51&quot; target=&quot;_blank&quot;&gt;buffer&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://buffer.com/join/2705ce7aba72db2c064eae8f641e3bc969d060d68927db95716ea19233461d51&quot; target=&quot;_blank&quot;&gt;Buffer&lt;/a&gt; is a social media aggregator and management platform which can manage upto 3 accounts for free&lt;/p&gt;&lt;p&gt;Twitter asking money hell no  ❌ I am going to automate with &lt;a href=&quot;https://buffer.com/join/2705ce7aba72db2c064eae8f641e3bc969d060d68927db95716ea19233461d51&quot; target=&quot;_blank&quot;&gt;buffer&lt;/a&gt; .&lt;/p&gt;&lt;p&gt;And &lt;a href=&quot;https://eu1.make.com/public/shared-scenario/GT23pzkTgzg/integration-rss-linked-in-bluesky&quot; target=&quot;_blank&quot;&gt;make.com&lt;/a&gt; allows you connect upto 3 actions in a chain.&lt;/p&gt;&lt;p&gt;If you have used my affiliate link for &lt;a href=&quot;https://eu1.make.com/public/shared-scenario/GT23pzkTgzg/integration-rss-linked-in-bluesky&quot; target=&quot;_blank&quot;&gt;make.com,&lt;/a&gt; they have told me that they will give all the users 10,000 credits for free which is their pro plan for the first month.&lt;/p&gt;&lt;p&gt;Buffer is generous enough to allow you to connect 3 social media accounts and post on them for free. but you can mostly post 10 posts per day on free plan which is more than enough for me.&lt;/p&gt;&lt;p&gt;So you can hook 3 accounts to buffer and two on &lt;a href=&quot;https://eu1.make.com/public/shared-scenario/GT23pzkTgzg/integration-rss-linked-in-bluesky&quot; target=&quot;_blank&quot;&gt;make.com.&lt;/a&gt;&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;My workflow consumes 4 credits on each run and such that, you get about 8 runs a day. 4×30×8&lt;/p&gt;&lt;p&gt;so if executions happen at an interval of 3 hrs you will not be exhausting the free limits.&lt;/p&gt;&lt;/blockquote&gt;&lt;h3&gt;For your reference I am sharing Images of buffer and &lt;a href=&quot;http://Make.com&quot; target=&quot;_blank&quot;&gt;Make.com&lt;/a&gt; dashboard&lt;/h3&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://github.com/user-attachments/assets/a1f0305f-489e-4db4-bd8f-0c2a4e17048e&quot;&gt;
&lt;figcaption&gt;Untitled1&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://github.com/user-attachments/assets/76488289-af8a-42d3-b16a-5559d02037df&quot;&gt;
&lt;figcaption&gt;Untitled&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://github.com/user-attachments/assets/c6150ea7-bdf5-4333-8600-1d710dc30ea8&quot;&gt;
&lt;figcaption&gt;Untitled2&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://github.com/user-attachments/assets/2e2778ed-f48f-48d9-ae06-17f80d41b723&quot;&gt;
&lt;figcaption&gt;Untitled3&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt; &lt;/p&gt;&lt;p&gt; &lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://eu1.make.com/public/shared-scenario/GT23pzkTgzg/integration-rss-linked-in-bluesky&quot; target=&quot;_blank&quot;&gt;Visit make with my referral link. (for 1st month free pro)&lt;/a&gt;&lt;/p&gt;&lt;p&gt;All this for absolutely free and with no credit card requirement.&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/1789816067/</link>
        <pubDate>Sat, 19 Sep 2026 11:07:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/1789816067/</guid>
      </item>
    
      <item>
        <title>Navigating around bootc and immutable/atomic distros</title>
        <description>&lt;h1&gt;So, as you all know I have been a Linux user for the past 5-6 years.&lt;/h1&gt;&lt;p&gt;And have installed os 100s of times on my system because of kernel panics or some bad driver bricking my machine, this made me an avid &lt;a href=&quot;https://www.linux-magazine.com/Online/Blogs/Off-the-Beat-Bruce-Byfield-s-Blog/Distro-hopping&quot; target=&quot;_blank&quot;&gt;distro hopper.&lt;/a&gt;&lt;/p&gt;&lt;p&gt;As I have already written about the approx timeline of my distro hopping, I’m not going to repeat it here.&lt;/p&gt;&lt;p&gt;I personally loved KDE Plasma, and its look and feel overall. The simplicity and customization options are something I loved the most&lt;/p&gt;&lt;p&gt;And Fedora has the best experience with KDE Plasma.&lt;/p&gt;&lt;p&gt;And for the past 1 - 1.5 years, topics related to DevOps, like KVM, docker-compose, and reproducible builds, sparked curiosity in me. I got a bit deep digging into containerization, and how containerization works with namespaces and cgroups is very interesting. Though Docker has become synonymous with containers itself. But all the container runtimes follow OCI specs (Open Container Initiative) .&lt;/p&gt;&lt;h2&gt;Podman&lt;/h2&gt;&lt;p&gt;Podman is a daemonless container runtime. This means Podman just runs the service and vanishes from the entire process tree; unlike containerd or Docker, we don’t need to run a containerd or dockerd daemon. With Docker, running killall docker /containerd  just stops all your running containers by default.&lt;/p&gt;&lt;p&gt;Podman is specifically impressive because of its rootless nature. One can run any number of containers as an unprivileged user and perform privileged operations within the container, similar to a fake-root environment.  Btw, this is the exact same approach used in tools like &lt;a href=&quot;https://github.com/rootless-containers/rootlesskit&quot; target=&quot;_blank&quot;&gt;rootlesskit&lt;/a&gt;, very similar to ports in FreeBSD, or MacPorts on Apple.&lt;/p&gt;&lt;p&gt;Podman doesn’t run persistently on your system, making it incredibly memory efficient.&lt;br&gt;The toolchain is practically identical to Docker; you can use podman build, podman run, podman push, etc.&lt;br&gt;Furthermore, Podman’s build tool, Buildah, is noticeably faster, making it preferable for building images quickly and efficient specially in CI/CD environments.&lt;/p&gt;&lt;p&gt;I probably don’t need to give a re-introduction to containers; you already know that if you’re here.&lt;br&gt;Tools like Toolbox or Distrobox just utilize this exact approach of unprivileged containers sharing the host’s user space, specifically mounting&lt;br&gt;$HOME (like /home/user/).&lt;/p&gt;&lt;p&gt;TBH, I personally love the philosophy behind OSTree-based operating systems: the idea of atomic updates, either successful or failed, is the exact same reason making os tree virtually unbreakable.&lt;/p&gt;&lt;p&gt;The concept of layering here is brilliant. The base image is immutable, and any system changes are stored in a separate layer. This makes it incredibly easy to roll back to a previous state if something gets messed up. It gives you an unbeatable safety net, and the logic is identical to how standard OCI container images are layered.&lt;/p&gt;&lt;p&gt;But layering packages onto the host OS isn’t always the ideal thing to do. The best approach is to use a Toolbox container for installing and running your day-to-day apps.&lt;/p&gt;&lt;p&gt;You can create a random Toolbox container and install any app you want. No matter how many containers you spin up, if their base image is the same, they will share that underlying image and won’t cost you extra gigabytes in storage. Sharing that base layer saves disk space and makes managing multiple environments effortless.&lt;/p&gt;&lt;p&gt;But aren’t containers bloated? Don’t they cost you a lot of storage space (the container tax)? The answer is both yes and no. Yes, it does cache a lot of data, but the benefits are well worth the trade-off. You get a super solid base OS while keeping the flexibility of other distros. I’ve installed paru (the Arch User Repository helper) inside a Toolbox container, installed .deb and .rpm packages, and things just work.&lt;br&gt;Distrobox or Toolbox?&lt;/p&gt;&lt;p&gt;I want something easy. I don’t want to type toolbox enter every time I need to run a basic app.&lt;/p&gt;&lt;p&gt;As I’ve mentioned, Toolbox containers generally respect the host machine a bit more (plus PAM is shared with the host), but Distrobox is undeniably convenient because of the export feature like &lt;code&gt;distrobox-export --app /usr/bin/ghostty&lt;/code&gt; and &lt;code&gt;distrobox-export --bin /usr/bin/ghostty&lt;/code&gt;&lt;/p&gt;&lt;p&gt;But what if I share something that makes Toolbox just as convenient or better ?&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;curl&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;-fsSL&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;https://github.com/Pratyay360/toolbox-export/raw/refs/heads/main/install.sh&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;constant function&quot;&gt;bash&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Benefits of ostree ?&lt;/h3&gt;&lt;p&gt;libostree or Ostree is like a version control system similar to git but for the entire os. It is a crucial component of your atomic distro. Either you update your machine reboot, update completes successfully or unsuccessfully.&lt;/p&gt;&lt;p&gt;Even after success, ostree based os can still rollback to the previous state if anything is not working. resetting your os back to previous commit just works. It’s too hard to mess with such a&lt;/p&gt;&lt;p&gt;resilient system. Specially if you are using, your own recipie to build os Though it’s hard to make a faulty container image. You  can identify any flaws during the image build process.&lt;/p&gt;&lt;h4&gt;So, is everything perfect with Toolbox containers?&lt;/h4&gt;&lt;ol&gt;&lt;li&gt;Networking related apps like wireshark, airmon-ng etc etc. and drivers don’t play nice; I am yet to use  installed in containerd , though script evaluation is fast. Also, I’ve noticed apps installed via Distrobox often fail to honour the system theme, on the other side Toolbox respects the system theme + apps share the same secret store, in my case it’s kde wallet, and the apps I have installed in Toolbox never made me feel like they are alien to my system.&lt;/li&gt;&lt;/ol&gt;&lt;h5&gt;What if I don’t want the prepacked apps that comes with Fedora can i modify without pinning?&lt;/h5&gt;&lt;h6&gt;What if I want to remove Konsole and use Ghostty as my default without layering &amp; pinning it onto my host os? I’ve actually run Ghostty installed inside an Arch Linux Toolbx as my default terminal, and it felt 100% native.&lt;/h6&gt;&lt;p&gt;If you want absolute control on what softwares should be available on os and what not, I highly suggest making your own customized bootc image. Believe me, it is as easy as sipping a cup of tea thanks to tools like Bluebuild or OSBuild and the community around it.&lt;/p&gt;&lt;p&gt;I personally have 3 to 4 Toolbox images running continuously on my system, containing most of my daily apps.&lt;/p&gt;&lt;p&gt;One containing everything development related like ides, editors.&lt;/p&gt;&lt;p&gt;One containing all the media and specially CLI tools in a arch based toolbox. and another just for testing my &lt;a href=&quot;https://github.com/Pratyay360/drawx&quot; target=&quot;_blank&quot;&gt;apps&lt;/a&gt;. All my web browsers are downloaded via the arch toolbox.&lt;/p&gt;&lt;p&gt;And a Debian based toolbox just for testing my apps. and I use that ephemerally.&lt;/p&gt;&lt;a href=&quot;https://asciinema.org/a/nxr4bAotEDlCuwvS&quot; title=&quot;asciicast&quot;&gt;&lt;img src=&quot;https://asciinema.org/a/nxr4bAotEDlCuwvS.svg&quot; alt=&quot;asciicast&quot;&gt;&lt;/a&gt;
&lt;p&gt;See the disk usage of my system by containers above.&lt;/p&gt;&lt;p&gt;By the way, I am a full stack developer. And I have a graveyard of dozens of late-night ideas, abandoned projects, and half finished stuffs. You can believe me when I say the storage utilized by those 10-15 project folders easily takes up 2 to 2.5x the amount of storage that all my containers do! and that’s just from npm’s node_modules only and rust, go cache is yet to look into.&lt;/p&gt;&lt;p&gt;&lt;img width=“705” height=“250” alt=“storage” src=“&lt;a href=&quot;https://github.com/user-attachments/assets/d8507220-0d08-408a-ac4b-7bb5490009ec&quot;&gt;https://github.com/user-attachments/assets/d8507220-0d08-408a-ac4b-7bb5490009ec&lt;/a&gt;” &gt;&lt;/img&gt;&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/1789669704/</link>
        <pubDate>Thu, 17 Sep 2026 18:28:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/1789669704/</guid>
      </item>
    
      <item>
        <title>setting up redirect rules in dns</title>
        <description>&lt;h1&gt;How Google and Microsoft Handle Redirects&lt;/h1&gt;&lt;h2&gt;So how do Google/Microsoft-like companies handle the redirects we see and use on a daily basis?&lt;/h2&gt;&lt;p&gt;The most notable one I can remember was &lt;a href=&quot;https://perplexity.in&quot; target=&quot;_blank&quot;&gt;Perplexity.in&lt;/a&gt; → redirecting users to Gemini. From a technical standpoint, how do you redirect to a completely separate DNS zone without any control over that zone? + How are TLS certs served in such a way?&lt;/p&gt;&lt;p&gt;Google’s domain resolves securely; parameters remain intact; browsers show no warnings.&lt;br&gt;All common HTTP request methods, such as GET, POST, DELETE, and PUT, can function correctly through proper redirection. However, to ensure that methods other than GET (such as POST, PUT, or DELETE) are preserved during a redirect, it is necessary to use HTTP status codes &lt;strong&gt;307 (Temporary Redirect)&lt;/strong&gt; or &lt;strong&gt;308 (Permanent Redirect)&lt;/strong&gt;. These status codes instruct clients to repeat the original request method and body at the new location, thereby maintaining the integrity of the operation.&lt;/p&gt;&lt;p&gt;So how are they served? How is HTTPS/TLS handled? How do search engines handle these redirects, and how do they know that a domain is valid or an alternate destination for the original domain?&lt;/p&gt;&lt;p&gt;Don’t we need to tell the server, “Hey, this is your domain,” and store an A, AAAA, or CNAME record for it? How does the server know that this is a valid domain?&lt;/p&gt;&lt;p&gt;So here comes the role of your DNS provider and the way they handle redirections.&lt;/p&gt;&lt;p&gt;Setting up redirection via a DNS provider is straightforward: you point your subdomain to a local server range Cloudflare, for example, suggests using 192.0.2.1 paired with their proxy—and then create a rule within the provider’s dashboard to redirect all requests to the target domain.&lt;/p&gt;&lt;p&gt;When a user visits the subdomain, the request is routed to the local server, which then triggers the redirect to the destination. Note that this must be done using a subdomain because CNAME records cannot be assigned to an apex domain. Consequently, you can only redirect subdomains, such as “www” or any other custom prefix within that zone.&lt;/p&gt;&lt;p&gt;Types of redirections&lt;/p&gt;&lt;p&gt;google suggests some codes for redirections like 30* series.&lt;/p&gt;&lt;p&gt;301 Moved Permanently&lt;/p&gt;&lt;p&gt;302 Found&lt;/p&gt;&lt;p&gt;303 See Other&lt;/p&gt;&lt;p&gt;304 Not Modified&lt;/p&gt;&lt;p&gt;305 Use Proxy&lt;/p&gt;&lt;p&gt;306 Unused&lt;/p&gt;&lt;p&gt;307 Temporary Redirect&lt;/p&gt;&lt;p&gt;308 Permanent Redirect&lt;/p&gt;&lt;p&gt;This ensures that search engines understand how to handle the redirection and how to process the old URL.&lt;/p&gt;&lt;p&gt;The approach is straightforward: configure your DNS records to point to the DNS server itself, then establish a rule with your DNS provider to redirect all requests to the target domain. Consequently, when a user visits your subdomain, the request is handled by the provider’s local server, which then issues a redirect to the target destination.&lt;/p&gt;&lt;p&gt;Cloudflare suggests utilizing their proxy feature to route requests through their servers, allowing them to handle redirections more effectively. I previously implemented a similar setup using freedns.afraid.org via their “web forward” feature, which successfully redirected traffic but only supported HTTP no HTTPS. In contrast, Cloudflare routes traffic through their extensive proxy network, they can issue TLS certificates and serve content securely over HTTPS.&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/1789472151/</link>
        <pubDate>Tue, 15 Sep 2026 11:35:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/1789472151/</guid>
      </item>
    
      <item>
        <title>Using chezmoi to manage dotfiles</title>
        <description>&lt;p&gt;&lt;a href=&quot;https://www.chezmoi.io/&quot; target=&quot;_blank&quot;&gt;CHEZMOI&lt;/a&gt;  is a nice, modern, secure dotfiles manager with built-in support for handling secrets and provides a nice configurable/hackable ecosystem to tinker with. Chezmoi is a batteries-included dotfiles manager .&lt;/p&gt;&lt;p&gt;Unlike yadm, chezmoi doesn’t just create a git repo of your user space .  Also, chezmoi supports integration with multiple password managers&lt;/p&gt;&lt;p&gt;Also, chezmoi is super nice with dotfiles. For example, .bashrc will be named as &lt;code&gt;dot_bashrc&lt;/code&gt;&lt;/p&gt;&lt;p&gt;And if encrypted with chezmoi, it will be stored as &lt;code&gt;encrypted_dot_bashrc.age&lt;/code&gt;&lt;/p&gt;&lt;p&gt;How to  use age with chezmoi?&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;chezmoi&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;age-keygen&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;-o&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;key.txt&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;chezmoi comes prepackaged with age. you just can run any age related command with just a chezmoi prefix&lt;/p&gt;&lt;p&gt;age ==&gt; chezmoi age&lt;/p&gt;&lt;p&gt;and everything stays the same.&lt;/p&gt;&lt;p&gt;You can use chezmoi with age encryption with ssh, pgp, passphrase for recipient ..&lt;/p&gt;&lt;p&gt;I don’t recommend using a remote password manager to store secret values cz I have faced delay in shell startup due to slow internet or dns related issues.&lt;/p&gt;&lt;p&gt;$callout💡 Always remember AGE_ (in caps) is your private key and should be stored safely ..and the one age.. (in small) is your public key and we will be encrypting this to this public key as an recipient $&lt;/p&gt;&lt;h1&gt;So, I am storing my secrets in plain text in my dot files isn’t that bad and will not chezmoi mess by leaking my secrets.&lt;/h1&gt;&lt;h2&gt;answer is yes and no .&lt;/h2&gt;&lt;p&gt;1st you need to configure a chezmoi config&lt;/p&gt;&lt;p&gt;something  like this:-&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;yaml&quot;&gt;&lt;span class=&quot;string&quot;&gt;encryption = &amp;quot;age&amp;quot;
[git]
autoCommit = true
autoPush = true
[delta]
by-side = true
numbers = true
[age]
identity = &amp;quot;/home/&amp;lt;username&amp;gt;/.config/chezmoi/keys.txt&amp;quot;
recipient = &amp;quot;public age key here&amp;quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If you have added a file as encrypted chezmoi will remember that and always keep that encrypted remotely.&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;chezmoi&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;add&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;--encrypt&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;~/.profile&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;will be stored as encrypted_dot_profile.age&lt;/p&gt;&lt;p&gt;Re-tracking a file after manual edits&lt;/p&gt;&lt;p&gt;If you edited a file directly (instead of using &lt;code&gt;chezmoi edit&lt;/code&gt;), that’s fine.&lt;/p&gt;&lt;p&gt;If you want, chezmoi to re track the file from your home directory into the source state, run:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;chezmoi&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;re-add&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This will re-add the file according to your current config (including encryption rules), so the repo still only stores the encrypted version when applicable.&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/1789073130/</link>
        <pubDate>Thu, 10 Sep 2026 20:45:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/1789073130/</guid>
      </item>
    
      <item>
        <title>Doing ci/cd the easy way.</title>
        <description>&lt;h1&gt;To Begin with I Would Love to reIntroduce You to My Favourite Cli Tool Mise&lt;/h1&gt;&lt;p&gt;Mise is a version manager for dev tools &amp; dependencies, a task runner, an environment variables manager all in one place. Mise ensures that every collaborator is working on the same environment and each every stage is reproducible.&lt;/p&gt;&lt;p&gt;In an earlier post, I have discussed, managing environment variables with mise . Today I will be discussing mise’s task runner feature.&lt;/p&gt;&lt;p&gt;For example, if you are using mise, then you can write task recipes to execute a particular job. One mise task can have multiple child subtasks.&lt;/p&gt;&lt;p&gt;Like:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;ocaml&quot;&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;function_builtin variable&quot;&gt;tasks&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;install&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;description&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;Install JS dependencies&amp;quot;&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;nub install&amp;quot;&lt;/span&gt;

&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;function_builtin variable&quot;&gt;tasks&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;build project&amp;quot;&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;nub run build&amp;quot;&lt;/span&gt;

&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;function_builtin variable&quot;&gt;tasks&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;start&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;start project in production env&amp;quot;&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;nub run start&amp;quot;&lt;/span&gt;

&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;function_builtin variable&quot;&gt;tasks&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;upload&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;surge ./dist test69.surge.sh&amp;quot;&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;description&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;deploy the built dir on surge&amp;quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;blockquote&gt;&lt;p&gt;Btw surge is an awesome tool that deploys your static site for free on their CDN.&lt;/p&gt;&lt;p&gt;you can check them out: &lt;a href=&quot;https://surge.sh/&quot; target=&quot;_blank&quot;&gt;https://surge.sh&lt;/a&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;You can see basic tasks for a simple Node.js application. But you might ask, “How do I use this in CI/CD?”&lt;/p&gt;&lt;p&gt;The simple answer is:&lt;/p&gt;&lt;p&gt;With the help of mise as a task runner and with subtasks.&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;ocaml&quot;&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;function_builtin variable&quot;&gt;tasks&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;ci&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;description&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;production build&amp;quot;&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;function_builtin variable function&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;install&lt;/span&gt;
    &lt;span class=&quot;function_builtin variable&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;build&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;

&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;function_builtin variable&quot;&gt;tasks&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;deploy&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;deploy project&amp;quot;&lt;/span&gt;
&lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;function_builtin variable function&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;ci&lt;/span&gt;
    &lt;span class=&quot;function_builtin variable&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;function_builtin variable&quot;&gt;upload&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Whenever someone runs &lt;code&gt;mise run ci&lt;/code&gt;, the output always stays deterministic, which you can test on your own machine. before pushing.&lt;/p&gt;&lt;h2&gt;And Now a Question Arises: What If?&lt;/h2&gt;&lt;p&gt;I’ve Written Something Wrong in Tasks Then Isn’t It the Same as Writing the Entire Pipeline?&lt;/p&gt;&lt;p&gt;The simple answer is no. Mise never allows you to ship an invalid configuration, plus you can always debug your tasks:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;doctor&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Safety?&lt;/h3&gt;&lt;p&gt;Mise always checks and matches check-sums (SLSA) for each package downloaded. It’s generally suggested to not use “latest”, but to pin versions for example, node@24.03 or node@24.04.&lt;/p&gt;&lt;p&gt;And if you want to containerize the app before running it:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;oci&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;run&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This will spin up a container for you containing the application. (This is not suggested for chunk blobs) you can move those build artifacts to some alpine linux or distroless container.&lt;/p&gt;&lt;p&gt;Want to Spin up a Devcontainer ?&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;gen&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;devcontainer&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;--write&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Mise handles most of the things for you.&lt;/p&gt;&lt;p&gt;It’s up to you and your creativity on, how well you write task recipes. Personally, I prefer writing atomic tasks so each task stays debug able, manageable and reproducible.&lt;/p&gt;&lt;p&gt;Mise can handle shell scripts as tasks too, and you can use virtually any CLI tool thanks to its nice plugin ecosystem.&lt;/p&gt;&lt;p&gt;Let’s Stay on Our Main Topic: CI.&lt;/p&gt;&lt;p&gt;In any CI platform like GitHub Actions, GitLab Pipelines, Bitbucket Pipelines, Forgejo CI, or any custom CI one thing is always common in all, your ability to run containers and running commands inside it.&lt;/p&gt;&lt;p&gt;Want to write a GitHub Action?&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;mise&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;gen&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;github-action&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;—write&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;yaml&quot;&gt;&lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ci&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;workflow_dispatch&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;concurrency&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;group&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;${{ github.workflow }}-${{ github.ref }}&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;cancel-in-progress&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;boolean&quot;&gt;true&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;MISE_EXPERIMENTAL&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;boolean&quot;&gt;true&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;ci&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;timeout-minutes&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;10&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;actions/checkout@v6&lt;/span&gt;
      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;jdx/mise-action@v3&lt;/span&gt;
      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;mise run ci&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;But our goal isn’t to understand yaml for doing CI, but to simplify the process of writing CI pipelines. The goal is to simplify the process:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;yaml&quot;&gt;&lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ci&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;workflow_dispatch&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;pull&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;permissions&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;contents&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;read&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;pages&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;write&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;id-token&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;write&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;ci&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;container&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ghcr.io/jdx/mise:latest&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;checkout code&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;actions/checkout@main&lt;/span&gt;

      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;Install dependencies &amp;amp; building&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string punctuation_delimiter&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;
            mise deps
            mise run fetch
            mise run build&lt;/span&gt;

        &lt;span class=&quot;string property&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;string property&quot;&gt;SOME_ENV&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;${{ secrets.SOME_ENV }}&lt;/span&gt;

      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;Upload artifact&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;actions/upload-pages-artifact@main&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;string property&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;./public&lt;/span&gt;

      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;Deploy to GitHub Pages&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;deployment&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;actions/deploy-pages@main&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;For you, the basic structure of the pipeline stays the same always like some kind of like a boilerplate and the quest of one tab vs 4 spaces somehow becomes irrelevant. You can now focus on writing tasks and let mise handle the rest.&lt;/p&gt;&lt;p&gt;The fun part is that you can now run the same on any CI platform,&lt;/p&gt;&lt;p&gt;each will be giving you a predictable result&lt;/p&gt;&lt;p&gt;See a sample workflow for Forgejo Actions:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;yaml&quot;&gt;&lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;CI&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;workflow_dispatch&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;MISE_EXPERIMENTAL&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;boolean&quot;&gt;true&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;check&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;Check&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;codeberg-medium-lazy&lt;/span&gt;
    &lt;span class=&quot;string property&quot;&gt;container&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;string property&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ghcr.io/jdx/mise:latest&lt;/span&gt;

    &lt;span class=&quot;string property&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;Check out source code&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;actions/checkout@v7.0.0&lt;/span&gt;

      &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;install dependencies&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string punctuation_delimiter&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;
            mise deps
            mise run deploy&lt;/span&gt;
        &lt;span class=&quot;string property&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;string property&quot;&gt;SOME_ENV&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;${{ secrets.SOME_ENV }}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And the same for GitLab Actions:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;yaml&quot;&gt;&lt;span class=&quot;string property&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;ghcr.io/jdx/mise:latest&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;stages&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;

&lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;build&lt;/span&gt;

&lt;span class=&quot;string property&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;stage&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;build&lt;/span&gt;
  &lt;span class=&quot;string property&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;mise deps&lt;/span&gt;
    &lt;span class=&quot;punctuation_delimiter&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;mise run deploy&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
</description>
        <link>https://pratyay.bond/blog/1788377082/</link>
        <pubDate>Wed, 02 Sep 2026 19:24:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/1788377082/</guid>
      </item>
    
      <item>
        <title>Using sops &amp; age to manage environment variables</title>
        <description>&lt;p&gt;Managing &lt;code&gt;env&lt;/code&gt; variables without a secret management mechanism specially for devs working on 10’s of different things and multiple repos. Once committed into any remote git forge it becomes a hurdle to remember which &lt;code&gt;.env&lt;/code&gt;  is of which project even after using password manager just a week later. So here comes the role of secrets management and the better way is to manage secrets in my view / the easiest way to let them live with your code. Thanks to time tested algorithms like AES256 and pgp which are not so easy to crack . Read what nist has to &lt;a href=&quot;https://csrc.nist.gov/csrc/media/Events/2024/fifth-pqc-standardization-conference/documents/papers/on-practical-cost-of-grover.pdf&quot; target=&quot;_blank&quot;&gt;say about this.&lt;/a&gt;  Tbh there is no one using something like pgp/gpg for encryption it’s more or less a paper tiger because of it’s hardness and no one barely knows how to use pgp. And to make pgp work you need the recipient to be able to decrypt the message. I doubt 99% of the people can’t even decrypt their own file after a week. So using pgp is a big no. It’s similar to loosing &lt;code&gt;.env&lt;/code&gt; . There comes age as an encryption, it’s modern, robust easy to use and manageable asymmetric keys also age can even be used with your existing credentials like, ssh, Pgp type keys for encryption.&lt;/p&gt;&lt;h1&gt;I am assuming that you are using some sort of *nix based operating system if not then at least use WSL(windows subsystem for Linux) to follow along.&lt;/h1&gt;&lt;p&gt;Here we will be using a tool like &lt;a href=&quot;https://getsops.io&quot; target=&quot;_blank&quot;&gt;sops(secret operations)&lt;/a&gt; .Sops is now a CNCF sandbox project and historically it’s been a project of people working at Mozilla, and later donated the project.&lt;/p&gt;&lt;p&gt;Sops can manage Yaml, Toml, dotenv, env.json.&lt;/p&gt;&lt;p&gt;&lt;img src=&quot;https://s6.imgcdn.dev/Y8IpEH.png&quot;&gt;&lt;/p&gt;&lt;p&gt;But writing yaml files for config is something no one should be doing.&lt;/p&gt;&lt;p&gt;Why doing Gitops the hard way, also by not commiting enviornment variables you are not creating a reference so that others can collaborate on the project, SOPs is very selective at encryption it just encrypts the values not the keys.&lt;/p&gt;&lt;p&gt;So introducing &lt;a href=&quot;https://mise.jdx.dev/&quot; target=&quot;_blank&quot;&gt;mise&lt;/a&gt;  my favourite tool nowadays to manage dev tools, tasks, handling environment variables, Generally it’s not recommended to pin “latest“ but i am doing so :(.&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;💡 To generate a mise.toml run `mise gen config` and choose tools you need from the Tui (terminal user interface)&lt;/p&gt;&lt;/blockquote&gt;&lt;pre&gt;&lt;code class=&quot;yaml&quot;&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;tools&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;string&quot;&gt;age = &amp;quot;latest&amp;quot;
sops = &amp;quot;latest&amp;quot;

[env]
SOPS_AGE_RECIPIENTS = &amp;quot;{your age recipients here}, {yet another recipient}&amp;quot;
_ = { file = &amp;quot;{ path = .env }&amp;quot; }

[tasks]
encrypt = &amp;quot;sops -e -i .env &amp;amp;&amp;amp; mv .env .env.example&amp;quot;
decrypt = &amp;quot;mv .env.example .env &amp;amp;&amp;amp; sops -d -i .env&amp;quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This is generally my overall workflow regarding secrets. BTW, the public key is shareable as it’s name, public,&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;SOPS_AGE_KEYS&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&amp;quot;AGE_PRIVATE_KEY_HERE&amp;quot;&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;or, you can use&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;sh&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;SOPS_AGE_KEY_FILE&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;string operator&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;string property&quot;&gt;HOME&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;/.sops/age/keys.txt&amp;quot;&lt;/span&gt;
&lt;span class=&quot;constant function&quot;&gt;or&lt;/span&gt; 
&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;SOPS_AGE_KEY_FILE&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;string operator&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;string property&quot;&gt;HOME&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;/.config/sops/age/keys.txt&amp;quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;keep the contents of keys.txt safe in some password manager only .&lt;/p&gt;&lt;p&gt;AGE supports YubiKey, ssh-agent as a helpers too.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://asciinema.org/a/1130380.svg&quot;&gt;
&lt;figcaption&gt;asciicast&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;This is the workflow with sops configuration.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://asciinema.org/a/DByfEGsk6UQPSzmD.svg&quot;&gt;
&lt;figcaption&gt;asciicast&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Using mise makes the process effortless notice the difference for yourself.&lt;/p&gt;&lt;p&gt;BTW, Congratulations on getting started with GitOps. Happy coding!&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/1788197745/</link>
        <pubDate>Mon, 31 Aug 2026 17:35:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/1788197745/</guid>
      </item>
    
      <item>
        <title>Hello World</title>
        <description>&lt;p&gt;This is my small corner in the internet will be sharing ideas and thoughts maybe no one will be reading this but who cares. If only me and google spider reads this that’s perfectly fine. I will be writing stuff here sharing my views, opinions, and experience i gathered over the years.&lt;/p&gt;&lt;p&gt;From the very early age computers, electronics and internet excited me a lot.&lt;/p&gt;&lt;p&gt;Btw I am a Linux user for the past 5 6 years, so I can claim that I have learned a little bit about UNIX and Linux, and I think I am self entitled to share some of my experiences here Btw, now days i boot an atomic/immutable bootc based distro (which is heavily customized by me)&lt;/p&gt;&lt;p&gt;Most of the stuff I do is just to explore. Not afraid of trying anything new or unknown I am still equally open and curious about learning new things.&lt;/p&gt;&lt;p&gt;By the way, I had a childhood dream of becoming a lawyer because I tend to defend any side in any debate &lt;del&gt;though that usually stays within my social bubble.&lt;/del&gt; However, with age I have realized that I am too introverted for that profession.&lt;/p&gt;&lt;p&gt;I have got some hot takes too, but won’t be sharing everything in one post.&lt;/p&gt;&lt;h1&gt;So, see you later dear anon&lt;/h1&gt;</description>
        <link>https://pratyay.bond/blog/firstpost/</link>
        <pubDate>Sat, 22 Aug 2026 21:13:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/firstpost/</guid>
      </item>
    
      <item>
        <title>my Linux journey so far</title>
        <description>&lt;h1&gt;Beginning story&lt;/h1&gt;&lt;p&gt;It was during covid Lockdown my school was off and I was binge watching some YouTube videos on my windows desktop sitting and suddenly I had encountered with a video about Linux and riced ui stuff I was very much amused about how good looking, minimalistic that was then I decided to switch the os of my desktop and was little bit scared about my ability to use Linux stuff that’s why i have downloaded a Ubuntu Iso as ubuntu comes 1st when searching for something about Linux and I installed virtual box and tried it out by following some youtube tutorials it was good and most of the software I used to use were Pirated Proprietary ones like photoshop, microsoft office etc. Also being good with terminal was important so that if I messed something I am capable of repairing it with some google search and some youtube videos. So I had installed ubuntu wsl on my windows machine and started learning little commands used in the unix world. Tbh, I loved spending time on terminal and Vs code at that time like crazy. I was just coding learning new stuff from youtube and sitting in front of the monitor all day after using Wsl for 1-1.5 months and using Ubuntu on Virtual Box my love for linux just grew surprisingly. My desktop at home used to have less ram so virtual Box experience was not that good for me.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/2/27/Ubuntu_on_Windows_10_-_bash.png&quot;&gt;
&lt;figcaption&gt;Windows Subsystem for Linux - Wikipedia&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;(This is a visual representation of Wsl Obv copied from internet not mine as i don’t use windows any more)&lt;/p&gt;&lt;h1&gt;Installing Linux along side Windows&lt;/h1&gt;&lt;p&gt;So, after trying linux for 1-1.5 months on my computer(wsl) and thanks to low ram my experience with Virtualbox was not that good I had decided to install linux along side windows (dual boot). I was noob at that time at doing stuffs, installing a simple operating system was a trouble some job for me I deleted one partition from windows and installed ubuntu in that space it was not installed in the ssd even so I used to manually switch os from the bios. Even being installed on the hdd the ubuntu version was faster compared to the windows 10, I started small tinkering and exploring linux at that time that I was spending like 2/3rd of my time on linux and was booting on windows just to play some games. Once I was fully convinced about my linux skills I installed ubuntu permanently on the ssd part and also formatted my hdd drive from NTFS to ext4. Now I was officially a Linux user.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,c_fill,w_3840,h_2160/https://ubuntu.com/wp-content/uploads/d944/yaru-screenshot-large.jpg&quot;&gt;
&lt;figcaption&gt;Ubuntu Desktop&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;(Representation of ubuntu desktop)&lt;/p&gt;&lt;h1&gt;Distro Hopping&lt;/h1&gt;&lt;p&gt;After installing linux permanently on my desktop there was no looking back terminal was great, I have found suitable Foss or web based alternatives to whatever I used to do. Installing/ uninstalling apps was easier than ever and after installing linux I started following multiple foss advocates and linux channels on youtube. Ricing desktop changing themes customizing is what i used to do all day . But sadly there isn’t enough option for customization on Gnome. Also I started learning about multiple distros like elementry os, manjaro, endeavour os, fedora etc etc. Some I used to love some don’t and some actually haven’t worked properly with my computer may be due to some driver compatibility or I may have broken them. The Distro I used to love the most as a beginner was PopOS it was similar to Ubuntu and it’s cosmic desktop used to be good by default. After distro hopping multiple times i realised it’s window manager and desktop environment what changes looks not the distro itself. Using PopOs for about 4 5 months I had shifted to Manjaro Kde, it was my 1st time using kde plasma and some arch derivative with kde plasma there is unlimited possibilities of customization and it’s the best desktop environment for normal users like me. Resource consumption was far lesser than gnome also loved the krunner thing which is very similar to the spotlight. I remember showing my desktop to my friends which I have modified watching Linux Experiment youtube channel, it was dope. Thanks to manjaro I got introduced to AUR(Arch user repository) It is a repository which holds shell scripts so that any one can install a app with minimum effort natively without any sandbox like flatpak or snap.&lt;/p&gt;&lt;h1&gt;Ditching Manjaro&lt;/h1&gt;&lt;p&gt;I personally felt some apps broke and my os broke. It was due to manjaro holds arch packages itself for testing purposes it broke apps installed through aur. Then after ditching manjaro I tried Garuda linux kde plasma edition it looked good tailored animations were great but it was resource intensive and my pc was having problems with it. So I ditched Garuda after trying for 2 3 days and installed Endeavour Os, Endeavour Os community on telegram specifically very helpful and they are very active I have communicated them with problems many times and they have solved things for me multiple time. Generally linux community is considered rude etc. After Using Endeavour os my distro hopping journey surprisingly stopped for years I have used it for continuous 2-3 years and I settled down.&lt;/p&gt;&lt;h1&gt;Exploring Cyber Security&lt;/h1&gt;&lt;p&gt;Have watched multiple movies, web series during lock down and I got very much motivated by Robot web series to explore cyber security. I have watched videos of hackersploit on youtube and explored my cyber security journey but most of the videos were based on concepts direct practical videos were not that much available on youtube so I tried udemy and telegram to get some videos on the topic I used my desktop to install Kali Linux and parrot Os on virtual box have also tried wifi password cracking, exploiting some old versions of wordpress etc.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://www.kali.org/images/kali-desktop-gnome.jpg&quot;&gt;
&lt;figcaption&gt;Kali Linux | Penetration Testing and Ethical Hacking Linux&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;(visual representation of kali linux desktop)&lt;/p&gt;&lt;h1&gt;Current Os&lt;/h1&gt;&lt;p&gt;Have purchased a powerful hp laptop with good processor and I had installed Endeavour os on it. The laptop was working well but after kernel v 5.8 bluetooth audio used to stutter a lot and wifi 5 ghz was not stable on my laptop may be due to some driver related issue so I switched my distro once again to the distro which creator of linux Linux Torvalds himself uses Fedora. After years of using Arch based distros i realized that they were not that stable for using them on the primary machine.&lt;/p&gt;&lt;p&gt;I personally boot Kde plasma flavour of fedora linux it’s been 6 months and it’s running fine for me rolling release and stable flatpack updated on top of it are good. Now, I don’t distrohop any more I have found my sweet spot.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1734346269192/a55b5cc6-2c0c-4204-9b61-463f54161f71.png&quot;&gt;
&lt;figcaption&gt;fastfetch&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;(Fast Fetch of my personal laptop)&lt;/p&gt;&lt;h2&gt;&lt;strong&gt;Freedom&lt;/strong&gt;&lt;/h2&gt;&lt;p&gt;One of the biggest reasons I fell in love with Linux is the sense of &lt;strong&gt;freedom&lt;/strong&gt; it offers. Unlike proprietary operating systems like Windows or macOS, Linux doesn’t limit you to a particular way of doing things. You’re free to:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;p&gt;Choose from hundreds of distributions that suit your needs, whether it’s a beginner-friendly distro like Ubuntu or a cutting-edge rolling release like Arch Linux.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Customize your system to work the way you want, from changing the desktop environment to tweaking even the smallest settings.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Use your computer without worrying about invasive tracking or forced updates.&lt;br&gt;This freedom extends to how you use your hardware as well. Linux runs smoothly even on older machines, letting you breathe new life into aging systems. For someone like me, who loves tinkering and optimizing, this level of control felt liberating.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;&lt;strong&gt;Customization&lt;/strong&gt;&lt;/h2&gt;&lt;p&gt;The &lt;strong&gt;customization&lt;/strong&gt; capabilities of Linux are what initially drew me in—and they’re what kept me hooked. With Linux, you’re not stuck with a standard, unchangeable interface. Instead, you can:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;p&gt;Switch between desktop environments like GNOME, KDE Plasma, or XFCE, depending on your preferences.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;“Rice” your desktop to create stunning and minimalistic designs, tailoring everything from the color schemes to the window manager.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Modify the terminal to look and behave exactly how you want, using themes, plugins, and tools like Zsh or Oh My Zsh.&lt;br&gt;For me, experimenting with different configurations felt like a creative outlet. The ability to design a workspace that was both visually pleasing and incredibly functional was empowering. Unlike closed systems, Linux encouraged me to make my computer an extension of my personality.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;&lt;strong&gt;Open-Source Philosophy&lt;/strong&gt;&lt;/h2&gt;&lt;p&gt;At the heart of Linux is its &lt;strong&gt;open-source philosophy&lt;/strong&gt;, which fundamentally changed the way I view technology. Open-source software isn’t just about using free tools—it’s about being part of a community where collaboration and transparency take precedence.&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;p&gt;With Linux, I realized I wasn’t just a passive consumer; I was part of a larger movement that values sharing knowledge and empowering others.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;I could access the source code of the operating system and understand how it worked.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;While I wasn’t skilled enough to contribute back then, knowing that I could learn from it or even modify it if needed was inspiring.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Most of the apps I used were open-source, from LibreOffice to GIMP, which helped me move away from pirated proprietary software. The open-source philosophy also made me appreciate how Linux thrives because of its community. Whether it was asking for help on forums, following FOSS advocates on YouTube, or contributing bug reports, I felt like I was part of something bigger.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h1&gt;ostree&lt;/h1&gt;&lt;p&gt;ostree based distros like kinoite and bazzite are my new preference. have started with Ublue’s aurora and have loved immutable distributions. So installed kinoite on my laptop and have been using it for past 6 7 months. and it feels so complete as a distro and the way it handles updates and rollbacks is just amazing. I have rebased from kinoite base to my own &lt;a href=&quot;https://github.com/Pratyay360/blueee-os&quot; target=&quot;_blank&quot;&gt;recepie&lt;/a&gt;. Images are available at &lt;a href=&quot;https://quay.io/organization/pratyay360&quot; target=&quot;_blank&quot;&gt;quay.io&lt;/a&gt;&lt;/p&gt;&lt;h1&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;Switching to Linux taught me more than just technical skills—it gave me a new perspective on &lt;strong&gt;freedom, creativity, and community&lt;/strong&gt;. The ability to customize my system, use free and open-source software, and break away from proprietary restrictions made my journey rewarding. Linux isn’t just an operating system; it’s a way to embrace technology with curiosity and empowerment.&lt;/p&gt;&lt;h1&gt;Continuation&lt;/h1&gt;&lt;p&gt;Using linux is like a journey and the path is full of learning. I will be updating this post as my workflow changes.&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/16december2024/</link>
        <pubDate>Mon, 16 Dec 2024 14:55:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/16december2024/</guid>
      </item>
    
      <item>
        <title>Deploying nextjs app on cloudflare pages</title>
        <description>&lt;p&gt;Cloudflare pages is the best alternative when it comes to serverless platforms like Vercel or Netlify . Because cloudflare pages is virtually free and unlimited where others are limited for 100Gb bandwidth. Also there is no limitation like no commercial use on free version like Vercel.&lt;/p&gt;&lt;p&gt;You can compare the pricing of &lt;a href=&quot;https://vercel.com/pricing&quot; target=&quot;_blank&quot;&gt;vercel&lt;/a&gt;, &lt;a href=&quot;https://www.netlify.com/pricing&quot; target=&quot;_blank&quot;&gt;netlify&lt;/a&gt;, &lt;a href=&quot;https://www.cloudflare.com/en-in/plans/developer-platform/&quot; target=&quot;_blank&quot;&gt;cloudflare pages&lt;/a&gt; .&lt;/p&gt;&lt;p&gt;To be honest though cloudflare pages is free and unlimited but SSR (Server Side Rendering) is not supported by it which is the only visible downside of using cloudflare pages all pages are statically rendered on client machine. Cloudflare pages has unlimited bandwidth and requests for free which is great for some serious apps to casual side projects. It’s better compared to paying $20 for some server side rendering and proprietary Vercel optimization.&lt;/p&gt;&lt;p&gt;Now let’s see how to use cloudflare pages along with NEXT.JS,&lt;/p&gt;&lt;h1&gt;Create a &lt;a href=&quot;https://nextjs.org/docs&quot; target=&quot;_blank&quot;&gt;next&lt;/a&gt; project with&lt;/h1&gt;&lt;p&gt;&lt;code&gt;npx create-next-app@latest&lt;/code&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707913117934/664bb591-d118-4194-a2a3-ceace1a04c56.png&quot;&gt;
&lt;figcaption&gt;Terminal Next&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;upload project to &lt;a href=&quot;https://github.com/Pratyay360/test-app&quot; target=&quot;_blank&quot;&gt;github&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707913665642/98789bc9-d8ff-4a84-8a5a-5e3d8f92fc2b.png&quot;&gt;
&lt;figcaption&gt;github page&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Open &lt;a href=&quot;https://www.cloudflare.com/&quot; target=&quot;_blank&quot;&gt;cloudflare homepage&lt;/a&gt; login and in dashboard go to workers and pages&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707913912594/7f2ec47c-58cb-4eab-8f87-22388289dcfb.png&quot;&gt;
&lt;figcaption&gt;cloudflare dashoard&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;click on create application&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707914039120/52ed78aa-17a3-4d47-9a78-2abfd5e0d252.png&quot;&gt;
&lt;figcaption&gt;workers and pages&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;click on pages and on connect to git&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707914223044/0cd32b05-f5fc-496f-82ba-431edd6e8194.png&quot;&gt;
&lt;figcaption&gt;create application&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Link your git repository and begin setup and choose Next.Js in the framework section&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707914357980/be577f2e-5a2f-4c29-b6c2-7b498e1cb9e5.png&quot;&gt;
&lt;figcaption&gt;deploy options&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;leave everything as it is if you are not using environment variables. If you are using environment variables then click on the option and add your environment variables.&lt;/p&gt;&lt;p&gt;Hit the &lt;code&gt;Save and Deploy&lt;/code&gt; button.&lt;/p&gt;&lt;p&gt;There will be a error while opening the generated site like&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707914929214/73c90bb4-8ed5-4d77-8646-7c48a387cc35.png&quot;&gt;
&lt;figcaption&gt;Flag error&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;you have to copy the flag &lt;code&gt;nodejs_compat&lt;/code&gt; and go to settings of the deployment and open functions window in it.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707915246626/ba8527d6-4eef-48fa-a3c0-32b3f6877fa6.png&quot;&gt;
&lt;figcaption&gt;settings&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;In functions window there is a option to add compatibility flags add the copied text in both Production and Preview Options.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707915352071/1ef9d53d-a0c4-4cc8-97f5-a0addf38bd30.png&quot;&gt;
&lt;figcaption&gt;flags&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Also change the Compatibility date to the nearest one (if not configured automatically)&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707915435201/e5f8a643-8c37-46ac-ac5a-4a25c5b38423.png&quot;&gt;
&lt;figcaption&gt;compatibility date&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;After Doing everything thoroughly you have to re deploy the app by clicking on retry deployment.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707915677923/cc8eca20-0e03-42e3-849e-c04d975cf3d7.png&quot;&gt;
&lt;figcaption&gt;retry deployment&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;After doing all the steps correctly the Next.Js app will be deployed in Cloudflare Pages &lt;a href=&quot;https://test-app-kjx.pages.dev/&quot; target=&quot;_blank&quot;&gt;link&lt;/a&gt;&lt;/p&gt;&lt;h1&gt;Result&lt;/h1&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1707916073390/77824d3d-b306-42f4-962c-6ef9474431ce.png&quot;&gt;
&lt;figcaption&gt;result&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Feel free to comment if you are facing any problem.&lt;/p&gt;&lt;p&gt;Happy coding &lt;code&gt;:)&lt;/code&gt;&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/14thfeb2024/</link>
        <pubDate>Wed, 14 Feb 2024 14:55:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/14thfeb2024/</guid>
      </item>
    
      <item>
        <title>Using Google Sheets as a Database</title>
        <description>&lt;h1&gt;How to Use Google Sheets as a Database: A Complete Guide&lt;/h1&gt;&lt;h1&gt;Introduction :-&lt;/h1&gt;&lt;p&gt;Now you can use Google Sheets as a basic database to make your project work and prototype your project using google’s inbuilt free api &lt;code&gt;Apps Script&lt;/code&gt;.&lt;/p&gt;&lt;p&gt;Google’s spreadsheet can store text, number etc. and you can receive data in json format and use in your project in this blog I am going to show you how to store collected from customized form. One can follow this code with moderate level of coding knowledge in Javascript / React js.&lt;/p&gt;&lt;h1&gt;1st step to start the project is to create a spreadsheet in Google Sheet&lt;/h1&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703787617966/09e8bb0a-a45e-4261-bf24-12222b6cc0b2.png&quot;&gt;
&lt;figcaption&gt;sheet home page&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Click on the &lt;code&gt;+&lt;/code&gt; icon and rename the spreadsheet name.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703787737106/6104c007-db83-4c1e-b2dd-3dbc78fc89d1.png&quot;&gt;
&lt;figcaption&gt;sheet title&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;here I am naming the sheet as &lt;code&gt;form data&lt;/code&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703787784897/59028129-8462-4a6e-b584-38a44bd35a9a.png&quot;&gt;
&lt;figcaption&gt;column name&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;I am creating 3 columns &lt;code&gt;Name&lt;/code&gt; , &lt;code&gt;Email&lt;/code&gt; and &lt;code&gt;Message&lt;/code&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703787893999/b51df5a2-263f-4c86-abf9-ade9946e0163.png&quot;&gt;
&lt;figcaption&gt;sheet_id&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;I have given my sheet name as &lt;code&gt;data&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Now to generate a restful api for the given sheet we have to click on Extensions -&gt; Apps Script&lt;/p&gt;&lt;p&gt;If you are following me step by step then your sheet should be like&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703788242840/8a4b4aee-e6e8-4838-9d8d-f09da611a82d.png&quot;&gt;
&lt;figcaption&gt;spread sheet&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;After opening &lt;strong&gt;Apps Script&lt;/strong&gt; you should change the code with&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;sheets&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;SpreadsheetApp&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;openByUrl&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;&amp;lt;Enter Spreadsheet url&amp;gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;like&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;comment&quot;&gt;// const sheets = SpreadsheetApp.openByUrl(&amp;quot;https://docs.google.com/spreadsheets/d/1RJNF_42I9p3MTBPBM8aEVe0ZWLRzccojNNoKxGT7EHw/edit#gid=0&amp;quot;);&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;sheet&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;sheets&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;getSheetByName&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;data&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;doPost&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;keyword&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;parameter&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;sheet&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;appendRow&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;Name&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;Email&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;Message&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;ContentService&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;createTextOutput&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Message Sent!&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now click on deploy&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703788395644/95fb98d0-01b9-4c7a-a167-88a548939f71.png&quot;&gt;
&lt;figcaption&gt;apps script page&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;New Deployment -&gt; Select Type (Web App) -&gt; Then click Deploy&lt;/p&gt;&lt;p&gt;Make Sure to change access to anyone.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703788564454/28688698-170f-4296-8a95-da97e4fe89cf.png&quot;&gt;
&lt;figcaption&gt;deploy page&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Don’t forget to copy the web app link We will be using it as the&lt;/strong&gt;&lt;code&gt;api&lt;/code&gt;&lt;strong&gt;Now open your html project and add use the following syntax&lt;/strong&gt;&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;use client&amp;quot;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;react&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;hydrateRoot&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;apos;react-dom/client&amp;apos;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;useEffect&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;useState&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;apos;react&amp;apos;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;FormEvent&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;apos;react&amp;apos;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;buildCustomRoute&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;next/dist/build&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;Home&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;isClient&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;setIsClient&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constant_builtin&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;Submit&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;: &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;FormEvent&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;HTMLFormElement&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;preventDefault&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formData&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;FormData&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;currentTarget&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formData&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Name&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formData&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Email&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formData&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Message&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;alert&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Please fill all the fields&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
            &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;res&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;fetch&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;
                &lt;span class=&quot;comment&quot;&gt;// Enter your link here&lt;/span&gt;
                &lt;span class=&quot;string&quot;&gt;&amp;quot;https://script.google.com/macros/s/S2$e@vgjgK5hpeS%6C7PS^LDJ8^6J9nV3nW7%ysPsPADhwYaA!kQMngE*EP%SZD*SbS3^g/exec&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;property&quot;&gt;method&lt;/span&gt;: &lt;span class=&quot;string&quot;&gt;&amp;quot;POST&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;property&quot;&gt;body&lt;/span&gt;: &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formData&lt;/span&gt;
                &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;
                &lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;response&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property&quot;&gt;status&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;200&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
                        &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formElement&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;form&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;HTMLFormElement&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
                        &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formElement&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
                            &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;formElement&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;reset&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
                        &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
                    &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
                    &lt;span class=&quot;keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
                        &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;alert&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Something went wrong&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
                    &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
                &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;
                &lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;catch&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;console&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Error:&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
                &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;useEffect&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;setIsClient&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constant_builtin&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;text-center items-center justify-center p-5 mt-7 top-36 tracking-[20px] text-gray-500 text-2xl lg:text-4xl font-bold&amp;quot;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Message Me&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;section&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;text-gray-300 body-font&amp;quot;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;container px-5 py-24 mx-auto&amp;quot;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;flex flex-wrap -m-10 justify-center whitespace-break-spaces&amp;quot;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                        &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;comment&quot;&gt;/* Form Start Here  */&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
                        &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                        &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;isClient&lt;/span&gt; ? &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;
                            &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;form&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;form&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;flex flex-col space-y-5&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;onSubmit&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;Submit&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;font-bold text-lg text-white &amp;quot;&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Name&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;text&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Name&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Enter Name&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;border rounded-lg py-3 px-3 mt-2 bg-black border-indigo-600 placeholder-white-500 text-white&amp;quot;&lt;/span&gt; /&amp;gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;font-bold text-lg text-white&amp;quot;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Email&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;email&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Email&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;email&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;example@email.com&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;border rounded-lg py-3 px-3 mt-2 bg-black border-indigo-600 placeholder-white-500 text-white&amp;quot;&lt;/span&gt; /&amp;gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;font-bold text-lg text-white &amp;quot;&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Message&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;text&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Message&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;Enter Your Message&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;border rounded-lg py-3 px-3 mt-2 bg-black border-indigo-600 placeholder-white-500 text-white&amp;quot;&lt;/span&gt; /&amp;gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;border border-indigo-600 hover:bg-indigo-600 bg-black text-white rounded-lg py-3 )font-semibold px-2&amp;quot;&lt;/span&gt; &lt;span class=&quot;property&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;string&quot;&gt;&amp;quot;submit&amp;quot;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Send Message&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                            &amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;form&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; :
                            &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;
                                &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Form not working properly Please report to pratyaymustafi@outlook.com&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                            &lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
                        &amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                        &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;comment&quot;&gt;/* Form End */&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
                    &amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
                &amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
            &amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;section&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;

        &amp;lt;/&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Here I am using next.js you can use the same code with react&lt;/h2&gt;&lt;p&gt;Here is the output of the code&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703788879735/dde905f9-ec9b-4a55-9ee7-4e58c23a1de9.png&quot;&gt;
&lt;figcaption&gt;message me page blank&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Here I am sending a dummy message just as an example&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703789035408/6884dd91-c5c8-4e5f-a9a7-07bf23c007bf.png&quot;&gt;
&lt;figcaption&gt;message me page filled&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;As you can see the in the form is inserted into the spread sheet.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1703789052417/37c78462-af4d-48c7-8f71-2ef445f49002.png&quot;&gt;
&lt;figcaption&gt;recieved response&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;h1&gt;Cons of using spreadsheet as database&lt;/h1&gt;&lt;ul&gt;&lt;li&gt;Increased Dependency on google’s api&lt;/li&gt;&lt;li&gt;Less Scalability&lt;/li&gt;&lt;li&gt;Not so professional as it’s no so safe to store users data in just a spreadsheet.&lt;/li&gt;&lt;/ul&gt;&lt;h1&gt;Pros&lt;/h1&gt;&lt;ul&gt;&lt;li&gt;Easy prototyping&lt;/li&gt;&lt;li&gt;Can be used to make customized survey form&lt;/li&gt;&lt;li&gt;Cost Effective&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;Have used codes of &lt;a href=&quot;https://www.youtube.com/watch?v=ZA6j2PhXSUg&quot; target=&quot;_blank&quot;&gt;Anatu Tech&lt;/a&gt; partly here.&lt;/p&gt;&lt;p&gt;Happy coding &lt;code&gt;:)&lt;/code&gt;&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/december-29-2023/</link>
        <pubDate>Fri, 29 Dec 2023 14:55:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/december-29-2023/</guid>
      </item>
    
      <item>
        <title>Speed Up Compilation of React.js and Next.js Apps</title>
        <description>&lt;h1&gt;&lt;strong&gt;Introduction:&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;Million js is a library that can be used to speed up the compilation of React and Next js apps. It does this by using a custom compiler that is optimized for performance. Million js also uses a custom virtual DOM that is more efficient than the default React virtual DOM Million js enhances React / Next js performance up to 70%.&lt;/p&gt;&lt;h1&gt;&lt;strong&gt;How to use Million js:&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;To use Million js, you need to install it and then add the &lt;code&gt;block()&lt;/code&gt; function to your React code. The &lt;code&gt;block()&lt;/code&gt; function takes a React component as its input and returns a new component that is optimized for performance.&lt;/p&gt;&lt;p&gt;Here is an example of how to use Million.js:&lt;/p&gt;&lt;h1&gt;Normal react snippet&lt;/h1&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Hello world&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;/&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h1&gt;Same code snippet with Million.js&lt;/h1&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;block&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;million/react&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;block&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable function&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;Hello world&amp;lt;/&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;/&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The &lt;code&gt;block()&lt;/code&gt; function will optimize the &lt;code&gt;App&lt;/code&gt; component for performance. This will make the compilation of the React app faster.&lt;/p&gt;&lt;h1&gt;&lt;strong&gt;How Million.js works:&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;Million.js works by using a custom compiler that is optimized for performance. The compiler uses several techniques to speed up the compilation of React code, including:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;Using a custom virtual DOM that is more efficient than the default React virtual DOM.&lt;/li&gt;&lt;li&gt;Optimizing the code for specific browsers and devices.&lt;/li&gt;&lt;li&gt;Reducing the amount of code that needs to be compiled.&lt;/li&gt;&lt;/ul&gt;&lt;h1&gt;&lt;strong&gt;Installing Million.js:&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;You can install Million.js using the following command:&lt;/p&gt;&lt;p&gt;&lt;code&gt;npm&lt;/code&gt;&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;million&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;pnpm&lt;/code&gt;&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;pnpm&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;million&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;yarn&lt;/code&gt;&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;yarn&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;add&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;million&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h1&gt;&lt;strong&gt;Using Million.js with Next.js:&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;If you are using Next.js, you need to rename your &lt;code&gt;Next.config.js&lt;/code&gt; file to &lt;code&gt;Next.config.mjs&lt;/code&gt; and then add the following code to the file:&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;million&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&amp;quot;million/compiler&amp;quot;&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;nextConfig&lt;/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;punctuation_bracket&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;property&quot;&gt;reactStrictMode&lt;/span&gt;: &lt;span class=&quot;constant_builtin&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;punctuation_bracket&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;million&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;property function_method&quot;&gt;next&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;constructor constant variable_builtin function_builtin variable&quot;&gt;nextConfig&lt;/span&gt;&lt;span class=&quot;punctuation_bracket&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;punctuation_delimiter&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This will make Next js use the Million js compiler and you can easily compile react code up to 70% faster.&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://million.dev/&quot; target=&quot;_blank&quot;&gt;For more information visit the official Million Js website&lt;/a&gt;&lt;/p&gt;&lt;p&gt;Happy coding &lt;code&gt;:)&lt;/code&gt;&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/17thjuly2023/</link>
        <pubDate>Mon, 17 Jul 2023 00:00:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/17thjuly2023/</guid>
      </item>
    
      <item>
        <title>Step-by-Step Guide to Setting Up a Free Self-Hosted VPN Using GitHub Education Pack</title>
        <description>&lt;h1&gt;Step-by-Step Guide to Setting Up a Free Self-Hosted VPN Using GitHub Education Pack&lt;/h1&gt;&lt;h2&gt;Set up a Privacy-Friendly Free VPN We Need to Have a VPS Hosted on a Server or If You Have a Home Server You Can Forward the Ports You Get While Setting up OpenVPN in It but as Most Isp(Internet Service Providers) Uses CGNAT(Carrier-Grade NAT) It’s Hard to Get a Dedicated Public IP Address for You from the Isp They May Charge You Extra Money for Dedicated Public IP Too. So We Can Use a VPS Which Is Easy to Use and If You Take a VPS in a Foreign Nation You Can Bypass Censorship in Your Nation Too Which Is Something Extra than Self-Hosting in a Home Server.&lt;/h2&gt;&lt;p&gt;With the GitHub education pack you are getting a trial version of &lt;a href=&quot;http://aws.amazon.com&quot; target=&quot;_blank&quot;&gt;AWS&lt;/a&gt;, &lt;a href=&quot;http://azure.microsoft.com&quot; target=&quot;_blank&quot;&gt;azure&lt;/a&gt;, and &lt;a href=&quot;https://m.do.co/c/fc5d82bc2f25&quot; target=&quot;_blank&quot;&gt;digital ocean&lt;/a&gt; you must have to have a credit card or an international debit card to verify your payment method. here I am going to use the &lt;a href=&quot;https://m.do.co/c/fc5d82bc2f25&quot; target=&quot;_blank&quot;&gt;digital ocean&lt;/a&gt; in this tutorial you can use your preferred VPS providers.&lt;/p&gt;&lt;p&gt;steps of setting up a digital ocean for your privacy and an extra layer of security I suggest you set up a VPS with an ssh key directly don’t set it up with a password as hackers can take over your VPS by brute-forcing it.&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;ssh-keygen&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;-t&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;rsa&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Type this command in your terminal to generate a public/private rsa key pair.&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;cat&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;.ssh/id_rsa.pub&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Type this command to see your public/private rsa key pair. now copy it and paste it here&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950407505/HJoUqM82s.png&quot;&gt;
&lt;figcaption&gt;gen ssh keys&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950349767/FYIlaVpZd.png&quot;&gt;
&lt;figcaption&gt;add ssh keys&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;now go to market place and search here “OPENVPN”&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950531573/cO02aZcP7.png&quot;&gt;
&lt;figcaption&gt;create droplets&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950588606/VQ-g7vKu_.png&quot;&gt;
&lt;figcaption&gt;openvpn access server&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Click here and select a server configuration for you as we are using it as VPN our traffic is going to be a bit high so we are choosing this with a high bandwidth(2TB)&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950729615/NLrmhfMC1.png&quot;&gt;
&lt;figcaption&gt;pricing page&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950858960/22xqbPwp6.png&quot;&gt;
&lt;figcaption&gt;country choose&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;choose your preferred location from here&lt;/p&gt;&lt;p&gt;Now we are all done and create your customised VPS by clicking here&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670950960541/O7PYfrkup.png&quot;&gt;
&lt;figcaption&gt;deploy button&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Now you have to wait for some minutes to let your VPS provider here digital ocean create a VPS for you after everything done, go and log into your VPS with ssh like this&lt;/p&gt;&lt;pre&gt;&lt;code class=&quot;bash&quot;&gt;&lt;span class=&quot;constant function&quot;&gt;ssh&lt;/span&gt; &lt;span class=&quot;constant&quot;&gt;root@&lt;/span&gt;&lt;span class=&quot;operator&quot;&gt;&amp;lt;&lt;/span&gt;ipv4 address&lt;span class=&quot;operator&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;you will automatically get some prompt there create an OpenVPN user from there and set up a password for it after everything is done go to your browser and search&lt;/p&gt;&lt;p&gt;and log in there and configure your VPN according to you now log out from there and open your ipv4 address from there&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670951509209/bNrYeEmTM.png&quot;&gt;
&lt;figcaption&gt;open vpn login page&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;now just log in and download your preferred client here everything will be pre-configured according to your server&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670951658005/ai13LNUU2.png&quot;&gt;
&lt;figcaption&gt;download proffered version &lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Just download your client and enter your password in the app which you have. Generated during setup now you are all done if you already have the Open-VPN app on your phone or laptop you can simply download the profile file from here and import it into the Open-VPN app that’s it.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://cdn.hashnode.com/res/hashnode/image/upload/v1670951908765/9EyMfT-k6.png&quot;&gt;
&lt;figcaption&gt;already configured version&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Here is how you are going to download your profile only.&lt;/p&gt;&lt;p&gt;In the end, using the VPN of a corporation is a risk to your privacy as they can monitor or sell your queries if they want to do so. but by this method, you own the entire infrastructure and everything is under your control means you own all your data. If you love this article make sure to get a $200 coupon for the digital ocean from my link below to show some support for getting great blogs like this.&lt;/p&gt;&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg&quot;&gt;
&lt;figcaption&gt;DigitalOcean Referral Badge&lt;/figcaption&gt;&lt;/figure&gt;&lt;/p&gt;&lt;p&gt;Hope this blog helped you.&lt;/p&gt;&lt;p&gt;Happy coding :)&lt;/p&gt;</description>
        <link>https://pratyay.bond/blog/13december2022/</link>
        <pubDate>Tue, 13 Dec 2022 00:00:00 +0000</pubDate>
        <guid>https://pratyay.bond/blog/13december2022/</guid>
      </item>
    
    
      <item>
        <title>new notes</title>
        <description>&lt;p&gt;new notes&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Recent notes&lt;/strong&gt;&lt;/p&gt;</description>
        <link>https://pratyay.bond/notes/1787483406/</link>
        <pubDate>Sun, 23 Aug 2026 11:10:00 +0000</pubDate>
        <guid>https://pratyay.bond/notes/1787483406/</guid>
      </item>
    
  </channel>
</rss>
