<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Raj Nandan Sharma</title>
    <description>The latest articles on DEV Community by Raj Nandan Sharma (@rajnandan1).</description>
    <link>https://dev.to/rajnandan1</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F770190%2Fb54f5e19-dc56-40c3-a139-aad4ed4de43a.jpeg</url>
      <title>DEV Community: Raj Nandan Sharma</title>
      <link>https://dev.to/rajnandan1</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rajnandan1"/>
    <language>en</language>
    <item>
      <title>I built a reverse proxy to stop adblockers from eating my analytics</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Thu, 26 Mar 2026 04:01:49 +0000</pubDate>
      <link>https://dev.to/rajnandan1/i-built-a-reverse-proxy-to-stop-adblockers-from-eating-my-analytics-1c8j</link>
      <guid>https://dev.to/rajnandan1/i-built-a-reverse-proxy-to-stop-adblockers-from-eating-my-analytics-1c8j</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3z91vujor0wo52e20k6s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3z91vujor0wo52e20k6s.png" alt=" " width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem nobody talks about
&lt;/h2&gt;

&lt;p&gt;You ship a product. You add Google Analytics. You add Amplitude. Maybe PostHog. You check your dashboard after a week and the numbers look off.&lt;/p&gt;

&lt;p&gt;Not slightly off. Way off.&lt;/p&gt;

&lt;p&gt;Turns out, 30-40% of your users run adblockers. And adblockers do not care if you are a billion-dollar ad company or a side project with 12 users. They block requests to known analytics domains. All of them.&lt;/p&gt;

&lt;p&gt;Your analytics SDK loads fine. It fires events fine. But those events never reach the server because the request to &lt;code&gt;www.google-analytics.com&lt;/code&gt; gets killed before it leaves the browser.&lt;/p&gt;

&lt;p&gt;You are making decisions based on 60% of your data. That is not analytics. That is guessing.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I tried first
&lt;/h2&gt;

&lt;p&gt;I looked at existing solutions. Most of them fall into two camps.&lt;/p&gt;

&lt;p&gt;Camp one: paid services that proxy analytics for you. They work, but you are paying someone to run Nginx. That felt wrong.&lt;/p&gt;

&lt;p&gt;Camp two: custom server-side setups. Write your own proxy, handle headers, manage CORS, deal with path rewrites. Doable, but annoying. I did not want to maintain a Node.js server just to forward requests.&lt;/p&gt;

&lt;p&gt;I wanted something dumber. Something that just works.&lt;/p&gt;

&lt;h2&gt;
  
  
  So I built Saki
&lt;/h2&gt;

&lt;p&gt;Saki is a self-hosted Nginx reverse proxy. You run it as a Docker container on your domain. It forwards analytics requests through your infrastructure instead of directly to the analytics provider.&lt;/p&gt;

&lt;p&gt;Here is what that means in practice.&lt;/p&gt;

&lt;p&gt;Your website loads a script from &lt;code&gt;www.googletagmanager.com&lt;/code&gt;. Adblockers block it. But if that same script loads from &lt;code&gt;your-domain.com/tg/script.js&lt;/code&gt;, adblockers have no idea it is an analytics request. It looks like a first-party resource.&lt;/p&gt;

&lt;p&gt;That is the whole trick. Route through your own domain, and adblockers leave it alone.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt; 8765:80 rajnandan1/saki
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One command. No config files. No environment variables required. It comes with sane defaults out of the box.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it supports
&lt;/h2&gt;

&lt;p&gt;Saki ships with pre-configured routes for the services most teams actually use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Google Tag Manager (&lt;code&gt;/tg/&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Google Analytics (&lt;code&gt;/an/&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Amplitude - both CDN and API (&lt;code&gt;/acdn/&lt;/code&gt;, &lt;code&gt;/aapi/&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Mixpanel - both CDN and API (&lt;code&gt;/mxc/&lt;/code&gt;, &lt;code&gt;/mxa/&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Microsoft Clarity (&lt;code&gt;/cla/&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;PostHog - JS and API (&lt;code&gt;/phj/&lt;/code&gt;, &lt;code&gt;/pha/&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each route has a short, non-obvious path. &lt;code&gt;/tg/&lt;/code&gt; does not scream "this is Google Tag Manager." That is by design.&lt;/p&gt;

&lt;p&gt;And if you use something not on the list, you add a new Nginx location block. If it has a domain, Saki can proxy it.&lt;/p&gt;

&lt;h2&gt;
  
  
  How you use it
&lt;/h2&gt;

&lt;p&gt;The change on your website is one line. Replace the analytics domain with your Saki proxy URL.&lt;/p&gt;

&lt;p&gt;Before:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://your-domain.com/tg/script.js?id=G-XXXXXXXX"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No SDK changes. No config rewrites. Same script, different hostname.&lt;/p&gt;

&lt;p&gt;Saki forwards all headers - User-Agent, cookies, IP address, language, referrer. The analytics provider sees a normal request. It has no idea it went through a proxy.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deployment
&lt;/h2&gt;

&lt;p&gt;For production, point a subdomain at it with HTTPS. Something like &lt;code&gt;s.yourdomain.com&lt;/code&gt;. Works on Railway, Render, Fly.io, a VPS, or bare metal. Anywhere you can run a Docker container.&lt;/p&gt;

&lt;p&gt;Here is a minimal &lt;code&gt;docker-compose.yml&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;services&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;saki&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;rajnandan1/saki:latest&lt;/span&gt;
    &lt;span class="na"&gt;container_name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;saki&lt;/span&gt;
    &lt;span class="na"&gt;ports&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;8765:80"&lt;/span&gt;
    &lt;span class="na"&gt;restart&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;unless-stopped&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Want to customize route paths? Set environment variables like &lt;code&gt;ROUTE_GTM&lt;/code&gt;, &lt;code&gt;ROUTE_GA&lt;/code&gt;, &lt;code&gt;ROUTE_CLARITY&lt;/code&gt;, and so on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I did not just write a blog post about Nginx config
&lt;/h2&gt;

&lt;p&gt;Fair question. You could set this up yourself with a few Nginx location blocks.&lt;/p&gt;

&lt;p&gt;But here is the thing. You would have to figure out the right proxy headers, handle path rewrites for each service, keep up with domain changes from analytics providers, and test it across browsers. Then do that for every project.&lt;/p&gt;

&lt;p&gt;Saki packages all of that into one container. Pull the image, run it, point your scripts at it. Done.&lt;/p&gt;

&lt;p&gt;I am lazy. I built this so I could be lazy faster.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Saki is not
&lt;/h2&gt;

&lt;p&gt;It is not a privacy tool. It does not anonymize data or block tracking. It is the opposite, actually. It makes sure analytics requests go through successfully.&lt;/p&gt;

&lt;p&gt;If your users run adblockers because they do not want to be tracked, Saki bypasses that. You should think about the ethics of that for your use case. I built it because I needed accurate numbers for my own projects, and I was tired of making decisions on incomplete data.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://railway.com/deploy/saki?referralCode=1Pn7vs&amp;amp;utm_medium=integration&amp;amp;utm_source=template&amp;amp;utm_campaign=generic" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Frailway.com%2Fbutton.svg" alt="Deploy on Railway" width="183" height="40"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The repo is open source, MIT licensed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Website: &lt;a href="https://saki.rajnandan.com" rel="noopener noreferrer"&gt;saki.rajnandan.com&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;GitHub: &lt;a href="https://github.com/rajnandan1/saki" rel="noopener noreferrer"&gt;github.com/rajnandan1/saki&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Docker Hub: &lt;a href="https://hub.docker.com/r/rajnandan1/saki" rel="noopener noreferrer"&gt;hub.docker.com/r/rajnandan1/saki&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you have questions or want to add support for another service, open an issue. PRs welcome.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;I build tools for developers. Previously built &lt;a href="https://github.com/rajnandan1/kener" rel="noopener noreferrer"&gt;Kener&lt;/a&gt;, an open-source status page. Find me at &lt;a href="https://rajnandan.com" rel="noopener noreferrer"&gt;rajnandan.com&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>analytics</category>
      <category>docker</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Kener 3.2.14 released with the most requested change: Subscribe to monitors</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Wed, 30 Apr 2025 05:31:46 +0000</pubDate>
      <link>https://dev.to/rajnandan1/kener-3214-released-with-the-most-requested-change-subscribe-to-monitors-387</link>
      <guid>https://dev.to/rajnandan1/kener-3214-released-with-the-most-requested-change-subscribe-to-monitors-387</guid>
      <description>&lt;h2&gt;
  
  
  🚀 Kener v3.2.14 Released: Gamedig Monitoring, Event Subscriptions &amp;amp; More!
&lt;/h2&gt;

&lt;p&gt;The latest Kener update is here — and it’s packed. Version &lt;strong&gt;v3.2.14&lt;/strong&gt; drops some serious firepower for game server monitoring, event subscriptions, and UX improvements. Here's what's new:&lt;/p&gt;




&lt;h2&gt;
  
  
  ✨ New Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🎮 Gamedig Monitoring Support
&lt;/h3&gt;

&lt;p&gt;You can now monitor over &lt;strong&gt;320+ games and services&lt;/strong&gt; using the new Gamedig monitor type. Configure host, port, timeout, and game/service of your choice — all wrapped in fresh docs.&lt;/p&gt;

&lt;h3&gt;
  
  
  🔔 Event Subscription System
&lt;/h3&gt;

&lt;p&gt;Subscriptions are here! A full backend (&lt;code&gt;subscribers&lt;/code&gt;, &lt;code&gt;subscriptions&lt;/code&gt;, &lt;code&gt;subscription_triggers&lt;/code&gt;) and UI setup lets users subscribe to events across incidents and maintenance.&lt;/p&gt;

&lt;h3&gt;
  
  
  📡 Monitor CRUD API
&lt;/h3&gt;

&lt;p&gt;Full REST API support for monitor management:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;GET /api/monitor&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;POST /api/monitor&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;GET /api/monitor/[monitor_id]&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;PUT /api/monitor/[monitor_id]&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;DELETE /api/monitor/[monitor_id]&lt;/code&gt;
OpenAPI spec is updated accordingly.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✏️ Modify Monitor History
&lt;/h3&gt;

&lt;p&gt;False positives? No problem. You can now manually update historical status data via the UI and backend.&lt;/p&gt;

&lt;h3&gt;
  
  
  🏷️ Site Status Banner
&lt;/h3&gt;

&lt;p&gt;Add a real-time status banner to your homepage. Toggle it under the "Home" section in the portal.&lt;/p&gt;

&lt;h3&gt;
  
  
  🛠️ Upcoming Maintenance Page
&lt;/h3&gt;

&lt;p&gt;Maintenance now gets its own dedicated spotlight.&lt;/p&gt;

&lt;h3&gt;
  
  
  📄 Event Pages
&lt;/h3&gt;

&lt;p&gt;Each incident or maintenance event now has its own page for easier reference and sharing.&lt;/p&gt;

&lt;h3&gt;
  
  
  🧑‍💼 Admin Portal Revamp
&lt;/h3&gt;

&lt;p&gt;The admin UI got a facelift. Cleaner. Faster. Easier to navigate.&lt;/p&gt;




&lt;h2&gt;
  
  
  🐞 Bug Fixes
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;SMTP_SECURE Handling:&lt;/strong&gt; Fixed logic around &lt;code&gt;SMTP_SECURE&lt;/code&gt; so that empty or &lt;code&gt;'0'&lt;/code&gt; values don’t trigger unwanted SSL behavior.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Group Monitor Queues:&lt;/strong&gt; Group monitors now behave as expected when using queues.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🌍 Internationalization
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Polish Language Support:&lt;/strong&gt; Added &lt;code&gt;pl.json&lt;/code&gt; and wired it into the i18n system. Cześć, Poland! 🇵🇱&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;🔗 &lt;a href="https://github.com/rajnandan1/kener" rel="noopener noreferrer"&gt;GitHub Repo&lt;/a&gt;&lt;br&gt;&lt;br&gt;
🌐 &lt;a href="https://kener.ing" rel="noopener noreferrer"&gt;Live Demo&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Want to nerd out with status pages, incident tracking, and game server monitoring? Give &lt;strong&gt;Kener&lt;/strong&gt; a spin — and drop a ⭐ if you like what you see.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Building Kener: My Journey Creating a Simple Status Page System</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Mon, 20 Jan 2025 03:13:01 +0000</pubDate>
      <link>https://dev.to/rajnandan1/building-kener-my-journey-creating-a-simple-status-page-system-j26</link>
      <guid>https://dev.to/rajnandan1/building-kener-my-journey-creating-a-simple-status-page-system-j26</guid>
      <description>&lt;p&gt;Hey there! 👋 &lt;/p&gt;

&lt;p&gt;I wanted to share a little side project I've been working on lately - a status page system I call Kener. After getting frustrated with overly complex monitoring solutions, I decided to build something that I'd actually want to use myself.&lt;/p&gt;

&lt;p&gt;Let me tell you why I built this thing. I was working on a few small projects and needed a way to monitor them, but everything out there felt like overkill. Enterprise tools are great and all, but sometimes you just want something lightweight that gets the job done, you know?&lt;/p&gt;

&lt;p&gt;So I dove in with SvelteKit and Node.js (I'm a huge Svelte fan - the reactivity system is &lt;em&gt;chef's kiss&lt;/em&gt;) and started building. The name actually came from browsing through different languages - "Kene" means "how's it going?" in Assamese, which felt perfect for a status page!&lt;/p&gt;

&lt;p&gt;The features kind of grew organically as I used it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I needed real-time monitoring, so I built that first&lt;/li&gt;
&lt;li&gt;Then I realized I wanted to check endpoints periodically, so HTTP polling went in&lt;/li&gt;
&lt;li&gt;Cron scheduling was a must (and yes, you can run checks every minute if you're that kind of person 😅)&lt;/li&gt;
&lt;li&gt;First I started with YAML config and file based storage. Now it is full blown database driver with an Admin portal&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm particularly proud of the little quality-of-life things - dark mode (because my eyes hurt at night), custom domains (because nobody wants that default URL), and those embeddable widgets that you can throw anywhere. &lt;/p&gt;

&lt;p&gt;The incident management part was interesting to build. I wanted something that wouldn't get in my way when things are on fire and I just need to post an update quickly. Kept it clean and simple - just the essentials.&lt;/p&gt;

&lt;p&gt;If you want to try it out, I packaged everything in Docker to make deployment super simple. Just pull the image, and you're good to go. The repo is up on GitHub - I'd love to hear what you think or if you have any ideas for improvements!&lt;/p&gt;

&lt;p&gt;Still lots to do and improve, but it's been a fun project to work on during weekends. If you end up trying it out, let me know how it goes!&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://kener.ing" rel="noopener noreferrer"&gt;👉 Visit a live server&lt;/a&gt;
&lt;/h4&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://kener.ing/docs/quick-start" rel="noopener noreferrer"&gt;👉 Quick Start&lt;/a&gt;
&lt;/h4&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://kener.ing/docs/home" rel="noopener noreferrer"&gt;👉 Documentation&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;Happy coding! 🚀&lt;/p&gt;

</description>
      <category>sveltekit</category>
      <category>svelte</category>
      <category>opensource</category>
      <category>monitoring</category>
    </item>
    <item>
      <title>Built a cli for browser</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Sat, 14 Dec 2024 07:33:06 +0000</pubDate>
      <link>https://dev.to/rajnandan1/built-a-cli-for-browser-3d00</link>
      <guid>https://dev.to/rajnandan1/built-a-cli-for-browser-3d00</guid>
      <description>&lt;h1&gt;
  
  
  Termo
&lt;/h1&gt;

&lt;p&gt;Termo is a simple terminal emulator that can be used to create a terminal-like interface on your website. It is inspired by the terminal emulator in &lt;a href="https://stripe.dev" rel="noopener noreferrer"&gt;stripe.dev&lt;/a&gt;. It is an wrapper on top of xterm.js.&lt;/p&gt;




&lt;h3&gt;
  
  
  Demo
&lt;/h3&gt;

&lt;p&gt;Check out the &lt;/p&gt;

&lt;p&gt;&lt;a href="https://rajnandan1.github.io/termo/" rel="noopener noreferrer"&gt;demo and documentation&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/rajandan1/termo" rel="noopener noreferrer"&gt;github&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;[x] Customizable terminal title, prompt, font, and theme&lt;/li&gt;
&lt;li&gt;[x] Set a welcome message for the terminal&lt;/li&gt;
&lt;li&gt;[x] Add and execute any javascript as commands&lt;/li&gt;
&lt;li&gt;[x] Control sound effects&lt;/li&gt;
&lt;li&gt;[x] Get full access to the terminal (xterm.js)&lt;/li&gt;
&lt;li&gt;[x] Set terminal to dock/floating mode&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Installation
&lt;/h3&gt;

&lt;p&gt;Include the following script tag in your HTML file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://cdn.jsdelivr.net/gh/rajnandan1/termo/dist/termo.min.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Quick Start
&lt;/h3&gt;

&lt;p&gt;Create a new instance of Termo by passing an object .&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myTermo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nf"&gt;termo&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Termo&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;welcomeMessage&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Welcome to Termo&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;commands&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="na"&gt;command&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Says hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;action&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;terminal&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;terminal&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;write&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="se"&gt;\r\n&lt;/span&gt;&lt;span class="s1"&gt;Hello! &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)),&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;myTermo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;myTermo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;show&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>cli</category>
      <category>typescript</category>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>A Powerful Bookmark search engine</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Sun, 03 Nov 2024 17:23:04 +0000</pubDate>
      <link>https://dev.to/rajnandan1/a-powerful-bookmark-search-engine-4hfa</link>
      <guid>https://dev.to/rajnandan1/a-powerful-bookmark-search-engine-4hfa</guid>
      <description>&lt;p&gt;Does this happen with you too?&lt;/p&gt;

&lt;p&gt;You had starred a github repo that is about an open-source tool which you know you would use in the future. After some months you feel you have time to start on your own project and you remember starring a repo that would help with your project. But now you don't remember the name.&lt;/p&gt;

&lt;p&gt;If this has happened to you then we are similar. &lt;/p&gt;

&lt;p&gt;To solve this problem I took out sometime from my day job and burnt the midnight oil to create &lt;a href="https://okbookmarks.com" rel="noopener noreferrer"&gt;okbookmarks&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;What it does is a simple search on the content of the bookmarks, instead of just URLs&lt;/p&gt;

&lt;p&gt;It is built using Go/Svelte/ParadeDb&lt;/p&gt;

&lt;p&gt;I have also created browser extensions for it also. &lt;/p&gt;

&lt;p&gt;It is free for first 14 days. If you feel it might be useful consider purchasing a one time payment for lifetime access.&lt;/p&gt;

&lt;p&gt;Link to the app &lt;a href="https://okbookmarks.com" rel="noopener noreferrer"&gt;okbookmarks&lt;/a&gt;&lt;/p&gt;

</description>
      <category>go</category>
      <category>svelte</category>
      <category>saas</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Status page + Batteries</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Mon, 22 Jan 2024 06:07:16 +0000</pubDate>
      <link>https://dev.to/rajnandan1/status-page-batteries-2e58</link>
      <guid>https://dev.to/rajnandan1/status-page-batteries-2e58</guid>
      <description>&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://docs.google.com/presentation/d/e/2PACX-1vSJhxVFMLyv9vwf3sR6jHfk-73JcztsiTJYGyKsENjoN3_gtXcIUwVJf-stZp22-VeqpNW0qmb_Xm6v/embed?start=true&amp;amp;amp%3Bloop=true&amp;amp;amp%3Bdelayms=3000" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyKrAkgvXyFYQnS_eqFZd3LP8iHkBg9dCTxV5NiIAQcWK69YZe9AD3PBNXZSE_bPCDZk0xCxXYjocyZGm5KxAtSJZOHXkPPaniz8FKK4VIzbHFCF0tY%3Dw1200-h630-p" height="420" class="m-0" width="800"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://docs.google.com/presentation/d/e/2PACX-1vSJhxVFMLyv9vwf3sR6jHfk-73JcztsiTJYGyKsENjoN3_gtXcIUwVJf-stZp22-VeqpNW0qmb_Xm6v/embed?start=true&amp;amp;amp%3Bloop=true&amp;amp;amp%3Bdelayms=3000" rel="noopener noreferrer" class="c-link"&gt;
          kener - Google Slides
        &lt;/a&gt;
      &lt;/h2&gt;
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fssl.gstatic.com%2Fdocs%2Fpresentations%2Fimages%2Ffavicon-2023q4.ico" width="800" height="400"&gt;
        docs.google.com
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;&lt;a href="https://kener.ing/" rel="noopener noreferrer"&gt;Kener&lt;/a&gt; is an open-source status page system designed to keep you informed about the health and performance of your applications and services. It provides a simple and intuitive interface for monitoring and managing incidents in real-time. With Kener, you can quickly identify and resolve issues, ensuring that your users are always informed about any disruptions.&lt;/p&gt;

&lt;p&gt;To get started with Kener, follow these simple steps:&lt;/p&gt;

&lt;h2&gt;
  
  
  Clone the repository
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/rajnandan1/kener.git
&lt;span class="nb"&gt;cd &lt;/span&gt;kener
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Install Dependencies
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Configs
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Rename &lt;code&gt;config/site.example.yaml&lt;/code&gt; -&amp;gt; &lt;code&gt;config/site.yaml&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Rename &lt;code&gt;config/monitors.example.yaml&lt;/code&gt; -&amp;gt; &lt;code&gt;config/monitors.yaml&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mv &lt;/span&gt;config/site.example.yaml config/site.yaml
&lt;span class="nb"&gt;mv &lt;/span&gt;config/monitors.example.yaml config/monitors.yaml
&lt;span class="nb"&gt;mkdir&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt; ./static/kener
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Start Kener Dev
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run kener:dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Kener Development Server would be running at PORT 5173. Go to &lt;a href="http://localhost:5173" rel="noopener noreferrer"&gt;http://localhost:5173&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Kener also offers APIs that allow you to update status, create incidents, add comments, and more. These APIs can be integrated into your existing workflows to automate incident management and streamline your processes.&lt;/p&gt;

&lt;p&gt;In addition, Kener provides badges that you can use to display the status and uptime of your monitors in your project's documentation or README files. These badges can be customized with different colors and styles to match your project's branding. You can also embed a modern looking status card for your monitor&lt;/p&gt;

&lt;p&gt;To learn more about Kener and get started, visit the official &lt;a href="https://github.com/rajnandan1/kener" rel="noopener noreferrer"&gt;repository&lt;/a&gt; and &lt;a href="https://kener.ing/docs" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>github</category>
      <category>opensource</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Why did I build another status page</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Sun, 24 Dec 2023 11:32:25 +0000</pubDate>
      <link>https://dev.to/rajnandan1/why-did-i-build-another-a-status-page-5ff1</link>
      <guid>https://dev.to/rajnandan1/why-did-i-build-another-a-status-page-5ff1</guid>
      <description>&lt;p&gt;The status pages that are opensource look dated. I wanted to build a modern looking one and I wanted to keep it minimal effort. There is a project called upptime.js.org which uses github to power a status page. It also looks old and has limitation of minimum 5 minute check.&lt;/p&gt;

&lt;p&gt;So, I thought to myself what the heck, let us do it. I know svelte, NodeJS and I like &lt;a href="https://www.shadcn-svelte.com/" rel="noopener noreferrer"&gt;shadcn-svelte&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;So here it is &lt;/p&gt;

&lt;h2&gt;
  
  
  Kener - Status Page System
&lt;/h2&gt;

&lt;p&gt;Visit &lt;a href="https://kener.ing" rel="noopener noreferrer"&gt;https://kener.ing&lt;/a&gt; | &lt;a href="https://github.com/rajnandan1/kener" rel="noopener noreferrer"&gt;Github&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Real-time monitoring&lt;/li&gt;
&lt;li&gt;Customizable status page&lt;/li&gt;
&lt;li&gt;Easy installation and setup&lt;/li&gt;
&lt;li&gt;Automated incident management&lt;/li&gt;
&lt;li&gt;GitHub integration for issue tracking&lt;/li&gt;
&lt;li&gt;Environment variable configuration&lt;/li&gt;
&lt;li&gt;Production and custom deployment options&lt;/li&gt;
&lt;li&gt;Detailed documentation and examples&lt;/li&gt;
&lt;li&gt;API for status updates&lt;/li&gt;
&lt;li&gt;Badge generation for status and uptime display&lt;/li&gt;
&lt;li&gt;Branding and theme customization&lt;/li&gt;
&lt;li&gt;Flexible monitor configuration using YAML&lt;/li&gt;
&lt;li&gt;Cron-based scheduling for monitors&lt;/li&gt;
&lt;li&gt;Secrets management for headers and bodies&lt;/li&gt;
&lt;li&gt;Evaluators for HTTP response parsing&lt;/li&gt;
&lt;li&gt;Incident tagging and labeling&lt;/li&gt;
&lt;li&gt;Meta tag customization for SEO&lt;/li&gt;
&lt;li&gt;User-friendly interface&lt;/li&gt;
&lt;li&gt;Support for light and dark themes&lt;/li&gt;
&lt;li&gt;Responsive design for various devices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Do spare a ⭐ on &lt;a href="https://github.com/rajnandan1/kener" rel="noopener noreferrer"&gt;github&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Roadmap
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;[ ] Add notification&lt;/li&gt;
&lt;li&gt;[ ] Add api to create incident&lt;/li&gt;
&lt;li&gt;[ ] Add Mysql adapter&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>svelte</category>
      <category>opensource</category>
      <category>tailwindcss</category>
      <category>node</category>
    </item>
    <item>
      <title>Say Hello to Frogment: Your Ultimate Browser-Based OpenAPI Spec Editor! 🚀</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Mon, 28 Aug 2023 17:10:33 +0000</pubDate>
      <link>https://dev.to/rajnandan1/say-hello-to-frogment-your-ultimate-browser-based-openapi-spec-editor-2jp0</link>
      <guid>https://dev.to/rajnandan1/say-hello-to-frogment-your-ultimate-browser-based-openapi-spec-editor-2jp0</guid>
      <description>&lt;p&gt;Hey there, awesome Dev.to community!&lt;/p&gt;

&lt;p&gt;Have you ever found yourself tangled up in a giant OpenAPI spec, desperately wishing for a tool that could simplify the whole editing process? Well, guess what? Your wish has just been granted! Allow me to introduce you to Frogment – the FREE, browser-based OpenAPI spec editor that's about to change your game!&lt;/p&gt;

&lt;p&gt;🔗 Website: &lt;a href="https://www.frogment.com" rel="noopener noreferrer"&gt;https://www.frogment.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Why Choose Frogment?&lt;br&gt;
We've all been there. Facing a massive OpenAPI spec, trying to make sense of it all. Existing tools often fall short, leaving us yearning for something better. And that's exactly why I created Frogment.&lt;/p&gt;

&lt;p&gt;Meet Frogment: Your New Superpower&lt;br&gt;
After 7 days of relentless effort, I'm thrilled to bring you Frogment – an ingenious tool built to turn OpenAPI spec editing into a delightful experience. Here's what it brings to the table:&lt;/p&gt;

&lt;p&gt;✨ Outstanding Features:&lt;/p&gt;

&lt;p&gt;👉 Totally Free: No catches, no fine print. Frogment is here to empower developers without costing a penny.&lt;/p&gt;

&lt;p&gt;👉 Three Panes, Zero Hassle: Forget about constantly switching tabs. With Frogment's three-pane layout, working on multiple sections becomes a breeze.&lt;/p&gt;

&lt;p&gt;👉 Embrace Multiple Spaces: Keep your projects organized by creating different spaces for different tasks or versions.&lt;/p&gt;

&lt;p&gt;👉 Realtime Linting, Lightning-Fast: Instantly spot errors with Frogment's real-time linting feature. Syntax issues, be gone!&lt;/p&gt;

&lt;p&gt;👉 Stay DRY with Code Blocks: Introducing code_blocks – a brilliant concept to keep your spec DRY (Don't Repeat Yourself). Detailed documentation coming soon!&lt;/p&gt;

&lt;p&gt;👉 Auto Complete Search: Say goodbye to tedious schema searches. Frogment's smart auto-complete search streamlines the process.&lt;/p&gt;

&lt;p&gt;Ready to Dive In?&lt;/p&gt;




&lt;p&gt;Visit Our Website: &lt;a href="https://www.frogment.com" rel="noopener noreferrer"&gt;https://www.frogment.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sign Up: Not required.&lt;/p&gt;

&lt;p&gt;Unleash the Magic: Experience the transformational power of Frogment as you conquer those daunting OpenAPI specs like a pro.&lt;/p&gt;

&lt;p&gt;Frogment isn't just a tool; it's your ally in the journey of API development. Be part of the movement that's elevating the way we tackle OpenAPI specs.&lt;/p&gt;

&lt;p&gt;I'm thrilled to bring Frogment to this amazing community. Questions, thoughts, and feedback? Feel free to share – let's redefine the OpenAPI spec editing experience together! &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>OpenAPI Browser Editor - Free Developer Tool</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Sat, 26 Aug 2023 17:00:08 +0000</pubDate>
      <link>https://dev.to/rajnandan1/openapi-browser-editor-free-developer-tool-43cl</link>
      <guid>https://dev.to/rajnandan1/openapi-browser-editor-free-developer-tool-43cl</guid>
      <description>&lt;p&gt;Hello Folks!&lt;/p&gt;

&lt;p&gt;So the other day my company wanted me to edit our huge open api spec. I gave it a shot found I was painstakingly slow at it because it was just so big.&lt;/p&gt;

&lt;p&gt;I searched the internet but could not find a tool that gives a wow factor.&lt;/p&gt;

&lt;p&gt;Long story short I spent 7 days to built a tool called &lt;a href="https://www.frogment.com" rel="noopener noreferrer"&gt;Frogment&lt;/a&gt;. A typo of fragment. &lt;/p&gt;

&lt;p&gt;The whole purpose of the tool is to make your editing simpler an easier.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fum0owcdb99dgsaduipsw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fum0owcdb99dgsaduipsw.png" alt="Image description" width="800" height="465"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ✨ Product features
&lt;/h2&gt;

&lt;p&gt;👉 It is Free&lt;br&gt;
👉 Three Pan layout for multiple spaces&lt;br&gt;
👉 Supports multiple spaces&lt;br&gt;
👉 Realtime Fast linting&lt;br&gt;
👉 DRY using a new idea &lt;code&gt;code_blocks&lt;/code&gt;. Documentation to be added&lt;br&gt;
👉 Auto complete search your schemas &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.frogment.com" rel="noopener noreferrer"&gt;Visit Frogment&lt;/a&gt;
&lt;/h3&gt;

</description>
      <category>openapi</category>
      <category>node</category>
      <category>design</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Introducing the remarkable "Brutopia" bootstrap theme, a captivating blend of readability and neo-brutalist design principles..</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Mon, 05 Jun 2023 03:50:34 +0000</pubDate>
      <link>https://dev.to/rajnandan1/introducing-the-remarkable-brutopia-bootstrap-theme-a-captivating-blend-of-readability-and-neo-brutalist-design-principles-3efd</link>
      <guid>https://dev.to/rajnandan1/introducing-the-remarkable-brutopia-bootstrap-theme-a-captivating-blend-of-readability-and-neo-brutalist-design-principles-3efd</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0lnp5618fdrwxw0xtx4h.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0lnp5618fdrwxw0xtx4h.gif" alt="Screenshots" width="600" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/rajnandan1/brutopia" rel="noopener noreferrer"&gt;Github&lt;/a&gt; &lt;a href="https://rajnandan1.github.io/brutopia/dist/index.html" rel="noopener noreferrer"&gt;Preview&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Brutopia embodies the essence of simplicity and raw aesthetic, drawing inspiration from the bold and unapologetic style of neo-brutalism while prioritizing exceptional readability.&lt;/p&gt;

&lt;p&gt;Every element of Brutopia has been carefully crafted to ensure optimal legibility and ease of navigation, ensuring that your content takes center stage.&lt;/p&gt;

&lt;p&gt;The deliberate use of minimalistic typography, generous whitespace, and striking color contrasts creates a visually engaging experience that captivates your visitors' attention. Embrace the unique charm of neo-brutalism while prioritizing readability with Brutopia and redefine the way your audience engages with your website.&lt;/p&gt;

</description>
      <category>bootstrap</category>
      <category>css</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Create quick keyboard shortcuts for your JS functions</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Sun, 03 Jul 2022 08:46:33 +0000</pubDate>
      <link>https://dev.to/rajnandan1/create-quick-keyboard-shortcuts-for-your-js-functions-142n</link>
      <guid>https://dev.to/rajnandan1/create-quick-keyboard-shortcuts-for-your-js-functions-142n</guid>
      <description>&lt;p&gt;Floodlightjs lets you create quick keyboard shortcuts for your JS functions. macOS spotlight inspired. &lt;code&gt;shift&lt;/code&gt;+&lt;code&gt;key&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/rajnandan1/floodlightjs" rel="noopener noreferrer"&gt;Github&lt;/a&gt;&lt;br&gt;
&lt;a href="https://rajnandan1.github.io/floodlightjs/index.html" rel="noopener noreferrer"&gt;Demo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>opensource</category>
      <category>githunt</category>
    </item>
    <item>
      <title>FloodlightJS</title>
      <dc:creator>Raj Nandan Sharma</dc:creator>
      <pubDate>Fri, 01 Jul 2022 17:09:16 +0000</pubDate>
      <link>https://dev.to/rajnandan1/floodlightjs-1gn7</link>
      <guid>https://dev.to/rajnandan1/floodlightjs-1gn7</guid>
      <description>&lt;p&gt;Inspired from macOS spotlight have built a small utility library. Comments, feedback and contributions are welcome. Zero dependency.&lt;br&gt;
&lt;a href="https://github.com/rajnandan1/floodlightjs" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;br&gt;
&lt;a href="https://rajnandan1.github.io/floodlightjs/index.html" rel="noopener noreferrer"&gt;Demo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
  </channel>
</rss>
