<?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: Eagle Dev</title>
    <description>The latest articles on DEV Community by Eagle Dev (@eagledev_).</description>
    <link>https://dev.to/eagledev_</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%2F773031%2F1486275f-8808-462f-89f4-b6de6a65506b.jpg</url>
      <title>DEV Community: Eagle Dev</title>
      <link>https://dev.to/eagledev_</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/eagledev_"/>
    <language>en</language>
    <item>
      <title>The Day the Disc Died</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Fri, 10 Jul 2026 20:13:42 +0000</pubDate>
      <link>https://dev.to/eagledev_/the-day-the-disc-died-180k</link>
      <guid>https://dev.to/eagledev_/the-day-the-disc-died-180k</guid>
      <description>&lt;p&gt;&lt;em&gt;GTA VI is the biggest game ever made, and it's shipping without a disc. That's not really a gaming story. It's a preview of what's happening to your job.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;On November 19, 2026, Grand Theft Auto VI comes out. Rockstar spent over a decade and more than a billion dollars building it. And when you walk into a shop to buy the "physical" edition, you get a box with a download code inside. No disc. Rockstar has confirmed there are no plans to print one, not at launch, not later.&lt;/p&gt;

&lt;p&gt;Sit with that for a second. The most anticipated game in history looked at the disc, the thing games came on for thirty years, and decided it wasn't worth making.&lt;/p&gt;

&lt;p&gt;They're not being lazy. They're reading the room. On PlayStation last year, around 80% of games were already bought as downloads. The disc was already mostly dead. GTA VI just said the quiet part out loud.&lt;/p&gt;

&lt;p&gt;Here's why you should care even if you've never touched a controller.&lt;/p&gt;

&lt;h2&gt;
  
  
  The disc was never the game
&lt;/h2&gt;

&lt;p&gt;Nobody ever loved a game because of the disc.&lt;/p&gt;

&lt;p&gt;You loved it because it was fun. The disc was just the delivery truck. For years a big chunk of the games business went into that truck: pressing plastic, shipping it, paying for shelf space in the store. Expensive, slow, and completely beside the point.&lt;/p&gt;

&lt;p&gt;Then Steam and the console stores turned the truck into a download. Delivery went from expensive to nearly free. And the moment that happened, all that effort was exposed as overhead. What was left to compete on? One thing. Whether the game was actually good.&lt;/p&gt;

&lt;p&gt;Now hold that thought and look at software.&lt;/p&gt;

&lt;h2&gt;
  
  
  Writing code is becoming the disc
&lt;/h2&gt;

&lt;p&gt;For most of software's history, turning an idea into working code was the hard, expensive part. It took skill. It took time. That difficulty was the whole job, and it's what you got paid for.&lt;/p&gt;

&lt;p&gt;AI just turned it into a download. You describe what you want, and working code shows up in seconds, for almost nothing.&lt;/p&gt;

&lt;p&gt;So the same question that landed on Rockstar now lands on you. If the hard part is cheap now, what were people actually paying for?&lt;/p&gt;

&lt;p&gt;Not the typing. They were never paying for the typing, the same way nobody was paying for the disc. They were paying for what the code delivers: a problem solved, a product that works, a decision made well. That was always the game. Now it's the only thing left to compete on.&lt;/p&gt;

&lt;h2&gt;
  
  
  This isn't a prediction. It's already measurable.
&lt;/h2&gt;

&lt;p&gt;Here's where it gets uncomfortable, and where the numbers are real.&lt;/p&gt;

&lt;p&gt;GitClear studied 211 million lines of code written between 2020 and 2024. They tracked what developers actually do: writing new code, deleting it, and "moving" it, which is their word for refactoring, the unglamorous work of cleaning up and reusing what you already have.&lt;/p&gt;

&lt;p&gt;The finding: in 2024, for the first time ever, copy-pasted code beat refactored code. Refactoring fell from about a quarter of all changes in 2021 to under 10%. Duplicate blocks of code jumped roughly eightfold.&lt;/p&gt;

&lt;p&gt;In plain English, when producing code got cheap, people stopped tidying up and started pasting. Why merge two similar things into one clean piece when you can just generate a third copy? It runs. It ships. And it quietly rots the codebase from the inside.&lt;/p&gt;

&lt;p&gt;That's the trap. Cheap production doesn't make you a better developer. Left alone, it buries you in shallow, duplicated work that someone has to untangle later. The AI will happily write copy number ten. It will never notice you already have nine.&lt;/p&gt;

&lt;h2&gt;
  
  
  So what are you actually paid for?
&lt;/h2&gt;

&lt;p&gt;The same thing games are paid for now. Being good.&lt;/p&gt;

&lt;p&gt;Not the syntax. The judgment underneath it. What should we build, and what shouldn't we? Who is this for? What problem are they really trying to solve, as opposed to what they typed into the ticket? Will this hold up when real people use it? Does the whole thing hang together, or is it nine copies in a trench coat?&lt;/p&gt;

&lt;p&gt;That layer, the thinking and the taste and the understanding of the person on the other end, is the part AI can't hand you. It's also the part that was always worth the money. The code was just how it got delivered.&lt;/p&gt;

&lt;h2&gt;
  
  
  The disc was never the game
&lt;/h2&gt;

&lt;p&gt;GTA VI is telling you something, and it isn't about plastic.&lt;/p&gt;

&lt;p&gt;When making and shipping the thing becomes free, the value doesn't vanish. It moves to where it always quietly lived. For games, that was never the disc. It was the fun. For you, it was never the code. It was knowing what to build, and why.&lt;/p&gt;

&lt;p&gt;The disc is dead. Good. It was never the game.&lt;/p&gt;

&lt;p&gt;And the typing was never the job.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>career</category>
      <category>discuss</category>
    </item>
    <item>
      <title>AI wrote this blog, surprising intro to Convex Backend</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Sat, 25 Jan 2025 07:38:59 +0000</pubDate>
      <link>https://dev.to/eagledev_/ai-wrote-this-blog-surprising-intro-to-convex-backend-2na3</link>
      <guid>https://dev.to/eagledev_/ai-wrote-this-blog-surprising-intro-to-convex-backend-2na3</guid>
      <description>&lt;h2&gt;
  
  
  Let's discuss how good this was
&lt;/h2&gt;

&lt;p&gt;I'm just letting ai write this because I'm bored, don't come after me in comments hahaha&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Convex.js: The Backend Buddy You Didn't Know You Needed&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In the bustling realm of web development, managing backends can often feel like juggling flaming torches—exciting but perilous. Enter &lt;strong&gt;Convex.js&lt;/strong&gt;, your new best friend that makes backend management as smooth as butter on a hot pancake.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. Reactive Data Queries: Your App's Pulse&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Imagine your app's data is like a live concert, and you want every user to experience the same beat simultaneously. Convex.js offers &lt;strong&gt;reactive data queries&lt;/strong&gt; that ensure all clients are grooving to the same tune in real-time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It's Cool:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Automatic Updates:&lt;/strong&gt; When your data changes, all subscribed clients get the memo instantly. No need for manual refreshes or complex polling mechanisms.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let's say you're building a live chat application. You want all users to see new messages as they come in. Here's how you can set that up:&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ConvexClient&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/browser&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="p"&gt;}&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;../convex/_generated/api&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConvexClient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;CONVEX_URL&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Subscribe to the 'listAll' query in the 'messages' module&lt;/span&gt;
&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;onUpdate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;listAll&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;messages&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;New messages:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;msg&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;msg&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this snippet, &lt;code&gt;onUpdate&lt;/code&gt; subscribes to the &lt;code&gt;listAll&lt;/code&gt; query in the &lt;code&gt;messages&lt;/code&gt; module. Whenever there's a new message, it logs the updated list to the console. It's like having a personal assistant who whispers, "Hey, there's something new!" every time a message arrives.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2. Serverless Functions: Code Without the Load&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Writing backend logic often means dealing with servers, deployments, and a sprinkle of headaches. Convex.js introduces &lt;strong&gt;serverless functions&lt;/strong&gt;, allowing you to write your backend code without worrying about the underlying infrastructure.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It's Cool:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplified Development:&lt;/strong&gt; Write your functions, and Convex.js handles the rest—scaling, execution, and all the nitty-gritty details.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Suppose you want to add a new message to your chat application. Here's how you can define a mutation function:&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="c1"&gt;// convex/functions.js&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;mutation&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/server&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sendMessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;mutation&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;db&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;userId&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;createdAt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;messages&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And to call this mutation from your client:&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useMutation&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ChatInput&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sendMessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useMutation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sendMessage&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&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;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;body&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;sendMessage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;user123&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reset&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="nx"&gt;onSubmit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Type your message...&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Send&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/form&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, &lt;code&gt;sendMessage&lt;/code&gt; is a mutation that adds a new message to the &lt;code&gt;messages&lt;/code&gt; table. The &lt;code&gt;ChatInput&lt;/code&gt; component uses this mutation to send messages when the form is submitted. It's like sending a letter without worrying about the postal service logistics.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;3. Built-In Authentication: Security Made Simple&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Security can be a daunting aspect of app development, but Convex.js has your back with &lt;strong&gt;built-in authentication&lt;/strong&gt;. Whether you're dealing with email/password sign-ups or third-party OAuth providers, Convex.js makes user authentication straightforward and secure.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It's Cool:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Hassle-Free User Management:&lt;/strong&gt; Implementing authentication becomes a breeze, allowing you to focus on building features rather than security protocols.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Integrating Auth0 for user authentication:&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Auth0Provider&lt;/span&gt; &lt;span class="p"&gt;}&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;@auth0/auth0-react&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ConvexProviderWithAuth0&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/react-auth0&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ConvexReactClient&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;convex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConvexReactClient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;CONVEX_URL&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pageProps&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Auth0Provider&lt;/span&gt;
      &lt;span class="nx"&gt;domain&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;AUTH0_DOMAIN&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="nx"&gt;clientId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;AUTH0_CLIENT_ID&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="nx"&gt;redirectUri&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;origin&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ConvexProviderWithAuth0&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;convex&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;pageProps&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ConvexProviderWithAuth0&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Auth0Provider&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this setup, &lt;code&gt;Auth0Provider&lt;/code&gt; manages the authentication flow, and &lt;code&gt;ConvexProviderWithAuth0&lt;/code&gt; bridges Auth0 with Convex.js, ensuring that your users are authenticated seamlessly. It's like having a bouncer who knows all your VIPs by name.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;4. TypeScript Support: Type Safety for the Win&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;For those who appreciate the structure and safety of TypeScript, Convex.js offers robust support, allowing you to write type-safe code that catches errors before they sneak into production.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It's Cool:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Enhanced Developer Experience:&lt;/strong&gt; With TypeScript, you get autocompletion, type checking, and a more predictable codebase.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Defining a function with TypeScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// convex/functions.ts&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;mutation&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/server&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Id&lt;/span&gt; &lt;span class="p"&gt;}&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;convex/values&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sendMessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;mutation&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;db&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;userId&lt;/span&gt; &lt;span class="p"&gt;}:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Id&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;createdAt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;messages&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;message&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we've defined the &lt;code&gt;sendMessage&lt;/code&gt; mutation with explicit types for &lt;code&gt;body&lt;/code&gt; and &lt;code&gt;userId&lt;/code&gt;. This ensures that anyone using this function will know exactly what types of arguments are expected, reducing the chances of runtime errors. It's like having a GPS that ensures you never take a wrong turn in your code.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;5. Open-Source Client Libraries: Freedom to Customize&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Convex.js provides open-source client libraries, giving you the flexibility to dive into the code, understand its workings, and even tailor it to your specific needs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It's Cool:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Transparency and Control:&lt;/strong&gt; Access to the source code means you can customize functionalities or contribute to the project, fostering a collaborative development environment.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Exploring the Convex.js GitHub repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Clone the repository&lt;/span&gt;
git clone https://github.com/get-convex/convex-js.git

&lt;span class="c"&gt;# Navigate to the project directory&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;convex-js

&lt;span class="c"&gt;# Install dependencies&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt;

&lt;span class="c"&gt;# Explore the codebase&lt;/span&gt;
code &lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By cloning the repository, you can explore the inner workings of Convex.js, understand its architecture, and even propose changes or enhancements. It's like having the blueprints to a high-tech gadget, allowing you to tweak and tinker to your heart's content.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Wrapping Up&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Convex.js is like the Swiss&lt;/p&gt;




&lt;p&gt;Eagle here, I don't know why he used convex hull algorithm as reference, how accurate even is this.&lt;/p&gt;

&lt;p&gt;And this was the cover art that was scraped hahaha&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%2Fq7gyd0wg7oa1y01k5pny.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%2Fq7gyd0wg7oa1y01k5pny.png" alt=" " width="800" height="457"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>tutorial</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Over engineering a todo list app - Part 1</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Tue, 14 Nov 2023 15:19:19 +0000</pubDate>
      <link>https://dev.to/eagledev_/over-engineering-a-todo-list-app-part-1-jh8</link>
      <guid>https://dev.to/eagledev_/over-engineering-a-todo-list-app-part-1-jh8</guid>
      <description>&lt;h2&gt;
  
  
  Table of content (for lazy people)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Backstory (kind of)&lt;/li&gt;
&lt;li&gt;The need to over engineer&lt;/li&gt;
&lt;li&gt;Technologies used&lt;/li&gt;
&lt;li&gt;
Progress report

&lt;ul&gt;
&lt;li&gt;Finished stuff&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Discussion&lt;/li&gt;
&lt;/ul&gt;



&lt;h2&gt;
  
  
  Backstory (kind of)
&lt;/h2&gt;

&lt;p&gt;So well, recently I have been thinking to start doing expansion of my portfolio or whatever you call it (most probably resume).&lt;/p&gt;

&lt;p&gt;I wanted to add some cool projects, starting from basic ones to advance ones. And ironically I came up with a TODO APP. Like literally, a so called cool, freaking Todo App.&lt;/p&gt;

&lt;p&gt;Anyways, enough trash taking lets start some discussion on technical aspects and why my dumb mind wants to over engineer it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The need to over engineer
&lt;/h2&gt;

&lt;p&gt;(^^^ Not really)&lt;/p&gt;

&lt;p&gt;So I came in the conclusion to create a todo app. I initially thought using simple react app using vite. Add a normal local storage based todo app and done. A new project ready in few days (well I'm too lazy to complete it fast).&lt;/p&gt;

&lt;p&gt;But then, I came across some YouTube videos and something that was looking like a simple perfectly planned and about to finished project has changed forever.&lt;/p&gt;

&lt;p&gt;So firstly, I came across this YouTube channel named, josh tried coding. And watched some videos which featured, some new tech's and softwares.&lt;/p&gt;

&lt;p&gt;^^^ This above thing tempted myself to try these softwares like react-query v5, sonner, shadcn ui, next ui.&lt;/p&gt;

&lt;p&gt;And guess what I see that my favorite coding youtuber has uploaded a tutorial featuring appwrite (ofc he's javascript mastery). And at the same time code with Antonio uploaded a video featuring notion clone.&lt;/p&gt;

&lt;p&gt;Now what? I got tempted to try all these technologies. Well I chooses to try few of them and somehow I came up with the idea to create or atleast try to create an app which will be somewhat close to todoist but not same or that advance.&lt;/p&gt;

&lt;p&gt;Now let's really talk about some technical stuff so that I'll atleast look somewhat smart&lt;/p&gt;

&lt;h2&gt;
  
  
  Technologies used
&lt;/h2&gt;

&lt;p&gt;So I choose to use following technologies.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;NextJs - as main framework&lt;/li&gt;
&lt;li&gt;Appwrite - as backend to manage auth, databse and storage&lt;/li&gt;
&lt;li&gt;Next Ui - as main component library&lt;/li&gt;
&lt;li&gt;React Query - as main fetching thing&lt;/li&gt;
&lt;li&gt;React hook form - most important element because whole app will require many forms&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And that's it (may use many other useful tools in future, including adding pwa support)&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Currently the web app is still in development&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Progress report
&lt;/h2&gt;

&lt;p&gt;Project is hosted for everyone on vercel.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://zen-todo-web.vercel.app" rel="noopener noreferrer"&gt;Live Preview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Screenshot for lazy people
&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%2Fvmx2s75sdlz9jr70tyuo.png" alt="Screenshot preview of project" width="800" height="480"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Finished stuff
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Landing page&lt;/li&gt;
&lt;li&gt;Signup and Login pages&lt;/li&gt;
&lt;li&gt;Reset Password page&lt;/li&gt;
&lt;li&gt;Basic project structure&lt;/li&gt;
&lt;li&gt;App's main ui (in progress)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Well the source code is currently private, if this post receives a great feedback then I'll public the source so everyone will be able to interact and help (mostly guide) me through this project.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I'm taking about correcting me if I'm wrong or if I'm writing code with some bad practices. NOT SPOON FEEDINGS.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Discussion
&lt;/h2&gt;

&lt;p&gt;I'm expecting your feedbacks (probably critics) on this project in comment.&lt;/p&gt;

&lt;p&gt;Make sure to tell if you wanna see the source and help me throughout the process.&lt;/p&gt;

&lt;p&gt;I'll be posting devlog kind of blog posts on this project if somehow dev.to's people like this dumb stuff that I'm doing.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>nextjs</category>
      <category>devops</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Automating your repitative git commands the right way</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Tue, 22 Aug 2023 11:51:23 +0000</pubDate>
      <link>https://dev.to/eagledev_/automate-your-repetitive-git-commands-like-a-pro-15c2</link>
      <guid>https://dev.to/eagledev_/automate-your-repetitive-git-commands-like-a-pro-15c2</guid>
      <description>&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;p&gt;&amp;nbsp;1. What exactly is the problem?&lt;/p&gt;

&lt;p&gt;&amp;nbsp;2. Git commands are not much a hassle&lt;/p&gt;

&lt;p&gt;&amp;nbsp;3. Method 1: Creating a bash script&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 3.1. How to implement this solution?&lt;/p&gt;

&lt;p&gt;&amp;nbsp;4. Method 2: Using git alias command&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 4.1. How to implement this?&lt;br&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 4.2. Some useful blogs and resources&lt;/p&gt;

&lt;p&gt;&amp;nbsp;5. Final thoughts&lt;/p&gt;
&lt;h2&gt;
  
  
  What exactly is the problem?
&lt;/h2&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%2Fpso2z33w31dt9iuynipp.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%2Fpso2z33w31dt9iuynipp.png" alt="Addressing the problem" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Well, we all have been using git commands a lot, while working on projects, I bet everyone has spammed &lt;code&gt;git commit&lt;/code&gt; and &lt;code&gt;git add .&lt;/code&gt; more than they've realized it.&lt;/p&gt;

&lt;p&gt;Sometimes, writing long git commands can take up time, and writing them multiple times can build up frustration. Even some smaller commands can take time, which on compounding can show that you may have wasted hours by not using these shortcut tricks.&lt;/p&gt;

&lt;p&gt;This blog post helps you to solve the exact problem. I'll show you different methods, to save your time and you can use any of the following depending on your workflow.&lt;/p&gt;
&lt;h2&gt;
  
  
  Git commands are not much a hassle
&lt;/h2&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%2Fzgsorn3t76h9udq52j50.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%2Fzgsorn3t76h9udq52j50.png" alt="Git commands are not much a hassle" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Well some of you may already come for me in comments saying these repitative git commands ain't that much hassle, but sometimes writing few letters less can help us not to lose sanity fast.&lt;/p&gt;

&lt;p&gt;Let's talk about our first method&lt;/p&gt;
&lt;h2&gt;
  
  
  Method 1: Creating a bash script
&lt;/h2&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%2F98aay1z2anyc53e87yfr.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%2F98aay1z2anyc53e87yfr.png" alt="Method 1: Creating a bash script" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can indeed create a bash script which can help us to eliminate writing multiple commands. For e.g. you can eliminate writing &lt;code&gt;git add .&lt;/code&gt;, &lt;code&gt;git commit -m ""&lt;/code&gt;, &lt;code&gt;git push -u origin main&lt;/code&gt;, and do it using a single custom command.&lt;/p&gt;

&lt;p&gt;Following is an example of how to eliminate writing above three commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#!/bin/bash&lt;/span&gt;

&lt;span class="c"&gt;# Recommend to use!&lt;/span&gt;
&lt;span class="c"&gt;# Advance script to automate repitative commands&lt;/span&gt;

&lt;span class="nv"&gt;currentBranch&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$1&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="nv"&gt;message&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$2&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;

&lt;span class="c"&gt;# Check if current branch and commit message are provided&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-z&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$currentBranch&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Usage: &lt;/span&gt;&lt;span class="nv"&gt;$0&lt;/span&gt;&lt;span class="s2"&gt; &amp;lt;currentBranch&amp;gt; &amp;lt;commitMessage&amp;gt;"&lt;/span&gt;
    &lt;span class="nb"&gt;exit &lt;/span&gt;1
&lt;span class="k"&gt;fi

if&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-z&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Usage: &lt;/span&gt;&lt;span class="nv"&gt;$0&lt;/span&gt;&lt;span class="s2"&gt; &amp;lt;currentBranch&amp;gt; &amp;lt;commitMessage&amp;gt;"&lt;/span&gt;
    &lt;span class="nb"&gt;exit &lt;/span&gt;1
&lt;span class="k"&gt;fi&lt;/span&gt;

&lt;span class="c"&gt;# Check if git command is available&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt; &lt;span class="nb"&gt;command&lt;/span&gt; &lt;span class="nt"&gt;-v&lt;/span&gt; git &amp;amp;&amp;gt; /dev/null&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Git command not found. Aborting."&lt;/span&gt;
    &lt;span class="nb"&gt;exit &lt;/span&gt;1
&lt;span class="k"&gt;fi&lt;/span&gt;

&lt;span class="c"&gt;# Check if the current directory is a Git repository&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt; git rev-parse &lt;span class="nt"&gt;--is-inside-work-tree&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;/dev/null 2&amp;gt;&amp;amp;1&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Not inside a Git repository. Aborting."&lt;/span&gt;
    &lt;span class="nb"&gt;exit &lt;/span&gt;1
&lt;span class="k"&gt;fi&lt;/span&gt;

&lt;span class="c"&gt;# Check if there are changes to commit&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-z&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;git status &lt;span class="nt"&gt;--porcelain&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"No changes to commit. Aborting."&lt;/span&gt;
    &lt;span class="nb"&gt;exit &lt;/span&gt;1
&lt;span class="k"&gt;fi&lt;/span&gt;

&lt;span class="c"&gt;# Add all changes&lt;/span&gt;
git add &lt;span class="nb"&gt;.&lt;/span&gt;

&lt;span class="c"&gt;# Commit changes&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;

&lt;span class="c"&gt;# Push changes to origin&lt;/span&gt;
git push &lt;span class="nt"&gt;-u&lt;/span&gt; origin &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$currentBranch&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;

&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Automated Git tasks completed successfully."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  How to implement this solution?
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Create a new file in your working directory named &lt;code&gt;git-quick&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Paste the above script in it&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Make it executable using&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod&lt;/span&gt; +x git-quick
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Now you can run the file using&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./git-quick
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This was one of many use cases, you can automate other commands like this depending on your workflow.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Bonus:&lt;/strong&gt; You can also make it usable anywhere by following the following guide:&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%2Fd7ajzygvopjlh5lkiw5z.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%2Fd7ajzygvopjlh5lkiw5z.png" alt="Guide on how to make your commands accessible across various sessions" width="800" height="342"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But there'll some people who like to do multiple commits before pushing the code.&lt;/p&gt;

&lt;p&gt;Well there's another method you may try, which includes using the &lt;code&gt;git alias&lt;/code&gt; command.&lt;/p&gt;

&lt;h2&gt;
  
  
  Method 2: Using git alias command
&lt;/h2&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%2F6rmljqtw2phqbnj21ok9.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%2F6rmljqtw2phqbnj21ok9.png" alt="Method 2: Using git alias command" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git alias&lt;/code&gt; is probably the most useful command when it comes to save that hassle when it comes to type longer commands&lt;/p&gt;

&lt;p&gt;For e.g: &lt;code&gt;git push -u origin main&lt;/code&gt; can be easily simplified as &lt;code&gt;git push&lt;/code&gt; or even &lt;code&gt;git p&lt;/code&gt;. As simple as it gets!&lt;/p&gt;

&lt;h3&gt;
  
  
  How to implement this?
&lt;/h3&gt;

&lt;p&gt;Well atlassian has a detailed guide related to using &lt;code&gt;git alias&lt;/code&gt; command, you can check that out or here's a quick summary.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aliases can be created by either using &lt;code&gt;git config&lt;/code&gt; as shown below, or it can also be created by editing &lt;code&gt;$HOME/.gitconfig&lt;/code&gt; for global path, for local you can edit &lt;code&gt;./.gitconfig&lt;/code&gt; of the active repository. Following is an demonstration about how to create aliases using both methods:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// By using 'git config' command&lt;/span&gt;
&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;co&lt;/span&gt; &lt;span class="nx"&gt;checkout&lt;/span&gt;

&lt;span class="c1"&gt;// By editing './.gitconfig' file (paste the below code)&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
 &lt;span class="nx"&gt;co&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;checkout&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;You can use git alias to add short names to regular git commands.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;co&lt;/span&gt; &lt;span class="nx"&gt;checkout&lt;/span&gt;
&lt;span class="c1"&gt;// Can be used as git co&lt;/span&gt;

&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;br&lt;/span&gt; &lt;span class="nx"&gt;branch&lt;/span&gt;
&lt;span class="c1"&gt;// Can be used as git br&lt;/span&gt;

&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ci&lt;/span&gt; &lt;span class="nx"&gt;commit&lt;/span&gt;
&lt;span class="c1"&gt;// Can be used as git ci&lt;/span&gt;

&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;st&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;
&lt;span class="c1"&gt;// Can be used as git st&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;You can also create some custom commands using git alias
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nb"&gt;global&lt;/span&gt; &lt;span class="nx"&gt;alias&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;unstage&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;reset HEAD --&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="c1"&gt;// This can make following two commands equivalent&lt;/span&gt;
&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;unstage&lt;/span&gt; &lt;span class="nx"&gt;fileA&lt;/span&gt;
&lt;span class="nx"&gt;$&lt;/span&gt; &lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;reset&lt;/span&gt; &lt;span class="nx"&gt;HEAD&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt; &lt;span class="nx"&gt;fileA&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Some useful blogs and resources
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases" rel="noopener noreferrer"&gt;Official documentations of git aliases&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://snyk.io/blog/10-git-aliases-for-faster-and-productive-git-workflow/" rel="noopener noreferrer"&gt;Synk's blog discussing about -  git alias for faster workflow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://gist.github.com/mwhite/6887990#my-aliases" rel="noopener noreferrer"&gt;Gist discussing about git alias command&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&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%2Fcj9afg8px2ghqssjp927.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%2Fcj9afg8px2ghqssjp927.png" alt="Final thoughts" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In order to become a &lt;strong&gt;Git Ninja&lt;/strong&gt; you can use any of the two methods mentioned above depending on your workflow.&lt;/p&gt;

&lt;p&gt;If you have some more tips that I may have missed, then feel free to share them in the comments.&lt;/p&gt;

&lt;p&gt;If you found any mistake in this blog then correct me up in the comments.&lt;/p&gt;

&lt;p&gt;Thank you for reading this far! ❣️&lt;/p&gt;




&lt;p&gt;Follow me on Twitter &lt;a href="https://twitter.com/eagledev_" rel="noopener noreferrer"&gt;@eagledev_&lt;/a&gt; to recieve some useful tips and tricks.&lt;/p&gt;




</description>
      <category>github</category>
      <category>git</category>
      <category>tutorial</category>
      <category>productivity</category>
    </item>
    <item>
      <title>I created an entire dynamic website with NextJs on android!</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Tue, 05 Jul 2022 06:26:26 +0000</pubDate>
      <link>https://dev.to/eagledev_/i-created-an-entire-dynamic-website-with-nextjs-on-android-2g9e</link>
      <guid>https://dev.to/eagledev_/i-created-an-entire-dynamic-website-with-nextjs-on-android-2g9e</guid>
      <description>&lt;h2&gt;
  
  
  Context
&lt;/h2&gt;

&lt;p&gt;So before beginning let me give you some context.&lt;br&gt;
I'm develop websites on android! You'll ask why, simply because I don't have pc :(&lt;br&gt;
In my learning period I have found many ways to code a perfect website on android, from generating an NextJs or ReactJs project to creating a responsive design to a perfect code editor. I have found a way for all of this!&lt;/p&gt;




&lt;h3&gt;
  
  
  Topic
&lt;/h3&gt;

&lt;p&gt;Moving on to discussion, I recently finished working on a dynamic website for an eSports organization that is build using NextJs!&lt;/p&gt;

&lt;p&gt;Many of you still won't belive it but ya this site is 100% responsive.&lt;/p&gt;

&lt;p&gt;I'm looking forward to upload a blog on this topic, named "This is how I created a dynamic website on android"&lt;/p&gt;




&lt;h3&gt;
  
  
  Your Feedback
&lt;/h3&gt;

&lt;p&gt;I want to know your opinions. Will you like to know about my development process? Will you like to know ky secret to make websites responsive and test responsiveness on android? &lt;strong&gt;Let me know in comments!&lt;/strong&gt;&lt;/p&gt;




</description>
    </item>
    <item>
      <title>Do you use PNPM? If yes why?</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Sat, 11 Jun 2022 16:59:31 +0000</pubDate>
      <link>https://dev.to/eagledev_/do-you-use-pnpm-if-yes-why-423c</link>
      <guid>https://dev.to/eagledev_/do-you-use-pnpm-if-yes-why-423c</guid>
      <description>&lt;p&gt;&lt;strong&gt;PNPM&lt;/strong&gt; is said to be most efficient package manager. I'm also thinking to switch from slower npm to faster PNPM. &lt;/p&gt;

&lt;p&gt;Before switching I would like to know about pros and cons of PNPM.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let me know in comments!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>node</category>
      <category>javascript</category>
      <category>npm</category>
      <category>discuss</category>
    </item>
    <item>
      <title>All you need to know about console.log()</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Thu, 09 Jun 2022 08:14:06 +0000</pubDate>
      <link>https://dev.to/eagledev_/all-you-need-to-know-about-consolelog-2idi</link>
      <guid>https://dev.to/eagledev_/all-you-need-to-know-about-consolelog-2idi</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Currently every javascript developer is familier with &lt;code&gt;console.log()&lt;/code&gt;, the most popular option for debugging in javascript.&lt;/p&gt;

&lt;p&gt;As being popular, &lt;strong&gt;console object&lt;/strong&gt; have some commonly used methods like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;console.warn()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;console.error()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;console.info()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;console.table()&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We'll learn more about this methods in today's article, and also we'll get ourself introduced about &lt;code&gt;console.assert()&lt;/code&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Console Methods
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Console Warn
&lt;/h3&gt;

&lt;p&gt;It is used to log warnings in the console. As shown in the image below, &lt;code&gt;console.warn()&lt;/code&gt; have a unique yellow colour logging in console.&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc2tcieookj76gykvfxl3.jpg" 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%2Fc2tcieookj76gykvfxl3.jpg" alt="IMG_20220301_220633.jpg" width="799" height="227"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example usage:&lt;/strong&gt;&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;warn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This is a warning message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Console Error
&lt;/h3&gt;

&lt;p&gt;As per name, it is used to log errors in console. As per following image &lt;code&gt;console.error()&lt;/code&gt; method logs a red  coloured error message.&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frfbmbl7hf5u9v7esxfet.jpg" 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%2Frfbmbl7hf5u9v7esxfet.jpg" alt="IMG_20220301_220713.jpg" width="800" height="248"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example usage:&lt;/strong&gt;&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This is an error message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Console Info
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;console.info()&lt;/code&gt; can be useful when you want to log some information in console. It logs a blue colored info message.&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcj17qyt1ffbk2jidnbn6.jpg" 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%2Fcj17qyt1ffbk2jidnbn6.jpg" alt="IMG_20220301_220823.jpg" width="800" height="239"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example Usage:&lt;/strong&gt;&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This is an info message!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Info message isn't displaying as mentioned because I'm using &lt;a href="https://github.com/liriliri/eruda" rel="noopener noreferrer"&gt;Eruda Console&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  4. Console Table
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;console.table()&lt;/code&gt; is useful when you want to display your array with data in a tabular form.&lt;/p&gt;

&lt;h4&gt;
  
  
  Syntax
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;table&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;columns&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;table()&lt;/code&gt; method takes one argument i.e &lt;code&gt;data&lt;/code&gt;, it must be an array or an object. It also takes an optional argument i.e &lt;code&gt;columns&lt;/code&gt;, it select a subset of columns to display.&lt;/p&gt;

&lt;h4&gt;
  
  
  Understanding with Examples
&lt;/h4&gt;

&lt;h5&gt;
  
  
  1. The &lt;code&gt;data&lt;/code&gt; parameter:
&lt;/h5&gt;

&lt;p&gt;&lt;code&gt;data&lt;/code&gt; parameter maybe an array and an object i.e. then represented in tabular form.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example usage with array:&lt;/strong&gt;&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="c1"&gt;// passing an array&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;table&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;eagle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sparrow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;peacock&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2F78p0x47mp9g1vimz877t.jpg" 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%2F78p0x47mp9g1vimz877t.jpg" alt="with array" width="799" height="262"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example usage with object:&lt;/strong&gt;&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="c1"&gt;// passing an object&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;eagle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;species&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bird&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;table&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fodqu43y5j42npaztodxp.jpg" 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%2Fodqu43y5j42npaztodxp.jpg" alt="with object" width="799" height="344"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  2. The &lt;code&gt;columns&lt;/code&gt; parameter:
&lt;/h5&gt;

&lt;p&gt;&lt;code&gt;columns&lt;/code&gt; parameter selects a part of &lt;code&gt;data&lt;/code&gt; that is then displayed. It can be also used for &lt;strong&gt;restricting&lt;/strong&gt; displayed columns.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example usage:&lt;/strong&gt;&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;function&lt;/span&gt; &lt;span class="nf"&gt;Bird&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;emoji&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;eagle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Bird&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Eagle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;🦅&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sparrow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Bird&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sparrow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;🐦&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;peacock&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Bird&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Peacock&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;🦚&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;table&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;eagle&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sparrow&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;peacock&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;emoji&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Finc4buebunqsjfgshl5j.jpg" 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%2Finc4buebunqsjfgshl5j.jpg" alt="with columns" width="800" height="569"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;To notice the difference try this yourself by removing &lt;code&gt;columns&lt;/code&gt; parameter i.e &lt;code&gt;["emoji"]&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  5. Console Assert
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;console.assert()&lt;/code&gt; is super useful for debugging. If an assertion gets failed then a trace is logged in console.&lt;/p&gt;

&lt;h4&gt;
  
  
  Syntax
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// simple syntax&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;assertion&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// advance syntax&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;assertion&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;assertion&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;assertion&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="cm"&gt;/* ... ,*/&lt;/span&gt; &lt;span class="nx"&gt;objN&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;assertion&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;subst1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;assertion&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;subst1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="cm"&gt;/* ... ,*/&lt;/span&gt; &lt;span class="nx"&gt;substN&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Understanding with Examples
&lt;/h4&gt;

&lt;p&gt;Basic example using &lt;code&gt;simple syntax&lt;/code&gt;&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;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Expression returned false&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fu24z3j7cekl2wf0rtcr5.jpg" 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%2Fu24z3j7cekl2wf0rtcr5.jpg" alt="console assert" width="800" height="249"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We'll learn more about &lt;code&gt;console.assert&lt;/code&gt; in a dedicated blog.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;console&lt;/code&gt; object can be stated as heart of debugging in javascript. We tooked a look over all basic but useful methods of &lt;code&gt;console&lt;/code&gt; object.&lt;/p&gt;




&lt;h2&gt;
  
  
  Further reading
&lt;/h2&gt;

&lt;p&gt;If you want to know more about &lt;code&gt;console&lt;/code&gt; object and learn about it's more useful but advance techniques and methods, refer to the following links:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/console" rel="noopener noreferrer"&gt;MDN Web Docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/jsref/obj_console.asp" rel="noopener noreferrer"&gt;W3 School&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Thanks for reading
&lt;/h2&gt;

&lt;p&gt;Follow me on &lt;a href="https://instagram.com/eagledev_" rel="noopener noreferrer"&gt;instagram&lt;/a&gt; &amp;amp; &lt;a href="https://twitter.com/eagledev_" rel="noopener noreferrer"&gt;twitter&lt;/a&gt; to stay connected!&lt;/p&gt;




</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Journey to C++</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Sun, 09 Jan 2022 03:50:33 +0000</pubDate>
      <link>https://dev.to/eagle1309/journey-to-c-44ak</link>
      <guid>https://dev.to/eagle1309/journey-to-c-44ak</guid>
      <description>&lt;h2&gt;
  
  
  Motive
&lt;/h2&gt;

&lt;p&gt;Many of you might be confused that what does it actually means, right?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Actually&lt;/strong&gt; Journey to C++ is a GitHub Repository created so that peoples like &lt;strong&gt;you&lt;/strong&gt; can post various C++ snippets and basic to advance level codes and master C++ along with community!&lt;/p&gt;




&lt;h2&gt;
  
  
  Know more on GitHub
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/EAGLE1309"&gt;
        EAGLE1309
      &lt;/a&gt; / &lt;a href="https://github.com/EAGLE1309/journey-to-cpp"&gt;
        journey-to-cpp
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      A repository to learn c++ with community!
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;h1&gt;
Journey to C++&lt;/h1&gt;
&lt;p&gt;Welcome to &lt;a href="https://github.com/EAGLE1309/journey-to-cpp"&gt;Journey to C++&lt;/a&gt; a repository created for peoples who want to learn C++.&lt;/p&gt;
&lt;div&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://camo.githubusercontent.com/60e5d6862d1bce98b6552c2dcab95787f059f5a8a6d905ab7b45b1770256c980/68747470733a2f2f696b2e696d6167656b69742e696f2f6561676c656e6574776f726b2f313634313635393931353036335f65504f746a765454692e706e673f7570646174656441743d31363431363539393939323132"&gt;&lt;img src="https://camo.githubusercontent.com/60e5d6862d1bce98b6552c2dcab95787f059f5a8a6d905ab7b45b1770256c980/68747470733a2f2f696b2e696d6167656b69742e696f2f6561676c656e6574776f726b2f313634313635393931353036335f65504f746a765454692e706e673f7570646174656441743d31363431363539393939323132" alt="logo"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;This repository contains C++ programs divided into categories. This repository is a updating repository.&lt;/p&gt;
&lt;p&gt;Peoples like you are always welcome to add more codes!&lt;/p&gt;
&lt;p&gt;Contributors are always welcome. Contribute to this repository to add more codes!&lt;/p&gt;

&lt;h2&gt;
Contributing&lt;/h2&gt;
&lt;p&gt;Contributions are always welcome!&lt;/p&gt;
&lt;p&gt;See &lt;a href="https://github.com/EAGLE1309/journey-to-cpp/blob/master/CONTRIBUTING.md"&gt;contributing.md&lt;/a&gt; for ways to get started.&lt;/p&gt;
&lt;p&gt;Please adhere to this project's &lt;a href="https://github.com/EAGLE1309/journey-to-cpp/blob/master/CODE_OF_CONDUCT.md"&gt;code of conduct&lt;/a&gt;&lt;/p&gt;

&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/EAGLE1309/journey-to-cpp"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;





&lt;h2&gt;
  
  
  What will be benifits of Contribution?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You will get to learn more about c++ by examining program written by others&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You will get better and better at c++ if you will practice it by writing more code&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;While coding with community you will get to know about some tricks that others use for faster development!&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Hope you guys will like my small idea so that everyone who wants to learn c++ will get helped! Make sure to contribute and add your codes and snippets &lt;em&gt;(divided into categories)&lt;/em&gt; now!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Web Development on android!</title>
      <dc:creator>Eagle Dev</dc:creator>
      <pubDate>Sun, 12 Dec 2021 11:56:48 +0000</pubDate>
      <link>https://dev.to/eagledev_/web-development-on-android-14a5</link>
      <guid>https://dev.to/eagledev_/web-development-on-android-14a5</guid>
      <description>&lt;h2&gt;
  
  
  What is web development?
&lt;/h2&gt;

&lt;p&gt;Web development is the work involved in developing a website for the Internet.&lt;/p&gt;




&lt;h2&gt;
  
  
  Is it possible on android?
&lt;/h2&gt;

&lt;p&gt;The answer is yes! Web development is possible in android. Here on android there are many IDE and coding apps to do that!&lt;/p&gt;




&lt;h2&gt;
  
  
  Which is best App for web dev?
&lt;/h2&gt;

&lt;p&gt;Here are list of top 3 apps I personally use for web development!&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://play.google.com/store/apps/details?id=com.rhmsoft.code" rel="noopener noreferrer"&gt;Code editor by rthym software&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://play.google.com/store/apps/details?id=com.foxdebug.acode" rel="noopener noreferrer"&gt;Acode: premium&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://play.google.com/store/apps/details?id=com.foxdebug.acodefree" rel="noopener noreferrer"&gt;Acode: free version&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  How can we get inspect element on android?
&lt;/h2&gt;

&lt;p&gt;The answer is simple! There is an awesome open source console developed for android named &lt;a href="https://github.com/liriliri/eruda" rel="noopener noreferrer"&gt;Eruda&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to use Eruda in any browser?&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a new bookmark.&lt;/li&gt;
&lt;li&gt;Set any name&lt;/li&gt;
&lt;li&gt;Set URL to
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascript&lt;/span&gt;&lt;span class="p"&gt;:(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="o"&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;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;script&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;//cdn.jsdelivr.net/npm/eruda&lt;/span&gt;&lt;span class="dl"&gt;"&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="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;eruda&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;init&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;u&gt;Screenshot:&lt;/u&gt;&lt;br&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%2Fjxz80jtdoyoh7kjic013.jpg" 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%2Fjxz80jtdoyoh7kjic013.jpg" alt="Bookmark Preview" width="800" height="644"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to use inspect element?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To start console (inspect element) on any webpage just visit that webpage then search name of your saved bookmark and click to load it.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;Screenshot 1:&lt;/u&gt;&lt;br&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%2Fmsryjz2dhpmekipvy2aw.jpg" 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%2Fmsryjz2dhpmekipvy2aw.jpg" alt="Searching Bookmark" width="800" height="1077"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;u&gt;Screenshot 2:&lt;/u&gt;&lt;br&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%2Fsg3hhe0nvrgr1m4zf291.jpg" 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%2Fsg3hhe0nvrgr1m4zf291.jpg" alt="Eruda Console" width="800" height="1262"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Click that setting icon to open your inspect element!&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Here is a responsive website designed on android:
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.eaglenetwork.tk" rel="noopener noreferrer"&gt;Eagle - Official Website&lt;/a&gt;&lt;/p&gt;




</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>android</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
