<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Kamaljot's Blog]]></title><description><![CDATA[Kamaljot's Blog]]></description><link>https://blog.kamaljotsingh.com</link><generator>RSS for Node</generator><lastBuildDate>Fri, 15 May 2026 02:08:25 GMT</lastBuildDate><atom:link href="https://blog.kamaljotsingh.com/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Prompt Engineering Secrets: 10 Must-Know Techniques That Make AI Work Like Magic]]></title><description><![CDATA[What is Prompt Engineering?Everyone is racing to use AI chatbots to generate the perfect output. Most people are leaving results on the table. The secret isn’t always a better model, more data or fancy tools but instead how you talk to the AI. This s...]]></description><link>https://blog.kamaljotsingh.com/prompt-engineering-secrets-10-must-know-techniques-that-make-ai-work-like-magic</link><guid isPermaLink="true">https://blog.kamaljotsingh.com/prompt-engineering-secrets-10-must-know-techniques-that-make-ai-work-like-magic</guid><category><![CDATA[#PromptEngineering]]></category><category><![CDATA[prompting]]></category><category><![CDATA[Prompt]]></category><category><![CDATA[chatbot]]></category><category><![CDATA[chatgpt]]></category><category><![CDATA[Prompt Engineering]]></category><category><![CDATA[AIForDevelopers]]></category><category><![CDATA[openai]]></category><category><![CDATA[Machine Learning]]></category><category><![CDATA[Artificial Intelligence]]></category><category><![CDATA[generative ai]]></category><category><![CDATA[chatgptguide]]></category><category><![CDATA[Large Language Models (LLMs)]]></category><category><![CDATA[ai productivity tools]]></category><category><![CDATA[#ai-tools]]></category><dc:creator><![CDATA[Kamaljot Singh]]></dc:creator><pubDate>Tue, 30 Sep 2025 21:52:55 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1759266659331/be360c9f-e0cb-450a-a400-f45d50ebc7ab.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p><strong>What is Prompt Engineering?</strong><br />Everyone is racing to use AI chatbots to generate the perfect output. Most people are leaving results on the table. The secret isn’t always a better model, more data or fancy tools but instead how you talk to the AI. This skill is called prompt engineering. It’s the art of crafting great instructions that make the AI give you exactly what you want. Imagine speaking to the smartest person in the world, they have so much knowledge that the way you word your conversation decides how powerful and accurate the answers will be. In this guide, I will reveal 10 game-changing prompting techniques to unlock sharper answers and get exactly what you were looking for.</p>
<hr />
<h2 id="heading-1-zero-shot-prompting">1. Zero-Shot Prompting</h2>
<p><strong>Imagine:</strong> Asking your assistant to do something <strong>without showing any examples</strong>.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Translate this sentence into Punjabi: "How are you today?"</p>
</blockquote>
<ul>
<li><p>→ Output: <code>"ਤੁਸੀਂ ਅੱਜ ਕਿਵੇਂ ਹੋ?"</code></p>
<ul>
<li><p><strong>Benefit:</strong> Fast, simple, relies on model pretraining.</p>
</li>
<li><p><strong>Best for:</strong> General translation, summarization, classification.</p>
</li>
</ul>
</li>
</ul>
<hr />
<h2 id="heading-2-instruction-prompting">2. Instruction Prompting</h2>
<p><strong>Imagine:</strong> Giving <strong>clear, structured instructions</strong> so the assistant knows exactly what to do.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Instruction: Summarize the following paragraph into one sentence.<br />Input: Artificial intelligence is rapidly changing industries by automating tasks, improving decision-making, and enhancing personalization.</p>
</blockquote>
<p>→ Output: <code>AI is transforming industries through automation, decision-making, and personalization.</code></p>
<ul>
<li><p><strong>Benefit:</strong> Clear guidance improves output accuracy without examples.</p>
</li>
<li><p><strong>Best for:</strong> Chatbots, customer support, general LLM tasks.</p>
</li>
</ul>
<hr />
<h2 id="heading-3-few-shot-in-context-learning-aka-k-shot-prompting">3. Few-Shot / In-Context Learning (aka K-Shot Prompting)</h2>
<p><strong>Imagine:</strong> Showing your assistant <strong>a few examples</strong> so it can learn the pattern.</p>
<p><strong>Example (Movie Reviews):</strong></p>
<blockquote>
<p>Review 1: "I loved this movie!" → Positive<br />Review 2: "It was boring." → Negative<br />Review 3: "The acting was fantastic, but the plot was dull." →</p>
</blockquote>
<p>→ Output: <code>Mixed / Negative</code></p>
<ul>
<li><p><strong>Benefit:</strong> Teaches patterns or styles quickly without retraining.</p>
</li>
<li><p><strong>Best for:</strong> Pattern replication, domain-specific adaptations.</p>
</li>
</ul>
<hr />
<h2 id="heading-4-chain-of-thought-cot-prompting">4. Chain-of-Thought (CoT) Prompting</h2>
<p><strong>Imagine:</strong> Asking the assistant to <strong>think step by step</strong>.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>If you have $50, spend $20 on groceries and $10 on gas, how much is left? Think step by step.</p>
</blockquote>
<p>→ Output: <code>You start with $50. After spending $20 on groceries, $30 remain. After spending $10 on gas, $20 remain.</code></p>
<ul>
<li><p><strong>Benefit:</strong> Structured reasoning improves answers for logic or math.</p>
</li>
<li><p><strong>Optional enhancement:</strong> <strong>Self-Consistent CoT</strong> – generate multiple reasoning paths, then pick the most consistent answer.</p>
</li>
</ul>
<hr />
<h2 id="heading-5-step-back-prompting">5. Step-Back Prompting</h2>
<p><strong>Imagine:</strong> Before answering, your assistant <strong>pauses to identify the main ideas</strong>.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Before writing a cake recipe, list all ingredients and steps needed.</p>
</blockquote>
<p>→ Output: <code>Lists flour, sugar, eggs, baking powder, etc., and stepwise process.</code></p>
<ul>
<li><p><strong>Benefit:</strong> Produces big-picture reasoning.</p>
</li>
<li><p><strong>Best for:</strong> Planning, structured tasks, or preparation.</p>
</li>
</ul>
<hr />
<h2 id="heading-6-least-to-most-prompting">6. Least-to-Most Prompting</h2>
<p><strong>Imagine:</strong> Solving <strong>complex problems by starting with easier steps first</strong>.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Organize my study schedule:<br />Step 1: List all subjects.<br />Step 2: Prioritize by difficulty.<br />Step 3: Assign days and times.</p>
</blockquote>
<p>→ <strong>Output:</strong></p>
<p><code>Subjects: Math, History, Science, English</code></p>
<p><code>Prioritized: Math (hard), Science (medium), History (medium), English (easy)</code></p>
<p><code>Schedule: Mon–Math, Tue–Science, Wed–History, Thu–English</code></p>
<ul>
<li><p><strong>Benefit:</strong> Reduces mistakes in multi-step reasoning.</p>
</li>
<li><p><strong>Best for:</strong> Study planning, scheduling, or problem decomposition.</p>
</li>
</ul>
<hr />
<h2 id="heading-7-tree-of-thought-tot">7. Tree-of-Thought (ToT)</h2>
<p><strong>Imagine:</strong> The assistant <strong>explores multiple reasoning paths simultaneously</strong>, like branches of a tree, then chooses the best path.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Choose a vacation destination: consider cost, activities, and weather across multiple options simultaneously, then pick the best combination.</p>
</blockquote>
<p>→ <strong>Output:</strong></p>
<p><code>Path 1: Paris → great culture, but expensive.</code></p>
<p><code>Path 2: Bali → affordable, good weather, fun activities.</code></p>
<p><code>Path 3: New York → lots to do, but crowded in summer.</code></p>
<p><code>Final choice: Bali for balance of cost, weather, and activities.</code></p>
<ul>
<li><p><strong>Benefit:</strong> Improves accuracy on complex, multi-step reasoning tasks.</p>
</li>
<li><p><strong>Best for:</strong> Multi-hop questions, strategic planning, or decision-making.</p>
</li>
</ul>
<hr />
<h2 id="heading-8-prompt-chaining">8. Prompt Chaining</h2>
<p><strong>Imagine:</strong> Breaking a <strong>big task into smaller sequential tasks</strong>, where output from one becomes input to the next.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Step 1: Identify customer complaints.<br />Step 2: Categorize them (billing, delivery, product quality).<br />Step 3: Suggest solutions for each category.</p>
</blockquote>
<p>→ <strong>Output:</strong></p>
<p><code>Complaints: “Late package,” “Overcharged,” “Broken item.”</code></p>
<p><code>Categories: Delivery → “Late package”; Billing → “Overcharged”; Product → “Broken item.”</code></p>
<p><code>Solutions: Delivery → Faster shipping; Billing → Refund; Product → Replace item.</code></p>
<ul>
<li><p><strong>Benefit:</strong> Handles long workflows or multi-stage reasoning efficiently.</p>
</li>
<li><p><strong>Best for:</strong> Multi-step instructions, report generation, support workflows.</p>
</li>
</ul>
<hr />
<h2 id="heading-9-role-playing">9. Role-Playing</h2>
<p><strong>Imagine:</strong> Asking your assistant to <strong>pretend to be a famous person or expert</strong> to give advice.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>You are Warren Buffett, the most successful investor.<br />Advise me on how I should invest my paycheck into stocks, focusing on long-term growth and safety.</p>
</blockquote>
<p>→ Output: <code>Invest in S&amp;P 500 index funds, focusing on long term growth.</code></p>
<ul>
<li><p><strong>Benefit:</strong> Adopts tone, style, or expertise for more natural, authoritative outputs.</p>
</li>
<li><p><strong>Best for:</strong> Teaching, mentorship simulations, expert advice, or role-specific guidance.</p>
</li>
</ul>
<hr />
<h2 id="heading-10-long-form-detailed-prompting">10. Long-Form / Detailed Prompting</h2>
<p><strong>Imagine:</strong> Giving <strong>rich, detailed instructions</strong> for structured outputs.</p>
<p><strong>Example:</strong></p>
<blockquote>
<p>Write a short story (around 800 words) for a 12-year-old audience about aliens landing on Earth and befriending humans. The story should:</p>
<ul>
<li><p>Be funny, adventurous, and uplifting.</p>
</li>
<li><p>Include at least 3 main characters (2 human kids and 1 alien).</p>
</li>
<li><p>Teach a lesson about teamwork and kindness.</p>
</li>
<li><p>Use simple language a middle schooler can easily follow.</p>
</li>
<li><p>Have a beginning (arrival of the aliens), middle (the challenge they face together), and ending (how friendship solves the problem).<br />  Format it with paragraphs and dialogue between the characters.</p>
</li>
</ul>
</blockquote>
<ul>
<li><p><strong>Benefit:</strong> Produces well-structured, engaging, and imaginative outputs.</p>
</li>
<li><p><strong>Best for:</strong> Creative writing, tutoring, simulations, or storytelling.</p>
</li>
</ul>
<hr />
<h3 id="heading-quick-strength-table">Quick Strength Table</h3>
<div class="hn-table">
<table>
<thead>
<tr>
<td><strong>Technique</strong></td><td><strong>Strength / Best Use Case</strong></td></tr>
</thead>
<tbody>
<tr>
<td>Zero-Shot</td><td>Quick, general instructions.</td></tr>
<tr>
<td>Instruction</td><td>Clear guidance without examples.</td></tr>
<tr>
<td>Few-Shot / In-Context / K-Shot</td><td>Teaching patterns or domain-specific behavior.</td></tr>
<tr>
<td>Chain-of-Thought (CoT)</td><td>Step-by-step reasoning.</td></tr>
<tr>
<td>Step-Back</td><td>Big-picture reasoning.</td></tr>
<tr>
<td>Least-to-Most</td><td>Decomposing complex problems.</td></tr>
<tr>
<td>Tree-of-Thought</td><td>Exploring multiple reasoning paths simultaneously.</td></tr>
<tr>
<td>Prompt Chaining</td><td>Sequential multi-step workflows.</td></tr>
<tr>
<td>Role-Playing</td><td>Adopts tone/persona/expertise.</td></tr>
<tr>
<td>Long-Form / Detailed</td><td>Rich, structured outputs.</td></tr>
</tbody>
</table>
</div><p>Using these techniques is like choosing the right painting tool for the job.</p>
<ul>
<li><p>If you’re painting a small table, a brush is perfect.</p>
</li>
<li><p>If you’re painting part of a wall, a roller works best.</p>
</li>
<li><p>But if you’re painting an entire house, a sprayer is the fastest and most effective.</p>
</li>
</ul>
<p>Prompting works the same way, the right technique makes the task easier, faster, and produces a better result.</p>
<p>I would love to hear what technique you use the most and which one you are going to start trying out in the comments.</p>
]]></content:encoded></item><item><title><![CDATA[Why This is Better Than Traditional Databases]]></title><description><![CDATA[Introduction
Applications have used traditional databases for a long time with evolutions including NoSQL and big data but are less applicable in today’s modern applications. Traditional databases are monolithic and require human-computer interaction...]]></description><link>https://blog.kamaljotsingh.com/why-this-is-better-than-traditional-databases</link><guid isPermaLink="true">https://blog.kamaljotsingh.com/why-this-is-better-than-traditional-databases</guid><category><![CDATA[kafka]]></category><category><![CDATA[distributed system]]></category><category><![CDATA[events]]></category><category><![CDATA[Databases]]></category><category><![CDATA[data]]></category><dc:creator><![CDATA[Kamaljot Singh]]></dc:creator><pubDate>Tue, 08 Feb 2022 01:15:46 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1644281548715/N-xPXFiKM.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h1 id="heading-introduction">Introduction</h1>
<p>Applications have used traditional databases for a long time with evolutions including NoSQL and big data but are less applicable in today’s modern applications. Traditional databases are monolithic and require human-computer interaction where the database sits passively unless triggered by a query. Modern applications are entirely automated and streamlined following an event streaming process where the data is active and is triggered by events creating a chain of processes fulfilling a business need.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644281752192/T53dclcfn.png" alt="Picture1.png" />
In 2010 LinkedIn developed Kafka, an open-source distributed event streaming platform that captures data in real-time from databases, sensors, mobile devices, and cloud services for manipulating, processing, reacting to event streams, and routing for a continuous flow of data.
Currently, multiple companies are using Kafka including Uber, Netflix, and Slack to fulfill their business needs. </p>
<h1 id="heading-what-are-the-uses-of-kafka">What are the uses of Kafka</h1>
<p>Kafka’s main uses are to read, write, store, and process streams of events reliably for as long as you want and as they occur. A few great benefits include speed, fault tolerance via backup servers and scalability due to data being spread across partitions. Some real-world examples include monitoring vehicles, routing, and processing payments at Uber, Lyft, and Airbnb. Other applications of event streaming include collecting and immediately reacting to customer interactions and orders in the retail, hotel, and travel industries. Kafka can be deployed on virtual machines, containers, the cloud and even hardware making it versatile and elastic.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644281807652/Sx83i4bmM.png" alt="Picture1.png" /></p>
<h1 id="heading-how-does-kafka-work">How does Kafka work</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644281871181/z3ZL-tSRa.png" alt="Picture1.png" />
Kafka is an exceptional microservices tool that works via a distributed system of multiple components spread across multiple computers on a network using server and client communication over TCP. It runs on sets of connected computers (clusters) of several servers through multiple datacenters or cloud regions. Each of these clusters have at least 3 brokers that are simply a Kafka server and runs an instance of the Kafka application that acts as an intermediary between applications sending messages (data) and applications receiving messages leaving no direct communication between sender and receiver.</p>
<h1 id="heading-producers">Producers</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644281971707/tM-ETXZGr.png" alt="Picture4.png" />
The producer is an application that sends messages to a broker. These messages are sent in batches to increase efficiency in reducing the number of unnecessary networks and are serialized before it is sent.</p>
<h1 id="heading-consumers">Consumers</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644282012650/TqBPRa0EX.jpeg" alt="Picture5.jpg" />
The consumer receives messages from the broker. It does not communicate with the producer directly. Similar to how the producer must serialize messages before sending it, the consumer must deserialize the messages. Consumers can consume multiple topics at once and can also split a topic into multiple partitions where multiple consumers work together to each read from a single partition.</p>
<h1 id="heading-what-is-avro">What is Avro</h1>
<p>Avro helps serialize the data before sending it to the brokers. In Kafka, Avro can create a schema from a Java class and helps with the data exchange between programming languages, systems, and processing frameworks. This is useful since Avro provides direct mapping to and from JSON, is fast, compact, and is accompanied by a schema.</p>
<h1 id="heading-learn-more">Learn more</h1>
<p>This article has just given a very brief introduction to a higher level understanding of Kafka. To learn more, visit <a target="_blank" href="https://kafka.apache.org/documentation/">the official Kafka documentation.</a></p>
]]></content:encoded></item><item><title><![CDATA[3rd Best Feature of ES6]]></title><description><![CDATA[Introduction
Javascript is a language that was developed in only 10 days. Yes, the creator Brendan Eich developed it in less than two weeks and states "It was also an incredible rush job, so there were mistakes in it - and there would be gaps". Fortu...]]></description><link>https://blog.kamaljotsingh.com/3rd-best-feature-of-es6</link><guid isPermaLink="true">https://blog.kamaljotsingh.com/3rd-best-feature-of-es6</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[ES6]]></category><dc:creator><![CDATA[Kamaljot Singh]]></dc:creator><pubDate>Fri, 22 Oct 2021 06:20:24 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1634859857042/utISGiu7g.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h1 id="introduction">Introduction</h1>
<p>Javascript is a language that was developed in only 10 days. Yes, the creator Brendan Eich developed it in less than two weeks and states "It was also an incredible rush job, so there were mistakes in it - and there would be gaps". Fortunately, Javascript has been standardized via ECMAScript which built numerous core features on top of the original Javascript. ES2015 or ES6 was a huge leap in the language that brought many changes and made the language better. One of the exciting features is <em>template literals</em>.</p>
<h1 id="why-template-literals">Why Template Literals</h1>
<p>Unlike using double or single quotes to express string characters, template literals use backticks <strong>(`) </strong>and can do much more than what <code>"</code> or <code>'</code> offer. Template literals give access to do multi-line strings, interpolate expressions, and use tagged templates. They make writing code much neater and understandable compared to using only strings in simple to complex applications.</p>
<h1 id="dealing-with-multi-line-strings">Dealing With Multi-line Strings</h1>
<p>Before template literals, having multi-line strings was accomplished by <code>\n</code>. This method works well with small stings but is not as clean and readable compared to using template literals.</p>
<p>Without template literals:</p>
<pre><code><span class="hljs-selector-tag">console</span><span class="hljs-selector-class">.log</span>(<span class="hljs-string">"JS History:\n"</span> + <span class="hljs-string">"Javascript was originally named \"</span>Mocha\<span class="hljs-string">""</span>);
<span class="hljs-comment">//JS History:</span>
<span class="hljs-comment">//Javascript was originally named "Mocha"</span>
</code></pre><p>With template literals:</p>
<pre><code><span class="hljs-selector-tag">console</span><span class="hljs-selector-class">.log</span>(<span class="hljs-built_in">`JS History:
Javascript was originally named "Mocha"`</span>);
<span class="hljs-comment">//JS History:</span>
<span class="hljs-comment">//Javascript was originally named "Mocha"</span>
</code></pre><p>With these two different methods of doing the same task, it is easy to understand how template literals simplify things. It eliminates the use of including <code>\n</code> to create a new line and enables you easily input double quotes and is displayed just as you wrote it. </p>
<h1 id="include-expressions">Include Expressions</h1>
<p>Using the <code>${}</code> inside the <strong>(``)</strong> gives access to expressing variables, objects, strings, or even mathematical operations with other values.</p>
<pre><code><span class="hljs-keyword">let</span> language = <span class="hljs-string">"Javascript"</span>;
<span class="hljs-keyword">let</span> year = <span class="hljs-number">1995</span>;
<span class="hljs-keyword">let</span> currentYear = <span class="hljs-number">2021</span>;
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${language}</span> was created in <span class="hljs-subst">${year}</span>. 
It has been in use for <span class="hljs-subst">${currentYear - year}</span> years`</span>);
<span class="hljs-comment">//Javascript was created in 1995. </span>
<span class="hljs-comment">//It has been in use for 26 years</span>
</code></pre><h1 id="creating-tagged-templates">Creating Tagged Templates</h1>
<p>If you like the usability of template literals, you will be interested in an advanced form of it using tagged templates. Tagged templates give access to parse literals with a function. Tagged templates consist of two parts, one being the strings and the other, the variables being passed on. These two parts can also be referred as static content and dynamic content respectively.</p>
<p>For example:</p>
<pre><code><span class="hljs-keyword">let</span> person = <span class="hljs-string">"Kamaljot"</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">displayGreeting</span>(<span class="hljs-params">strings, name</span>)</span>{
  <span class="hljs-built_in">console</span>.log(strings);
  <span class="hljs-built_in">console</span>.log(name);
}
displayGreeting<span class="hljs-string">`Hello <span class="hljs-subst">${person}</span>, it was nice meeting you`</span>;
<span class="hljs-comment">//['Hello ', ', it was nice meeting you']</span>
<span class="hljs-comment">//Kamaljot</span>
</code></pre><p>Here we notice that the first parameter puts all the strings or static content into a single array and holds the variable or dynamic content separate. Although the dynamic content of the name variable is not in the strings array, it is represented as an empty string.</p>
<p>You can also include more than one dynamic content by using the spread operator <code>...</code> which allows arrays and can expand them into their individual elements.</p>
<pre><code><span class="hljs-keyword">let</span> guest1 = <span class="hljs-string">"Kamaljot"</span>;
<span class="hljs-keyword">let</span> guest2 = <span class="hljs-string">"Simran"</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">displayGreeting</span>(<span class="hljs-params">strings, ...guests</span>)</span>{
  <span class="hljs-built_in">console</span>.log(strings);
  <span class="hljs-built_in">console</span>.log(guests);
}
displayGreeting<span class="hljs-string">`Hello <span class="hljs-subst">${guest1}</span> and <span class="hljs-subst">${guest2}</span>, welcome to the event`</span>;
<span class="hljs-comment">//['Hello ', ' and ', ', welcome to the event']</span>
<span class="hljs-comment">//['Kamaljot', 'Simran']</span>
</code></pre><p>Looking closer at our output, we see that our function takes two arguments and holds the static and dynamic content separately. The <em>strings </em>array holds all the static content consisting of strings while the <em>names </em>array holds all the dynamic content also referred to as tags.</p>
<p>To make tagged templates useful and not just output two separate arrays, we can manipulate the arguments being passed and output information in the order we desire.</p>
<pre><code><span class="hljs-keyword">let</span> guest1= <span class="hljs-string">"Kamaljot"</span>;
<span class="hljs-keyword">let</span> guest2= <span class="hljs-string">"Simran"</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">displayGreeting</span>(<span class="hljs-params">strings, ...guests</span>)</span>{
  <span class="hljs-keyword">let</span> message = strings[<span class="hljs-number">0</span>];
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;guests.length; i++){
    message += guests[i] +strings[i+<span class="hljs-number">1</span>];
  }  
<span class="hljs-built_in">console</span>.log(message);
}
displayGreeting<span class="hljs-string">`Hello <span class="hljs-subst">${guest1}</span> and <span class="hljs-subst">${guest2}</span>, welcome to the event`</span>;
<span class="hljs-comment">//Hello Kamaljot and Simran, welcome to the event</span>
</code></pre><h1 id="conclusion">Conclusion</h1>
<p>Template literals is a powerful tool that I believe many of us can implement in our code to make it more readable and concise. The topics I have mentioned here are giving a brief introduction to some of the capabilities of template literals. Tagged templates are unique and give programmers another technique to transform content. Feel free to share your knowledge on template literals and whether you use them or not in the comment section.</p>
]]></content:encoded></item><item><title><![CDATA[Traverse the DOM like a Pro]]></title><description><![CDATA[Intro
The Document Object Model (DOM) is how you manipulate HTML elements of a webpage using a language like Javascript. The DOM works by treating the webpage as a tree-like structure where every HTML tag is an object and gives you access to navigate...]]></description><link>https://blog.kamaljotsingh.com/traverse-the-dom-like-a-pro</link><guid isPermaLink="true">https://blog.kamaljotsingh.com/traverse-the-dom-like-a-pro</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[DOM]]></category><category><![CDATA[Web Development]]></category><dc:creator><![CDATA[Kamaljot Singh]]></dc:creator><pubDate>Sun, 17 Oct 2021 02:10:25 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1634434914952/yTuD8iHPL.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h1 id="intro">Intro</h1>
<p>The Document Object Model (DOM) is how you manipulate HTML elements of a webpage using a language like Javascript. The DOM works by treating the webpage as a tree-like structure where every HTML tag is an object and gives you access to navigate, create, alter or delete the content of HTML elements, attributes, and CSS styles. </p>
<p>Here is a visual representation of the objects of a DOM tree from W3Schools:</p>
<center><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1634419087343/2CvQ3tXt0.gif" alt="DOM.gif" /></center>

<p>In the representation above, the structure is a collection of nodes where they have a
root -&gt; parent -&gt;child -&gt; sibling relationship. The <code>&lt;html&gt;</code> is the root where all other elements are descendants.</p>
<h1 id="traversing">Traversing</h1>
<p>Finding, selecting, or traversing elements are managed by creating a reference point to a specific node where you can then move downward, upward, and sideways.</p>
<h3 id="get-element-by-id">Get Element By ID</h3>
<p>The most common way is to select an <code>id</code> that is always unique and only returns a single element.</p>
<p>HTML snippet:</p>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"blog-title"</span>&gt;</span>Traverse the DOM like a PRO<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
</code></pre><p>Javascript snippet:</p>
<pre><code><span class="hljs-keyword">const</span> blogTitle = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"blog-title"</span>);
<span class="hljs-built_in">console</span>.log(blogTitle.textContent);
<span class="hljs-comment">// Traverse the DOM like a PRO</span>
</code></pre><h3 id="get-elements-by-classname">Get Elements by ClassName</h3>
<p>This returns a collection of objects since more than one element can have the same class name. </p>
<p>HTML snippet:</p>
<pre><code>...
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</code></pre><p>Javascript snippet:</p>
<pre><code><span class="hljs-keyword">const</span> items = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">"item"</span>);
<span class="hljs-keyword">for</span> (item <span class="hljs-keyword">of</span> items) {
    <span class="hljs-built_in">console</span>.log(item.textContent);
}
<span class="hljs-comment">// Item 1</span>
<span class="hljs-comment">// Item 2</span>
<span class="hljs-comment">// Item 3</span>
</code></pre><blockquote>
<p>Note: getElementsByClassName does not behave like real arrays. It may not have methods like forEach, slice, some, map and must include Array.from(element) to turn into an array including those properties.</p>
</blockquote>
<h3 id="query-selector">Query Selector</h3>
<p>This is my favorite way and allows you to select either an <code>id</code> or the very first <code>class</code> of the specific class name. Defining the id or class name uses a similar syntax in which you would use in your CSS file.</p>
<p>Javascript snippet:</p>
<pre><code><span class="hljs-keyword">const</span> blogTitle = <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">"#blog-title"</span>);
<span class="hljs-keyword">const</span> firstItem = <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">".item"</span>);
console.log(blogTitle.textContent);
console.log(firstItem.textContent);
<span class="hljs-comment">// Traverse the DOM like a PRO</span>
<span class="hljs-comment">// Item 1</span>
</code></pre><h3 id="query-selector-all">Query Selector All</h3>
<p>If you need to modify more than one element of a particular selector, this is an alternative method and my preferred method.</p>
<p>Javascript snippet:</p>
<pre><code><span class="hljs-keyword">const</span> items = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">".item"</span>);
items.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">element</span>)</span>{
    <span class="hljs-built_in">console</span>.log(element.textContent);
})
<span class="hljs-comment">// Item 1</span>
<span class="hljs-comment">// Item 2</span>
<span class="hljs-comment">// Item 3</span>
</code></pre><h3 id="selecting-children">Selecting Children</h3>
<p>Traversing <em>down </em>or selecting the children of a node can be accomplished by the <code>children</code> method.</p>
<pre><code><span class="hljs-keyword">const</span> <span class="hljs-built_in">parent</span> = document.querySelector(<span class="hljs-string">".parent"</span>);
<span class="hljs-keyword">const</span> firstChild= <span class="hljs-built_in">parent</span>.children;
</code></pre><p>Selecting the first child or last child is also possible by <code>firstChild</code> and <code>lastChild</code> methods respectively.</p>
<h3 id="selecting-parents">Selecting Parents</h3>
<p>Traversing <em>up </em>or selecting the parents of a node can be accomplished by the <code>parentElement</code> method.</p>
<pre><code><span class="hljs-keyword">const</span> firstChild = <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">".firstChild"</span>);
<span class="hljs-keyword">const</span> parent = firstChild.parentElement;
</code></pre><p>One thing to note is that the <code>parentElement</code> method only allows you to move up one parent at a time. You can not skip a parent.</p>
<p>A way to resolve this is by using the <code>closest</code> method where we can find any specific parent element.</p>
<pre><code><span class="hljs-attr">grandparent</span> = child.closest(<span class="hljs-string">".grandparent"</span>)
</code></pre><h3 id="selecting-sibling-elements">Selecting Sibling Elements</h3>
<p>If you would like to traverse a sibling of an element, you can use <code>nextElementSibling</code> to move <em>forward </em>to the next sibling.</p>
<pre><code><span class="hljs-keyword">const</span> secondChild = firstChild.nextElementSibling;
</code></pre><p>If you want to move to a previous sibling and move <em>backward</em>, use <code>previousElementSibling</code></p>
<pre><code><span class="hljs-keyword">const</span> firstChild = secondChild.previousElementSibling
</code></pre><h1 id="conclusion">Conclusion</h1>
<p>By describing multiple ways to traverse, you should now be comfortable selecting any element in a webpage. Although <code>querySelector</code> may be a simple way to find any element, some web pages may be extremely large and it may be better to use the sibling options instead to increase performance. Although we went over many options, there are countless more options available in traversing. To find more information, visit the  <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">MDN DOM Documentation</a>.</p>
]]></content:encoded></item></channel></rss>