<?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: Kavin HBN</title>
    <description>The latest articles on DEV Community by Kavin HBN (@kavin_hbn_e6108b3e666949c).</description>
    <link>https://dev.to/kavin_hbn_e6108b3e666949c</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2169058%2Fdc0f2a5c-b741-4a58-b8b0-a07e1fcc2dca.jpg</url>
      <title>DEV Community: Kavin HBN</title>
      <link>https://dev.to/kavin_hbn_e6108b3e666949c</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kavin_hbn_e6108b3e666949c"/>
    <language>en</language>
    <item>
      <title>Rackwise: A Eurorack Agent That Separates Calculation From Evidence</title>
      <dc:creator>Kavin HBN</dc:creator>
      <pubDate>Sun, 04 Oct 2026 03:35:14 +0000</pubDate>
      <link>https://dev.to/kavin_hbn_e6108b3e666949c/rackwise-a-eurorack-agent-that-separates-calculation-from-evidence-43ge</link>
      <guid>https://dev.to/kavin_hbn_e6108b3e666949c/rackwise-a-eurorack-agent-that-separates-calculation-from-evidence-43ge</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/sanity-2026-09-16"&gt;Sanity Challenge, Path One: Ship an Agent That Queries Real Content&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I started this challenge knowing almost nothing about Sanity.&lt;/p&gt;

&lt;p&gt;Eurorack was new to me too. I had seen modular synthesizers before, but I didn't understand what HP meant, why module depth mattered, or how the different power rails were calculated.&lt;/p&gt;

&lt;p&gt;After reading the challenge prompt, I started researching how people plan these systems.&lt;/p&gt;

&lt;p&gt;That was when the problem became interesting.&lt;/p&gt;

&lt;p&gt;A Eurorack module can look compatible but still be too wide, too deep, or draw more power than the case can safely provide. Specifications can also change between product variants. A result based on the wrong module page could look convincing while being completely wrong.&lt;/p&gt;

&lt;p&gt;So I built Rackwise.&lt;/p&gt;

&lt;p&gt;Rackwise lets someone assemble a rack row, choose a power reserve, and ask a question such as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Does this row have enough space and power?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It checks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;available HP;&lt;/li&gt;
&lt;li&gt;module depth;&lt;/li&gt;
&lt;li&gt;+12V, -12V, and +5V power usage;&lt;/li&gt;
&lt;li&gt;whether the retrieved sources cover the exact modules selected;&lt;/li&gt;
&lt;li&gt;whether the source values agree with the local calculation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The numerical checks are handled by a small TypeScript calculation engine.&lt;/p&gt;

&lt;p&gt;Sanity supplies the source-backed knowledge.&lt;/p&gt;

&lt;p&gt;The AI explains the result, but it is not allowed to quietly change the calculation or pretend that an unsupported source verified something.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Part I Struggled With
&lt;/h2&gt;

&lt;p&gt;Finding good sources was harder than connecting the model.&lt;/p&gt;

&lt;p&gt;At first, I thought I could add every useful page I found and let the agent search through everything.&lt;/p&gt;

&lt;p&gt;That quickly became messy.&lt;/p&gt;

&lt;p&gt;Some pages were product pages. Some were manuals. Some discussed an older version of a module. Some contained a useful specification mixed with a lot of unrelated material.&lt;/p&gt;

&lt;p&gt;The Knowledge Base also has a 150-document indexing limit. Instead of trying to fill that entire allowance, I reduced the corpus to a small set of focused manufacturer sources and specification files.&lt;/p&gt;

&lt;p&gt;That worked much better.&lt;/p&gt;

&lt;p&gt;It forced me to decide what information Rackwise actually needed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the exact module name and variant;&lt;/li&gt;
&lt;li&gt;width in HP;&lt;/li&gt;
&lt;li&gt;physical depth;&lt;/li&gt;
&lt;li&gt;current usage on each power rail;&lt;/li&gt;
&lt;li&gt;case capacity;&lt;/li&gt;
&lt;li&gt;the original source for each claim.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This was one of the biggest lessons from the project. More documents did not automatically produce a better answer. A smaller and more intentional corpus gave the agent cleaner evidence.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Sanity Feature I Didn't Expect
&lt;/h2&gt;

&lt;p&gt;One of the most useful parts of Sanity appeared when it found conflicts in the Knowledge Base.&lt;/p&gt;

&lt;p&gt;For example, it found two recording-duration claims. One described Make Noise Morphagene, while another described a different recording mode on Phonogene.&lt;/p&gt;

&lt;p&gt;They looked contradictory when placed together, but they were actually talking about different products and different modes.&lt;/p&gt;

&lt;p&gt;Sanity surfaced both claims with their sources and asked me to resolve the issue.&lt;/p&gt;

&lt;p&gt;The resolution then became a standing instruction for future Knowledge Base builds.&lt;/p&gt;

&lt;p&gt;I found this genuinely useful.&lt;/p&gt;

&lt;p&gt;It was not just finding text. It was helping me notice where the meaning of the content needed to be clarified.&lt;/p&gt;

&lt;p&gt;That experience influenced how Rackwise handles module variants. If the selected rack contains Disting EX but the retrieved source describes Disting NT, Rackwise does not borrow the NT measurements.&lt;/p&gt;

&lt;p&gt;It keeps the variants separate and marks the EX as unverified.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Structured Content Matters
&lt;/h2&gt;

&lt;p&gt;A normal keyword search can find a page containing the word “Disting.”&lt;/p&gt;

&lt;p&gt;That does not mean it found the correct Disting.&lt;/p&gt;

&lt;p&gt;Expert Sleepers Disting EX and Disting NT have different dimensions and power requirements. Treating them as the same product would make the answer unreliable.&lt;/p&gt;

&lt;p&gt;Rackwise converts retrieved specifications into individual claims containing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the hardware being described;&lt;/li&gt;
&lt;li&gt;the property being checked;&lt;/li&gt;
&lt;li&gt;the value and unit;&lt;/li&gt;
&lt;li&gt;the Knowledge Base path;&lt;/li&gt;
&lt;li&gt;the original source when available.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Width, depth, and every power rail are compared separately.&lt;/p&gt;

&lt;p&gt;This also means Rackwise can say that four modules are verified while one still needs a matching source. It does not turn partial coverage into a fully supported answer.&lt;/p&gt;

&lt;p&gt;That is the part of Rackwise that would not work properly with keyword search alone.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Live app:&lt;/strong&gt; &lt;a href="https://eurostack.vercel.app/" rel="noopener noreferrer"&gt;https://eurostack.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;No account is required.&lt;/p&gt;

&lt;p&gt;Try this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open the Playground.&lt;/li&gt;
&lt;li&gt;Add or remove modules from the rack.&lt;/li&gt;
&lt;li&gt;Choose a power reserve.&lt;/li&gt;
&lt;li&gt;Ask whether the row has enough space and power.&lt;/li&gt;
&lt;li&gt;Open the Evidence view to inspect the retrieved claims.&lt;/li&gt;
&lt;li&gt;Open the Trace view to see how the answer was produced.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The local rack calculation continues to work even if an external service is unavailable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Repository:&lt;/strong&gt; &lt;a href="https://github.com/Kavinhbn/Eurostack" rel="noopener noreferrer"&gt;https://github.com/Kavinhbn/Eurostack&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I did not use an agent framework for the backend.&lt;/p&gt;

&lt;p&gt;The workflow was small enough that I wanted the important boundaries to remain visible:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Validate the request
  -&amp;gt; calculate fit and power locally
  -&amp;gt; read the Sanity Knowledge Base through MCP
  -&amp;gt; choose entries for the selected hardware
  -&amp;gt; retrieve the relevant content
  -&amp;gt; extract source-backed claims
  -&amp;gt; reject unsupported sources and wrong variants
  -&amp;gt; compare the claims with the catalog
  -&amp;gt; generate a constrained explanation
  -&amp;gt; return the result, evidence, gaps, and trace
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The project currently includes 33 tests covering the planner, MCP responses, claim extraction, source validation, module routing, coverage, and variant separation.&lt;/p&gt;

&lt;p&gt;I also added per-device and per-IP request limits so a public demo cannot freely overload the model endpoint.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Used Sanity
&lt;/h2&gt;

&lt;p&gt;Rackwise connects to a Sanity Context MCP endpoint backed by a Knowledge Base.&lt;/p&gt;

&lt;p&gt;The Knowledge Base contains a focused collection of Eurorack material covering the example case, power supply, and selected modules.&lt;/p&gt;

&lt;p&gt;For each request, Rackwise first reads the Knowledge Base outline.&lt;/p&gt;

&lt;p&gt;It then chooses semantic entry paths based on the hardware inside the rack. It does not depend only on the wording of the user's question.&lt;/p&gt;

&lt;p&gt;For example, Plaits is routed to its main specification entry instead of an unrelated firmware entry.&lt;/p&gt;

&lt;p&gt;The retrieved content is then converted into bounded claims. Those claims are compared with the local catalog, and only validated claims are shown as evidence.&lt;/p&gt;

&lt;p&gt;Sanity does not replace the numerical calculation.&lt;/p&gt;

&lt;p&gt;It gives Rackwise the context needed to check whether its planning data is supported by real sources.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sanity Project Details
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Sanity project ID:&lt;/strong&gt; &lt;code&gt;9uwokjoy&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Knowledge Base ID:&lt;/strong&gt; &lt;code&gt;kbkdSiU3cFmU&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Keeping the Answer Honest
&lt;/h2&gt;

&lt;p&gt;I kept coming back to three separate layers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Calculation:&lt;/strong&gt; Does the rack fit, and does it stay inside the power limits?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Evidence:&lt;/strong&gt; What do the retrieved manufacturer sources actually support?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Explanation:&lt;/strong&gt; How can the result be communicated clearly?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Keeping these separate made the failure states easier to handle.&lt;/p&gt;

&lt;p&gt;If the model fails, the numerical calculation still exists.&lt;/p&gt;

&lt;p&gt;If Sanity cannot be reached, Rackwise labels the result as catalog-only.&lt;/p&gt;

&lt;p&gt;If a source describes the wrong product variant, that source is not used to verify the selected module.&lt;/p&gt;

&lt;p&gt;If a source-backed claim conflicts with an important planning value, Rackwise asks the user to review it instead of averaging the numbers or choosing one silently.&lt;/p&gt;

&lt;p&gt;The Planner, Evidence, and Trace views expose these boundaries in the interface.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;Before this challenge, “structured content” sounded abstract to me.&lt;/p&gt;

&lt;p&gt;Building Rackwise made it practical.&lt;/p&gt;

&lt;p&gt;The difficult part was not asking an AI model a question. The difficult part was deciding what information it could trust, which source belonged to which product, and what should happen when the evidence was incomplete.&lt;/p&gt;

&lt;p&gt;Sanity helped me turn a small collection of documentation into something the agent could navigate and compare.&lt;/p&gt;

&lt;p&gt;The conflict-resolution workflow was especially helpful because it treated ambiguity as something that should be reviewed, not hidden.&lt;/p&gt;

&lt;p&gt;I came into this project without experience in Sanity or Eurorack hardware.&lt;/p&gt;

&lt;p&gt;That made the research slower, but it also made the core problem very clear: if I could not understand where an answer came from, I should not expect someone to trust it with their hardware.&lt;/p&gt;

&lt;p&gt;That idea became Rackwise.&lt;/p&gt;

&lt;h2&gt;
  
  
  Screenshots :
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Rack planning and agent response
&lt;/h3&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8x56u75bg4kp8eef57eg.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8x56u75bg4kp8eef57eg.png" alt="Rackwise rack planner showing selected modules and the agent’s evidence-backed compatibility answer" width="800" height="471"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Sanity evidence coverage
&lt;/h3&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frc13jfhu7vu6e3ylt02y.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frc13jfhu7vu6e3ylt02y.png" alt="Sanity evidence review showing module coverage, verified claims, confidence, and decision status" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Source-backed claims
&lt;/h3&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxrhecga7aal6p06qm8l4.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxrhecga7aal6p06qm8l4.png" alt="Comparison of Rackwise catalog values with claims retrieved from manufacturer sources" width="800" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Agent execution trace
&lt;/h3&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd7znusxwt2lraookv1to.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd7znusxwt2lraookv1to.png" alt="Rackwise execution trace showing calculation, Sanity retrieval, evidence comparison, and response steps" width="800" height="443"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>sanitychallenge</category>
      <category>sanity</category>
      <category>ai</category>
    </item>
    <item>
      <title>We tried Reducto so our RAG pipeline would stop hallucinating table data</title>
      <dc:creator>Kavin HBN</dc:creator>
      <pubDate>Thu, 27 Aug 2026 17:19:56 +0000</pubDate>
      <link>https://dev.to/kavin_hbn_e6108b3e666949c/we-tried-reducto-so-our-rag-pipeline-would-stop-hallucinating-table-data-2od4</link>
      <guid>https://dev.to/kavin_hbn_e6108b3e666949c/we-tried-reducto-so-our-rag-pipeline-would-stop-hallucinating-table-data-2od4</guid>
      <description>&lt;p&gt;If you've ever built a RAG pipeline on top of real-world PDFs — not clean text files, but actual scanned evidence, policy docs, spreadsheets exported as PDFs, forms with checkboxes — you already know the dirty secret: parsing is the hard part, not the retrieval part.&lt;/p&gt;

&lt;p&gt;I work on a GRC platform. Think audit evidence, compliance policies, control matrices — the kind of documents where a merged table cell or a checkbox actually matters, because someone downstream is going to make a judgment call based on what your pipeline extracted. "Close enough" text extraction isn't close enough when the output feeds into an AI evaluation step that's supposed to tell an auditor whether a control passed.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem we kept hitting
&lt;/h2&gt;

&lt;p&gt;Our first pass used the usual suspects for PDF-to-text. It worked fine for prose. It fell apart the moment a document had:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tables with merged cells or nested headers&lt;/li&gt;
&lt;li&gt;Multi-column layouts that got read left-to-right across columns instead of down each one&lt;/li&gt;
&lt;li&gt;Checkboxes and form fields that just vanished&lt;/li&gt;
&lt;li&gt;Scanned pages that were "text" in name only&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The output would look plausible, which is almost worse than it looking broken — you don't notice the row got scrambled until someone downstream asks why the AI matched evidence to the wrong control.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where Reducto came in
&lt;/h2&gt;

&lt;p&gt;We started evaluating Reducto as a parsing layer sitting in front of our RAG/matching pipeline instead of trying to keep patching regex and heuristics forever. The pitch is basically: send it the raw document, get back structured, LLM-ready output — markdown or JSON, tables preserved as tables, figures called out, page and bounding-box citations attached to every chunk.&lt;/p&gt;

&lt;p&gt;That last part turned out to matter more than I expected. Having citations tied back to a literal region of the source page means when the AI pipeline says "this evidence supports this control," you can actually point at where on the page it's pulling that from, instead of trusting a black box. For anything audit-adjacent, that traceability isn't a nice-to-have, it's basically the whole requirement.&lt;/p&gt;

&lt;h2&gt;
  
  
  What actually got better
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Table fidelity went from "usually fine" to "actually fine," including the annoying merged-header cases&lt;/li&gt;
&lt;li&gt;We stopped hand-rolling special cases for scanned vs native PDFs&lt;/li&gt;
&lt;li&gt;The chunking we fed into our matching logic got noticeably cleaner, which meant fewer weird false-positive matches&lt;/li&gt;
&lt;li&gt;Debugging got easier because we could trace a bad match back to a specific bounding box instead of guessing&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What I'd tell someone evaluating it
&lt;/h2&gt;

&lt;p&gt;It's not magic, and it's not free — it's priced per page, so if you're processing huge volumes you'll want to actually run the math against your document mix before committing. It also won't fix a bad retrieval or matching strategy sitting downstream of it; it just gives you a much better foundation to build that strategy on.&lt;/p&gt;

&lt;p&gt;If your RAG pipeline is choking on real-world documents rather than clean sample PDFs, and you've already ruled out "just write more regex," it's worth a real trial run against your actual document set rather than a demo PDF. The gap between "looks fine on a demo" and "survives your actual messy corpus" is where most of these tools live or die, and that's true of any parsing layer, not just this one.&lt;/p&gt;

&lt;p&gt;Curious if anyone else building compliance/audit-adjacent tooling has landed on something different for this — always interested in comparing notes on what breaks first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Trying it before committing to it
&lt;/h2&gt;

&lt;p&gt;The free tier is generous enough to actually run a real trial instead of just kicking the tires on a sample PDF — you can throw your own messy documents at it and see how the table/checkbox/scan handling holds up before you touch a credit card. That mattered to us, because a demo PDF always looks great; it's your own weird internal export that tells you the truth.&lt;/p&gt;

&lt;p&gt;The API is straightforward — send a document, get back structured output — and webhooks mean you're not stuck polling a job status endpoint for larger files, which is nice when you're parsing in bulk instead of one-off.&lt;/p&gt;

&lt;p&gt;Worth noting: Vanta uses it too, which was a decent signal for us since they're solving a similar-shaped problem — compliance evidence, policy docs, the same kind of messy-document-meets-structured-output challenge. Wasn't the deciding factor, but it didn't hurt.&lt;/p&gt;

&lt;p&gt;If you're past the free tier and need real volume or specific compliance guarantees (SOC 2, data residency, that kind of thing), that's an enterprise conversation with their team rather than a self-serve toggle — expected for anything handling sensitive documents at scale, but worth knowing going in so it doesn't surprise you mid-eval.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>rag</category>
      <category>gcp</category>
    </item>
    <item>
      <title>Why I’m Thinking of Switching My Portfolio to Astro.js ..</title>
      <dc:creator>Kavin HBN</dc:creator>
      <pubDate>Sat, 04 Jul 2026 08:12:55 +0000</pubDate>
      <link>https://dev.to/kavin_hbn_e6108b3e666949c/why-im-thinking-of-switching-my-portfolio-to-astrojs--4gcj</link>
      <guid>https://dev.to/kavin_hbn_e6108b3e666949c/why-im-thinking-of-switching-my-portfolio-to-astrojs--4gcj</guid>
      <description>&lt;h1&gt;
  
  
  Why I'm Thinking of Switching My Portfolio to Astro.js
&lt;/h1&gt;

&lt;p&gt;Lately I have been spending most of my time building auditing dashboards. Working on data-highly interactive applications changes the way you think. After a while my default workflow became simple: create a new &lt;strong&gt;React + Vite&lt;/strong&gt; project. Start coding.&lt;/p&gt;

&lt;p&gt;It's a stack for building web applications.&lt;/p&gt;

&lt;p&gt;When I looked at my personal portfolio and blog, I stopped and asked myself:&lt;/p&gt;

&lt;h1&gt;
  
  
  Why am I using the setup for a website that is mostly static?
&lt;/h1&gt;

&lt;p&gt;A portfolio is not a dashboard. It does not manage state, update data in real time, or require every component to become interactive the moment the page loads.&lt;/p&gt;

&lt;p&gt;Yet with my React setup the browser still has to download and execute JavaScript for the entire application before everything becomes interactive.&lt;/p&gt;

&lt;p&gt;While browsing through developer blogs and discussions, I kept seeing one framework mentioned again and again: &lt;strong&gt;Astro&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The more I read about it, the more it seemed designed for exactly this type of website.&lt;/p&gt;




&lt;h1&gt;
  
  
  The Problem with Hydrating Everything
&lt;/h1&gt;

&lt;p&gt;A typical React application works by hydrating the page.&lt;/p&gt;

&lt;p&gt;For example, a React application starts like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;ReactDOM&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dom/client&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./App&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;ReactDOM&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createRoot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;

&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;App&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;

&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Everything inside ``eventually becomes part of one large JavaScript application.&lt;/p&gt;

&lt;p&gt;Before users can fully interact with the page, the browser needs to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Download the JavaScript&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Parse it&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Execute it&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hydrate the UI&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For applications like dashboards admin panels or collaborative tools, this trade-off is completely reasonable.&lt;/p&gt;

&lt;p&gt;For a portfolio?&lt;/p&gt;

&lt;p&gt;Most visitors just want to&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Read about you&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;View your projects&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Open your GitHub&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Read your blog&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Hydrating the page feels unnecessary.&lt;/p&gt;

&lt;p&gt;I mean think about it. My portfolio does not need to be interactive all the time.&lt;/p&gt;




&lt;h1&gt;
  
  
  Astro Takes an Approach
&lt;/h1&gt;

&lt;p&gt;Astro follows a different philosophy.&lt;/p&gt;

&lt;p&gt;Of assuming everything needs JavaScript, it assumes &lt;strong&gt;nothing does&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;A simple Astro page looks like this:&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;astro&lt;/p&gt;




&lt;p&gt;const title = "My Portfolio";&lt;/p&gt;









{title}





&lt;h1&gt;Hello I'm Kavin&lt;/h1&gt;

&lt;p&gt;Welcome to my portfolio.&lt;/p&gt;





&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;/p&gt;

&lt;p&gt;When you build the project:&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;bash&lt;/p&gt;

&lt;p&gt;npm run build&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;/p&gt;

&lt;p&gt;Astro outputs HTML.&lt;/p&gt;

&lt;p&gt;That means visitors immediately receive content without waiting for a JavaScript bundle.&lt;/p&gt;

&lt;p&gt;I like that.&lt;/p&gt;




&lt;h1&gt;
  
  
  Islands Architecture
&lt;/h1&gt;

&lt;p&gt;One of Astro's interesting ideas is **island architecture.&lt;/p&gt;

&lt;p&gt;By making the whole page interactive, Astro only hydrates the components that actually need JavaScript.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;astro&lt;/p&gt;




&lt;p&gt;import ThemeToggle from "../components/ThemeToggle.jsx";&lt;/p&gt;

&lt;p&gt;import ProjectCarousel from "../components/ProjectCarousel.jsx";&lt;/p&gt;




&lt;h1&gt;My Portfolio&lt;/h1&gt;





&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;/p&gt;

&lt;p&gt;Here the page itself remains static.&lt;/p&gt;

&lt;p&gt;Only the components that need interactivity receive JavaScript.&lt;/p&gt;

&lt;p&gt;That's really cool.&lt;/p&gt;




&lt;h1&gt;
  
  
  Client Directives
&lt;/h1&gt;

&lt;p&gt;Astro gives you control over &lt;strong&gt;when&lt;/strong&gt; a component should become interactive.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;client:load&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;astro&lt;/p&gt;



&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Downloads JavaScript immediately&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hydrates soon as the page loads&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Best for&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Theme toggles&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Navigation menus&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Search boxes&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;buttons&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I can see why this is useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;client:visible&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;astro&lt;/p&gt;



&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Waits until the component appears on the screen&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Downloads JavaScript only when needed&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Imagine your portfolio contains an interactive project carousel near the bottom of the page.&lt;/p&gt;

&lt;p&gt;If a visitor never scrolls far, Astro never downloads its JavaScript.&lt;/p&gt;

&lt;p&gt;That's bandwidth saved without writing any optimization code.&lt;/p&gt;




&lt;h1&gt;
  
  
  Why This Matters
&lt;/h1&gt;

&lt;p&gt;Instead of sending JavaScript for everything upfront, Astro sends JavaScript only where it's actually needed.&lt;/p&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Smaller JavaScript bundles&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Faster page loads&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Lower memory usage&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Better Core Web Vitals&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Less work for the browser&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For content websites, this approach makes a lot of sense.&lt;/p&gt;

&lt;p&gt;I think it's a fit for my portfolio.&lt;/p&gt;




&lt;h1&gt;
  
  
  SEO Benefits
&lt;/h1&gt;

&lt;p&gt;Another thing I like is how Astro handles SEO.&lt;/p&gt;

&lt;p&gt;Since pages are rendered as HTML by default, search engines can immediately read the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Page title&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Meta description&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Headings&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;links&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They don't have to wait for a large JavaScript application to finish executing before indexing the page.&lt;/p&gt;

&lt;p&gt;For blogs and portfolios, that's an advantage.&lt;/p&gt;




&lt;h1&gt;
  
  
  Where Astro Makes the Sense
&lt;/h1&gt;

&lt;p&gt;After reading more about Astro, I realized it fits perfectly for websites where content's the main focus.&lt;/p&gt;

&lt;p&gt;Some examples include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Developer portfolios&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Personal blogs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Documentation websites&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Company landing pages&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Marketing websites&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;E-commerce storefronts where fast loading improves user experience&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That does not mean React is obsolete.&lt;/p&gt;

&lt;p&gt;If I were building another auditing dashboard with forms, charts, filters, and live updates, I'd still reach for React without hesitation.&lt;/p&gt;

&lt;p&gt;The tool simply matches the problem.&lt;/p&gt;

&lt;p&gt;I like that.&lt;/p&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;This was not really about finding a "framework.&lt;/p&gt;

&lt;p&gt;It was about choosing the one for the job.&lt;/p&gt;

&lt;p&gt;For years my mindset was&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I'll just use React."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now it's becoming:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What does this project actually need?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For interactive web applications, React is still one of the best choices available.&lt;/p&gt;

&lt;p&gt;For a portfolio or blog Astro's approach of shipping static HTML first and loading JavaScript only when it's needed feels much more appropriate.&lt;/p&gt;

&lt;p&gt;I'm seriously considering rebuilding my portfolio with Astro—not because React is not good enough. Because Astro seems like the better fit for the kind of website I'm trying to build.&lt;/p&gt;

&lt;p&gt;Sometimes the biggest performance improvement does not come from writing code.&lt;/p&gt;

&lt;p&gt;It comes from choosing the tool before writing any code at all.&lt;/p&gt;

</description>
      <category>astro</category>
      <category>seo</category>
      <category>webdev</category>
      <category>devops</category>
    </item>
    <item>
      <title>Git for New Devs: Your Code's Grand Adventure !</title>
      <dc:creator>Kavin HBN</dc:creator>
      <pubDate>Mon, 23 Jun 2025 10:39:13 +0000</pubDate>
      <link>https://dev.to/kavin_hbn_e6108b3e666949c/git-for-new-devs-your-codes-grand-adventure-567f</link>
      <guid>https://dev.to/kavin_hbn_e6108b3e666949c/git-for-new-devs-your-codes-grand-adventure-567f</guid>
      <description>&lt;h1&gt;
  
  
  Git for Beginners: A Simple Guide to Your Git Workflow
&lt;/h1&gt;

&lt;p&gt;When you are learning Git, the number of commands can feel overwhelming.&lt;/p&gt;

&lt;p&gt;The good news is that most of your day-to-day work follows the simple Git workflow.&lt;/p&gt;

&lt;p&gt;Once you understand that Git workflow, handling problems like merge conflicts or rejected Git pushes becomes much easier.&lt;/p&gt;

&lt;p&gt;Git for beginners can be easy to learn.&lt;/p&gt;

&lt;p&gt;Think of Git as a journal for your project.&lt;/p&gt;

&lt;p&gt;Every meaningful change is recorded so you can track your progress collaborate with others using Git and even travel back in time if something goes wrong with Git.&lt;/p&gt;




&lt;h1&gt;
  
  
  The Normal Git Workflow
&lt;/h1&gt;

&lt;p&gt;Most of the time you will follow these steps in your Git workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Initialize Your Git Repository
&lt;/h2&gt;

&lt;p&gt;When starting a project initialize Git inside your project folder using Git.&lt;/p&gt;

&lt;p&gt;If you are using GitHub connect your Git repository to the remote Git repository using Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git init

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you are using GitHub you can connect your Git repository to the remote Git repository using Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git remote add origin https://github.com/your-username/your-repository.git

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now your local project knows where it should push and pull changes using Git.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 2: Stage Your Changes in Git
&lt;/h2&gt;

&lt;p&gt;After writing or modifying code tell Git which files should be included in the next Git commit.&lt;/p&gt;

&lt;p&gt;Stage every changed file in Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git add.

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or stage a file in Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git add app.js

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 3: Create a Commit in Git
&lt;/h2&gt;

&lt;p&gt;A commit in Git is a snapshot of your project at a specific point in time using Git.&lt;/p&gt;

&lt;p&gt;Write meaningful commit messages that explain what changed in your Git project not that something changed in your Git project.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;" project setup"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good examples of commit messages in Git are:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Add user authentication"&lt;/span&gt;

git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Fix login validation bug"&lt;/span&gt;

git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Update portfolio homepage"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 4: Push Your Changes in Git
&lt;/h2&gt;

&lt;p&gt;Upload your commits to GitHub using Git.&lt;/p&gt;

&lt;p&gt;The first push using Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git push &lt;span class="nt"&gt;-u&lt;/span&gt; origin main

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Future pushes using Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git push

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At this point your work is safely stored both locally and on GitHub using Git.&lt;/p&gt;




&lt;h1&gt;
  
  
  When Things Do Not Go as Planned in Git
&lt;/h1&gt;

&lt;p&gt;Working is simple in Git.&lt;/p&gt;

&lt;p&gt;Working with developers introduces a few common situations you will eventually encounter in Git.&lt;/p&gt;

&lt;p&gt;Fortunately they are easy to fix once you understand what is happening in Git.&lt;/p&gt;




&lt;h1&gt;
  
  
  Problem 1: Push Rejected in Git
&lt;/h1&gt;

&lt;p&gt;Sometimes Git refuses your push. Shows a message similar to this in Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
Updates were rejected because the remote contains work that you do not have locally.

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This means someone has already pushed commits to GitHub that you do not have on your computer using Git.&lt;/p&gt;

&lt;p&gt;Git blocks your push to prevent overwriting their work in Git.&lt;/p&gt;




&lt;h2&gt;
  
  
  Solution: Pull First in Git
&lt;/h2&gt;

&lt;p&gt;Download the changes from GitHub using Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git pull origin main

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If your changes and the remote changes do not overlap Git merges everything automatically using Git.&lt;/p&gt;

&lt;p&gt;Then simply push again using Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git push

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Problem 2: Merge Conflict in Git
&lt;/h1&gt;

&lt;p&gt;Sometimes both you and another developer edit the part of the same file in Git.&lt;/p&gt;

&lt;p&gt;Git does not know which version should be kept in Git.&lt;/p&gt;

&lt;p&gt;Of guessing it asks you to decide in Git.&lt;/p&gt;

&lt;p&gt;You will see something to this in Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
&amp;lt;&amp;lt;&amp;lt;&amp;lt;&amp;lt;&amp;lt;&amp;lt; HEAD

My version

=======

Their version

&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; origin/main

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  How to Resolve It in Git
&lt;/h2&gt;

&lt;p&gt;Open the file and decide which code should remain in Git.&lt;/p&gt;

&lt;p&gt;You can keep your version keep their version or combine both versions in Git.&lt;/p&gt;

&lt;p&gt;After editing the file remove all the conflict markers in Git.&lt;/p&gt;

&lt;p&gt;Then stage the file in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git add filename

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a commit in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Resolve merge conflict"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally push your updated code in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git push

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Working Safely with Branches in Git
&lt;/h1&gt;

&lt;p&gt;Branches let you develop features without affecting the main project in Git.&lt;/p&gt;

&lt;p&gt;Create a new branch in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git checkout &lt;span class="nt"&gt;-b&lt;/span&gt; feature/login

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Work in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git add.

git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Add login page"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Switch to the main branch in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git checkout main

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Merge your feature in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git merge feature/login

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once merged your new feature becomes part of the project in Git.&lt;/p&gt;




&lt;h1&gt;
  
  
  Undoing Commits in Git
&lt;/h1&gt;

&lt;p&gt;Everyone makes mistakes in Git.&lt;/p&gt;

&lt;p&gt;Git provides ways to undo changes in Git.&lt;/p&gt;

&lt;p&gt;View your commit history in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git log &lt;span class="nt"&gt;--oneline&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Undo the commit but keep your code in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git reset &lt;span class="nt"&gt;--soft&lt;/span&gt; HEAD~1

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Undo the commit and permanently remove those changes in Git.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git reset &lt;span class="nt"&gt;--hard&lt;/span&gt; HEAD~1

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Use &lt;code&gt;--hard&lt;/code&gt; carefully because the discarded changes cannot be recovered easily in Git.&lt;/p&gt;




&lt;h1&gt;
  
  
  Understanding &lt;code&gt;git status&lt;/code&gt; in Git
&lt;/h1&gt;

&lt;p&gt;One of the useful commands is in Git:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
git status

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It tells you exactly what is happening inside your repository in Git.&lt;/p&gt;

&lt;p&gt;Common status indicators include:&lt;/p&gt;

&lt;p&gt;| Symbol | Meaning&lt;/p&gt;

&lt;p&gt;| ------ | ------------------------------ |&lt;/p&gt;

&lt;p&gt;M`    | Modified file                  |&lt;/p&gt;

&lt;p&gt;| &lt;code&gt;A&lt;/code&gt;    | Newly added file               |&lt;/p&gt;

&lt;p&gt;| &lt;code&gt;D&lt;/code&gt;    | Deleted file                   |&lt;/p&gt;

&lt;p&gt;| &lt;code&gt;U&lt;/code&gt;    | Unmerged file (merge conflict) |&lt;/p&gt;

&lt;p&gt;| &lt;code&gt;??&lt;/code&gt;   | Untracked file                 |&lt;/p&gt;

&lt;p&gt;Running &lt;code&gt;git status&lt;/code&gt; frequently helps you understand what Git is tracking before committing in Git.&lt;/p&gt;




&lt;h1&gt;
  
  
  Common Git Workflow Cheat Sheet in Git
&lt;/h1&gt;

&lt;p&gt;Initialize a repository in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git init&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Stage files in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git add.&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Create a commit in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git commit -m "Your message"&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Push to GitHub in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git push&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Download changes in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git pull&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Create a new branch in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git checkout -b feature-name&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Switch branches in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git checkout main&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Merge a branch in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git merge feature-name&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;View commit history in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git log --oneline&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Check repository status in Git:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`bash&lt;/p&gt;

&lt;p&gt;git status&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Final Thoughts on Git
&lt;/h1&gt;

&lt;p&gt;Git can seem intimidating at first but most developers use the same handful of commands every day in Git.&lt;/p&gt;

&lt;p&gt;The basic Git workflow is simple:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Make changes in Git.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stage them with &lt;code&gt;git add&lt;/code&gt; in Git.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Save them with &lt;code&gt;git commit&lt;/code&gt; in Git.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Share them using &lt;code&gt;git push&lt;/code&gt; in Git.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As you collaborate with others you will occasionally encounter pull requests merge conflicts and branches in Git.&lt;/p&gt;

&lt;p&gt;These are not signs that something's wrong. They are simply part of working with version control in Git.&lt;/p&gt;

&lt;p&gt;The more you practice the more Git starts to feel less like a list of commands and like a reliable safety net for your code, in Git.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>github</category>
      <category>beginners</category>
      <category>developers</category>
    </item>
  </channel>
</rss>
