<?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" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Safaldas G]]></title><description><![CDATA[Software Engineer]]></description><link>https://safaldas.in/</link><image><url>https://safaldas.in/favicon.png</url><title>Safaldas G</title><link>https://safaldas.in/</link></image><generator>Ghost 4.4</generator><lastBuildDate>Wed, 01 Apr 2026 18:14:44 GMT</lastBuildDate><atom:link href="https://safaldas.in/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Frontend Developers Pain : Safari and IOS]]></title><description><![CDATA[<p>This will be a collection of my hatred</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://stackoverflow.com/questions/20696041/window-openurl-blank-not-working-on-imac-safari"><div class="kg-bookmark-content"><div class="kg-bookmark-title">window.open(url, &#x2018;_blank&#x2019;); not working on iMac/Safari</div><div class="kg-bookmark-description">I&#x2019;ve build a web page that let&#x2019;s you select a page name from a drop down list and then transfers the browser to that page. The code</div></div></a></figure>]]></description><link>https://safaldas.in/frontend-developers-pain-safari-and-ios/</link><guid isPermaLink="false">6804855b5fa847039dd723f3</guid><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Sun, 20 Apr 2025 05:39:32 GMT</pubDate><content:encoded><![CDATA[<p>This will be a collection of my hatred</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://stackoverflow.com/questions/20696041/window-openurl-blank-not-working-on-imac-safari"><div class="kg-bookmark-content"><div class="kg-bookmark-title">window.open(url, &#x2018;_blank&#x2019;); not working on iMac/Safari</div><div class="kg-bookmark-description">I&#x2019;ve build a web page that let&#x2019;s you select a page name from a drop down list and then transfers the browser to that page. The code that does the transfer isif (url){ window.open(url, &#x2019;_blank...</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"><span class="kg-bookmark-author">Stack Overflow</span><span class="kg-bookmark-publisher">Steve</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"></div></a></figure><ol><li>Safari is blocking any call to window.open() which is made inside an async call.</li></ol><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://stackoverflow.com/questions/26929297/html-5-input-type-date-control-max-date-is-not-working-in-iphone-ipad"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Html 5 [input type=Date] control, MAX date is not working in iPhone/Ipad</div><div class="kg-bookmark-description">Greetings. Working with html date input control. input type=&#x201C;date&#x201D; max=&#x201C;2014-13-11&#x2033; In chrome its recognizing &#x2019;max&#x2019;attribute hence restricting and disabling all future date But, the same is not</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"><span class="kg-bookmark-author">Stack Overflow</span><span class="kg-bookmark-publisher">karthik</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"></div></a></figure><p>2. Safari on iOS does not support the attributes <code>max</code> and <code>min</code> for <code>input=&quot;date&quot;</code>.</p><p></p><p>3. <a href="https://stackoverflow.com/questions/4310953/invalid-date-in-safari">https://stackoverflow.com/questions/4310953/invalid-date-in-safari</a></p><p>date formatting requires <code>date-fns</code> <br></p>]]></content:encoded></item><item><title><![CDATA[Nextjs app in Azure appservice no-space error]]></title><description><![CDATA[<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://safaldas.in/content/images/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png" class="kg-image" alt loading="lazy" width="1594" height="386" srcset="https://safaldas.in/content/images/size/w600/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png 600w, https://safaldas.in/content/images/size/w1000/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png 1000w, https://safaldas.in/content/images/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png 1594w" sizes="(min-width: 720px) 720px"><figcaption>deployment failure in github pipeline</figcaption></figure><p>This is in nextjs 14.2</p><p>A very cool nextjs app that has millions of pages(dynamic) I created for a business ran into issue with azure appservice saying no space to deploy also the server logs were also saying no space to keep the</p>]]></description><link>https://safaldas.in/nextjs-app-in-azure-appservice-no-space-error/</link><guid isPermaLink="false">67dc682f5fa847039dd723a9</guid><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Sat, 22 Mar 2025 06:56:58 GMT</pubDate><content:encoded><![CDATA[<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://safaldas.in/content/images/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png" class="kg-image" alt loading="lazy" width="1594" height="386" srcset="https://safaldas.in/content/images/size/w600/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png 600w, https://safaldas.in/content/images/size/w1000/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png 1000w, https://safaldas.in/content/images/2025/03/Screenshot-2025-03-20-at-8.00.09-PM-1.png 1594w" sizes="(min-width: 720px) 720px"><figcaption>deployment failure in github pipeline</figcaption></figure><p>This is in nextjs 14.2</p><p>A very cool nextjs app that has millions of pages(dynamic) I created for a business ran into issue with azure appservice saying no space to deploy also the server logs were also saying no space to keep the image and fetch caches</p><p>Several blogs and discussions on the web points to a single reason and solution that the temp storage is filled and we need to restart the server. I did that and did not work for me.</p><p>Then looking into the actual quota usage of the appservice plan I see that 99.9% of the disc is full. Thats a surprise because 250GB is not a small drive.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://safaldas.in/content/images/2025/03/Screenshot-2025-03-21-at-12.39.51-AM.png" class="kg-image" alt loading="lazy" width="1696" height="1310" srcset="https://safaldas.in/content/images/size/w600/2025/03/Screenshot-2025-03-21-at-12.39.51-AM.png 600w, https://safaldas.in/content/images/size/w1000/2025/03/Screenshot-2025-03-21-at-12.39.51-AM.png 1000w, https://safaldas.in/content/images/size/w1600/2025/03/Screenshot-2025-03-21-at-12.39.51-AM.png 1600w, https://safaldas.in/content/images/2025/03/Screenshot-2025-03-21-at-12.39.51-AM.png 1696w" sizes="(min-width: 720px) 720px"><figcaption>Quota usage</figcaption></figure><p>The reason is the fetch cache itself. All the request from crawlers are creating lots of fetch cache documents. The ls command did not even finish to show any info. not the` du -sh` could help. The old cache will not be cleared by nextjs in 14.2</p><p>Finally the option is to disable cache and manually remove allowing more space for deployments.</p><p></p><p>In Nextjs 15 there is a solution to this which at the time of writing this is in experimental. <a href="https://nextjs.org/docs/app/api-reference/functions/cacheLife">https://nextjs.org/docs/app/api-reference/functions/cacheLife</a>. This allows us to set an expire time. But will it remove the files? I havent upgraded the project or done any testing yet. Will do that and update here later</p>]]></content:encoded></item><item><title><![CDATA[1. Create a smiley in shader toy]]></title><description><![CDATA[<p>This is the first step in to create a circle function and utilise that to create a shape</p><figure class="kg-card kg-embed-card"><iframe width="200" height="150" src="https://www.youtube.com/embed/GgGBR4z8C9o?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="ShaderToy Tutorial Part 2 - Building stuff with circles"></iframe></figure><p><a href="https://www.shadertoy.com/view/wcjXzt">private link to shadertoy</a></p><p></p><figure class="kg-card kg-image-card"><img src="https://safaldas.in/content/images/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png" class="kg-image" alt loading="lazy" width="2000" height="993" srcset="https://safaldas.in/content/images/size/w600/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 600w, https://safaldas.in/content/images/size/w1000/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 1000w, https://safaldas.in/content/images/size/w1600/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 1600w, https://safaldas.in/content/images/size/w2400/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 2400w" sizes="(min-width: 720px) 720px"></figure><pre><code class="language-glsl">float Circle(vec2 uv, vec2 c, float r, float blur){
   float d = length(uv - c);
   // need to smoothstep
   float color = smoothstep(r,r-blur,d);
   return color;
}

void</code></pre>]]></description><link>https://safaldas.in/1-create-a-smiley-in-shader-toy/</link><guid isPermaLink="false">67d98d5d5fa847039dd72372</guid><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 18 Mar 2025 15:21:20 GMT</pubDate><content:encoded><![CDATA[<p>This is the first step in to create a circle function and utilise that to create a shape</p><figure class="kg-card kg-embed-card"><iframe width="200" height="150" src="https://www.youtube.com/embed/GgGBR4z8C9o?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="ShaderToy Tutorial Part 2 - Building stuff with circles"></iframe></figure><p><a href="https://www.shadertoy.com/view/wcjXzt">private link to shadertoy</a></p><p></p><figure class="kg-card kg-image-card"><img src="https://safaldas.in/content/images/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png" class="kg-image" alt loading="lazy" width="2000" height="993" srcset="https://safaldas.in/content/images/size/w600/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 600w, https://safaldas.in/content/images/size/w1000/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 1000w, https://safaldas.in/content/images/size/w1600/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 1600w, https://safaldas.in/content/images/size/w2400/2025/03/Screenshot-2025-03-18-at-8.44.31-PM.png 2400w" sizes="(min-width: 720px) 720px"></figure><pre><code class="language-glsl">float Circle(vec2 uv, vec2 c, float r, float blur){
   float d = length(uv - c);
   // need to smoothstep
   float color = smoothstep(r,r-blur,d);
   return color;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv = uv-0.5;// remapping to center
    // we need x value to be based aspect ratio corrected
    uv.x*= iResolution.x/iResolution.y;
 
    vec3 col = vec3(0.);
     
    float face = Circle(uv, vec2(0.), 0.4, 0.01);
    
    col +=face;
    
    float lEye = Circle(uv, vec2(-0.18,0.1), .1, .01);
    face -= lEye;

    float rEye = Circle(uv, vec2(0.18,0.1), .1, .01);
    face -= rEye;
    
    float mouth = Circle(uv, vec2(0.,0.), .3, .01);
    mouth -= Circle(uv, vec2(0.,0.09), .31, .01);
    
    face -= mouth;
    
    col = vec3(1.,1.,0)*face;
    
   fragColor = vec4(col,1.);
}</code></pre><p></p><h3 id="learnings">Learnings </h3><ol><li>Normalising the pixel coordinates to 0-1 so as to work uniformly on all screens</li><li>remapping the coordinate system from left bottom to center by subtracting 0.5</li><li>x axis aspect ratio correction by multiplying with aspect ratio</li><li>Creating a circle. need to learn aout SDFs</li><li>its all about adding and subtracting. </li><li>its hard</li></ol>]]></content:encoded></item><item><title><![CDATA[How to throw 404 Not Found Error along with 404 status code in NextJS 13 App Router from page.jsx?]]></title><description><![CDATA[In nextjs how to send status 404 error for a dynamic page but its sending 200 when doing postman or google crawler]]></description><link>https://safaldas.in/how-to-send-404-status-in-next-js-13-approuter-from-pagetsx/</link><guid isPermaLink="false">6774e30a5fa847039dd7234e</guid><category><![CDATA[nextjs]]></category><category><![CDATA[approuter]]></category><category><![CDATA[404status]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Fri, 03 Jan 2025 11:06:54 GMT</pubDate><content:encoded><![CDATA[<p>The working approach is this comment <a href="https://github.com/vercel/next.js/issues/62228#issuecomment-2543853135" rel="nofollow noreferrer">https://github.com/vercel/next.js/issues/62228#issuecomment-2543853135</a></p><p>We should handle this in the middleware. The reason being we cannot modify the request headers to set 404 status in the page.tsx. it will throw error.</p><ol><li>Add a middleware.ts file in the same level as your app directory</li><li>Do async fetch call to your api to resolve the data.</li><li>then conditionally you can have 2 options</li><li>a. Stay in the same page and render the not_found content.</li></ol><pre><code>    if (!nodata) {
      return NextResponse.rewrite(request.nextUrl.origin + &apos;/404&apos;, {
        status: 404,
      });
    }
</code></pre><ol><li>b. Redirect to your 404 page. For that create a file <code>app/404/page.tsx</code> and add <code>return notFound()</code>. Then update the middleware with</li></ol><pre><code>    if (!nodata) {
      return NextResponse.redirect(request.nextUrl.origin + &apos;/404&apos;);
    }
</code></pre><figure class="kg-card kg-image-card"><img src="https://safaldas.in/content/images/2025/01/image.png" class="kg-image" alt loading="lazy" width="1033" height="642" srcset="https://safaldas.in/content/images/size/w600/2025/01/image.png 600w, https://safaldas.in/content/images/size/w1000/2025/01/image.png 1000w, https://safaldas.in/content/images/2025/01/image.png 1033w" sizes="(min-width: 720px) 720px"></figure><figure class="kg-card kg-image-card"><img src="https://safaldas.in/content/images/2025/01/image-1.png" class="kg-image" alt loading="lazy" width="1009" height="1009" srcset="https://safaldas.in/content/images/size/w600/2025/01/image-1.png 600w, https://safaldas.in/content/images/size/w1000/2025/01/image-1.png 1000w, https://safaldas.in/content/images/2025/01/image-1.png 1009w" sizes="(min-width: 720px) 720px"></figure><figure class="kg-card kg-image-card"><img src="https://safaldas.in/content/images/2025/01/image-3.png" class="kg-image" alt loading="lazy" width="890" height="331" srcset="https://safaldas.in/content/images/size/w600/2025/01/image-3.png 600w, https://safaldas.in/content/images/2025/01/image-3.png 890w" sizes="(min-width: 720px) 720px"></figure>]]></content:encoded></item><item><title><![CDATA[Ghost: Unable to determine node version in use by systemd]]></title><description><![CDATA[<p></p><p>Recently this blog went down for a few days. There were several issues.</p><ol><li>mysql update</li></ol><p>Somehow the mysql decided to update and ghost was not able to connect to it. Thats how it started. The fix was <a href="https://abdallah-yashir.medium.com/how-to-solve-mysql-problem-server-upgrade-in-progress-acb00a131e51">https://abdallah-yashir.medium.com/how-to-solve-mysql-problem-server-upgrade-in-progress-acb00a131e51</a></p><p>2. But then again it ghost was not</p>]]></description><link>https://safaldas.in/ghost-updated-automatically/</link><guid isPermaLink="false">66c1774905934f4b9d7633c3</guid><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Sun, 18 Aug 2024 04:37:22 GMT</pubDate><content:encoded><![CDATA[<p></p><p>Recently this blog went down for a few days. There were several issues.</p><ol><li>mysql update</li></ol><p>Somehow the mysql decided to update and ghost was not able to connect to it. Thats how it started. The fix was <a href="https://abdallah-yashir.medium.com/how-to-solve-mysql-problem-server-upgrade-in-progress-acb00a131e51">https://abdallah-yashir.medium.com/how-to-solve-mysql-problem-server-upgrade-in-progress-acb00a131e51</a></p><p>2. But then again it ghost was not able to start because of mismatching node versions. Thats a horrible loop with ghost if u have forgot which node version was at the time of installation.</p><p> - ghost uses the global installation of node that is accessible by systemd. You wont notice if u go with the normal installtion process. But years later when it says to update ghost. You will be asked to update node version or will say the node version is not supported. Now while I am writing this nvm is used to managae multiple versions of node. Funnily enough ghost has problems with nvm. <a href="https://ghost.org/docs/faq/using-nvm/?_ga=2.32288124.334785975.1723905613-390418642.1723612794">https://ghost.org/docs/faq/using-nvm/?_ga=2.32288124.334785975.1723905613-390418642.1723612794</a></p><p>Solution: <a href="https://blog.jonsdocs.org.uk/2019/06/30/problems-with-systemd-ghost-and-node/">https://blog.jonsdocs.org.uk/2019/06/30/problems-with-systemd-ghost-and-node/</a></p><p>In the systemd you can fix the path and start Ghost again.</p><p>If you are able to read this. I had lost hope in setting this back online. The last moment when I thought to start fresh deleting the mysql and ghost. In the last chance the steps fell into place.</p>]]></content:encoded></item><item><title><![CDATA[Git ssh not working. But was working yesterday.]]></title><description><![CDATA[<p>When I tried to take pull it said no access to repo.</p><p>Finally what solved was </p><p><code>ssh-add [your_private_key_name]</code><br>like <br><code>ssh-add id_ed25519</code></p>]]></description><link>https://safaldas.in/git-ssh-not-working-but-was-working-yesterday/</link><guid isPermaLink="false">665d6df43eba480c75c7f48f</guid><category><![CDATA[ssh]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Mon, 03 Jun 2024 07:18:59 GMT</pubDate><content:encoded><![CDATA[<p>When I tried to take pull it said no access to repo.</p><p>Finally what solved was </p><p><code>ssh-add [your_private_key_name]</code><br>like <br><code>ssh-add id_ed25519</code></p>]]></content:encoded></item><item><title><![CDATA[Learn C# with ChatGPT as tutor]]></title><description><![CDATA[I am on a journey to learn c sharp using ChatGPT as my tutor. This will be a many part series which will record my progress]]></description><link>https://safaldas.in/learn-c-sharp-with-chatgpt-as-tutor/</link><guid isPermaLink="false">661e895c3eba480c75c7f3f5</guid><category><![CDATA[c-sharp]]></category><category><![CDATA[learning-with-chatgpt]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 16 Apr 2024 14:35:50 GMT</pubDate><content:encoded><![CDATA[<p>By giving the below prompt we can interactively get started on a Journey</p><blockquote>ChatGPT, take on the roll of a teacher for the following prompt. You will teach whatever language your student chooses, and utilize exercises as a way to teach them. You will explain some overall concepts, and then offer exercises for the user to complete in order to teach. You will stop after offering each exercise to wait for the user to complete it, or ask questions and not move on to the next step until it is completed or the user asks to move forward.Additionally, do not provide the correct answers to the user unless they ask for it. You can provide the answer, if the answer you are providing is just a better version than the user provided. If the user gets an exercise wrong, help them fix it but do NOT give them the corrected code unless asked. When you give the user exercises, you can actually pretend to be a compiler, and &apos;run&apos; the code for them to check their work. Let the user choose the coding language to use as your first question</blockquote><p>It asked and you know we started with C#. </p><p>&#x1F916; : Great choice! C# is a powerful and versatile programming language commonly used for developing a wide range of applications, including desktop, web, and mobile applications.</p><p>Let&apos;s start with some basic concepts in C#.</p><ol><li><strong>Variables and Data Types</strong>: In C#, variables are used to store data. Each variable has a specific data type that determines the kind of data it can hold. Common data types in C# include <code>int</code> for integers, <code>double</code> for floating-point numbers, <code>string</code> for text, <code>bool</code> for Boolean values, and more.</li><li><strong>Control Flow</strong>: Control flow statements allow you to control the execution flow of your program. This includes conditional statements like <code>if</code>, <code>else if</code>, <code>else</code>, and loops such as <code>for</code>, <code>while</code>, and <code>do-while</code>.</li><li><strong>Functions and Methods</strong>: Functions are blocks of code that perform a specific task. In C#, functions are defined using the <code>void</code> keyword followed by the function name and parameters. Methods are functions that are associated with a class.</li></ol><p>Now, let&apos;s dive into some exercises to practice these concepts.</p><p><strong>Exercise 1</strong>: Write a C# program that declares two variables, <code>a</code> and <code>b</code>, and assigns them integer values. Then, swap the values of these variables without using a third variable.</p><p>Take your time to write the code, and let me know when you&apos;re ready to proceed or if you have any questions!</p><p>I gave an answer and it was correct and it gave the complete program</p><pre><code class="language-c#">using System;

class Program
{
    static void Main(string[] args)
    {
        int a = 3;
        int b = 4;
        b = a + b;
        a = b - a;
        b = b - a;

        Console.WriteLine(&quot;a: &quot; + a);
        Console.WriteLine(&quot;b: &quot; + b);
    }
}
</code></pre><p>I was intrigued by this and asked </p><blockquote><em>How is C# compiled. tell me about the &quot;program&quot; &#xA0;and &quot;main&quot;</em></blockquote><p>&#x1F916; : In C#, the code is typically compiled into an intermediate language called Common Intermediate Language (CIL) or Microsoft Intermediate Language (MSIL). This intermediate language is platform-independent and can be executed by the Common Language Runtime (CLR), which is part of the .NET Framework or .NET Core runtime environment.</p><p>Here&apos;s a brief overview of the terms &quot;program&quot; and &quot;Main&quot;:</p><ol><li><strong>Program</strong>: In C#, a program consists of one or more classes that contain code to perform specific tasks. Each C# program must contain at least one class with a <code>Main</code> method, which serves as the entry point for the program.</li></ol><p><strong>Main method</strong>: The <code>Main</code> method is a special method that serves as the entry point for a C# program. When you execute a C# program, the CLR looks for the <code>Main</code> method and starts executing the code from there. The <code>Main</code> method has a specific signature:</p><pre><code class="language-c#">static void Main(string[] args)
{ 
	// Code goes here
}</code></pre><ul><li><code>static</code>: The <code>Main</code> method is declared as static, meaning it belongs to the class itself rather than an instance of the class.</li><li><code>void</code>: The <code>Main</code> method returns void, indicating that it does not return any value.</li><li><code>string[] args</code>: The <code>Main</code> method accepts an array of strings as arguments. These arguments can be passed to the program when it is executed from the command line.</li></ul><p>The <code>Main</code> method typically contains the code that initializes the program, processes input, performs computations, and produces output.</p><p>When you compile a C# program, the compiler generates an executable file (<code>.exe</code> for Windows) or an assembly (<code>.dll</code>) containing the compiled IL code. When you run the compiled program, the CLR loads the IL code and executes it, starting from the <code>Main</code> method.</p><blockquote>Okay that nice. Lets move on</blockquote>]]></content:encoded></item><item><title><![CDATA[Injecting Stars into the DOM with JavaScript]]></title><description><![CDATA[When the button is clicked, the function should inject the specified number of stars into the DOM one at a time with a delay between each injection. The stars should be animated and should create a nice visual effect.]]></description><link>https://safaldas.in/injecting-to-dom-exercise-with-js/</link><guid isPermaLink="false">650c679f3eba480c75c7f30d</guid><category><![CDATA[javascript]]></category><category><![CDATA[dom]]></category><category><![CDATA[exercise]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Thu, 21 Sep 2023 16:22:08 GMT</pubDate><content:encoded><![CDATA[<h2 id="task-description">Task Description</h2><p>Your task is to create a JavaScript function that injects stars into the DOM and add an event listener to a button that calls the function when clicked.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://safaldas.in/content/images/2023/09/inject-stars-demo.gif" class="kg-image" alt loading="lazy" width="600" height="145"><figcaption>Expected output</figcaption></figure><h3 id="requirements">Requirements</h3><ol><li>Create a function called <code>injectStars</code> that takes a number as an argument.</li><li>The function should remove all stars from the DOM before injecting new ones.</li><li>The function should inject the number of stars passed in using a <code>for</code> loop and <code>setTimeout</code> to inject the stars one at a time.</li><li>Each star should be a <code>div</code> element with the classes &quot;star&quot; and &quot;animate-star&quot; and the innerHTML set to a star emoji (&quot;&#x2B50;&quot;).</li><li>The stars should be appended to the <code>body</code> of the document.</li><li>Create an event listener for a button element that calls the <code>injectStars</code> function with the number of stars to inject when clicked.</li><li>The number of stars to inject should be obtained from an input element.</li></ol><h3 id="expected-output">Expected Output</h3><p>When the button is clicked, the function should inject the specified number of stars into the DOM one at a time with a delay between each injection. The stars should be animated and should create a nice visual effect.</p><h3 id="example-code">Example Code</h3><p>Here&apos;s an example of what the code might look like:</p><pre><code class="language-javascript">function injectStars(num) {
  // remove all stars from the DOM
  const stars = document.querySelectorAll(&quot;.star&quot;);
  stars.forEach((star) =&gt; star.remove());

  // inject the number of stars passed in
  // settimeout to inject the stars one at a time
  for (let i = 0; i &lt; num; i++) {
    setTimeout(() =&gt; {
      const star = document.createElement(&quot;div&quot;);
      // add the star class and animate-star class
      star.classList.add(&quot;star&quot;);
      star.classList.add(&quot;animate-star&quot;);

      star.innerHTML = &quot;&#x2B50;&quot;;
      document.body.appendChild(star);
    }, i * 100);
  }
}

// create event listener for the button
const button = document.querySelector(&quot;button&quot;);
// onclick, call the function and pass in the number of stars to inject
button.addEventListener(&quot;click&quot;, () =&gt; {
  const input = document.querySelector(&quot;input&quot;);
  injectStars(input.value);
});</code></pre><p>This code creates a function called <code>injectStars</code> that removes all stars from the DOM and injects new ones using a <code>for</code> loop and <code>setTimeout</code>. It also creates an event listener for a button element that calls the <code>injectStars</code> function with the number of stars to inject when clicked.</p><h3 id="detailed-explanation">Detailed Explanation</h3><p>The first function we encounter is <code>document.querySelectorAll</code>. This function returns a list of all elements in the document that match a specified CSS selector. In this case, the selector is &quot;.star&quot;, which matches all elements with the class &quot;star&quot;. The function is used to remove all stars from the DOM before injecting new ones.</p><p>The next function we see is <code>forEach</code>. This is a method of arrays that calls a provided function once for each element in the array. In this case, the function is an arrow function that calls the <code>remove</code> method on each star element.</p><p>The <code>setTimeout</code> function is used to inject the stars one at a time with a delay between each injection. This creates a nice animation effect. The function takes two arguments: a function to execute and a delay in milliseconds. In this case, the function is an arrow function that creates a new <code>div</code> element and adds the classes &quot;star&quot; and &quot;animate-star&quot; to it. It then sets the <code>innerHTML</code> of the element to a star emoji (&quot;&#x2B50;&quot;) and appends the element to the <code>body</code> of the document.</p><p>To use this function, you can create an event listener for a button or other element and call the function when the event is triggered. For example:</p><pre><code>const button = document.querySelector(&quot;button&quot;);
button.addEventListener(&quot;click&quot;, () =&gt; {
  const input = document.querySelector(&quot;input&quot;);
  const numStars = parseInt(input.value);
  injectStars(numStars);
});</code></pre><p>In this example, we select a button element and add an event listener for the &quot;click&quot; event. When the button is clicked, we select an input element and get its value as a number. We then call the <code>injectStars</code> function with the number of stars to inject.</p><p>And that&apos;s it! With just a few lines of JavaScript, you can inject stars into the DOM.</p><p>Hope you learned something out of this. Happy Coding.</p>]]></content:encoded></item><item><title><![CDATA[Part 3: Building a Simple Calculator App (Continued)]]></title><description><![CDATA[<p>Welcome back to the third and final part of our tutorial on building a simple calculator application! In this installment, we&apos;ll wrap up the development of our calculator by adding the final features and enhancements. If you missed the previous parts, you can catch up on <em><a href="https://safaldas.in/building-a-simple-calculator-app-a-step-by-step-guide/">Part 1</a></em></p>]]></description><link>https://safaldas.in/part-3-building-a-simple-calculator-app-continued/</link><guid isPermaLink="false">64e4cd9a3eba480c75c7f2d3</guid><category><![CDATA[calculator app]]></category><category><![CDATA[javascript]]></category><category><![CDATA[learning js]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 15:04:16 GMT</pubDate><content:encoded><![CDATA[<p>Welcome back to the third and final part of our tutorial on building a simple calculator application! In this installment, we&apos;ll wrap up the development of our calculator by adding the final features and enhancements. If you missed the previous parts, you can catch up on <em><a href="https://safaldas.in/building-a-simple-calculator-app-a-step-by-step-guide/">Part 1</a> </em>and <a href="https://safaldas.in/part-2-building-a-simple-calculator-app-continued/">Part 2</a>.</p><h3 id="task-11-handling-keyboard-shortcuts">Task 11: Handling Keyboard Shortcuts</h3><p>Let&apos;s provide users with keyboard shortcuts for common calculator functions:</p><pre><code>document.addEventListener(&apos;keydown&apos;, event =&gt; {
  const key = event.key;
  const allowedKeys = [&apos;0&apos;, &apos;1&apos;, &apos;2&apos;, &apos;3&apos;, &apos;4&apos;, &apos;5&apos;, &apos;6&apos;, &apos;7&apos;, &apos;8&apos;, &apos;9&apos;, &apos;+&apos;, &apos;-&apos;, &apos;*&apos;, &apos;/&apos;, &apos;.&apos;, &apos;=&apos;, &apos;Enter&apos;, &apos;Backspace&apos;, &apos;Escape&apos;];

  if (allowedKeys.includes(key)) {
    event.preventDefault();
    const button = document.querySelector(`.button:contains(&apos;${key}&apos;)`);
    if (button) button.click();
  }
});
</code></pre><h3 id="task-12-limiting-decimal-places">Task 12: Limiting Decimal Places</h3><p>Prevent results from displaying excessive decimal places</p><pre><code>// Inside the button event listener for equals button
} else if (button.classList.contains(&apos;equals&apos;)) {
  try {
    currentInput = eval(currentInput).toFixed(2).toString();
    display.textContent = currentInput;
  } catch (error) {
    display.textContent = &apos;Error&apos;;
  }
}
</code></pre><h3 id="task-13-styling-improvements">Task 13: Styling Improvements</h3><p>Make the calculator look more visually appealing by updating the CSS</p><pre><code>/* Add styling to the buttons */
.button {
  width: 50px;
  height: 50px;
  font-size: 18px;
  border: none;
  background-color: #e0e0e0;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #d0d0d0;
}

/* Style the display area */
.display {
  width: 100%;
  height: 60px;
  font-size: 24px;
  text-align: right;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</code></pre><h3 id="task-14-responsiveness">Task 14: Responsiveness</h3><p>Make the calculator responsive by adjusting its layout for different screen sizes</p><pre><code>/* Adjust layout for smaller screens */
.calculator {
  max-width: 300px;
  margin: 0 auto;
}
</code></pre><h3 id="task-15-final-touches">Task 15: Final Touches</h3><p>Congratulations, you&apos;ve completed your simple calculator app! You&apos;ve learned how to manipulate the DOM, handle user inputs, and create basic arithmetic operations. You can further enhance this project by adding scientific functions, unit conversions, or even a history feature.</p><h3 id="conclusion">Conclusion</h3><p>Building this calculator app was a fantastic way to learn about HTML, CSS, and JavaScript. You&apos;ve gained valuable experience in working with the DOM, event handling, and basic scripting. As you continue your journey in web development, don&apos;t hesitate to take on more complex projects and explore new technologies. Keep practicing, and you&apos;ll become a proficient web developer in no time!</p><hr><p>Thank you for following along with our tutorial on building a simple calculator app. I hope you enjoyed the journey and gained insights into web development concepts. If you have any questions or would like to share your experience, feel free to leave a comment below. Stay tuned for more tutorials and resources to help you on your coding adventure!</p><p><em>Did you miss the previous parts? Catch up on <a href="https://safaldas.in/building-a-simple-calculator-app-a-step-by-step-guide/">Part 1</a> and <a href="https://safaldas.in/part-2-building-a-simple-calculator-app-continued/">Part 2</a>.</em></p>]]></content:encoded></item><item><title><![CDATA[Part 2: Building a Simple Calculator App (Continued)]]></title><description><![CDATA[<p>Welcome back to the second part of our tutorial on building a simple calculator application! In this installment, we&apos;ll dive deeper into the functionality of our calculator and cover tasks 5 through 17. If you missed the first part, make sure to check it out <a href="https://safaldas.in/building-a-simple-calculator-app-a-step-by-step-guide/">here</a>.</p><h3 id="task-5-handling-operator-inputs">Task 5:</h3>]]></description><link>https://safaldas.in/part-2-building-a-simple-calculator-app-continued/</link><guid isPermaLink="false">64e4ccef3eba480c75c7f2bb</guid><category><![CDATA[calculator app]]></category><category><![CDATA[learning js]]></category><category><![CDATA[javascript]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 15:00:24 GMT</pubDate><content:encoded><![CDATA[<p>Welcome back to the second part of our tutorial on building a simple calculator application! In this installment, we&apos;ll dive deeper into the functionality of our calculator and cover tasks 5 through 17. If you missed the first part, make sure to check it out <a href="https://safaldas.in/building-a-simple-calculator-app-a-step-by-step-guide/">here</a>.</p><h3 id="task-5-handling-operator-inputs">Task 5: Handling Operator Inputs</h3><p>To handle operator inputs, we need to keep track of the current input and the operator chosen by the user. Update the event listener for operator buttons in your <code>script.js</code> file:</p><pre><code>// Inside the button event listener for operators
} else if (button.classList.contains(&apos;operator&apos;)) {
  if (currentInput !== &apos;&apos;) {
    currentInput += ` ${button.textContent} `;
    display.textContent = currentInput;
  }
}
</code></pre><h3 id="task-6-implementing-decimal-point">Task 6: Implementing Decimal Point</h3><p>Allow users to input decimal points in their calculations. Update the event listener for number buttons:</p><pre><code>// Inside the button event listener for number buttons
} else if (button.classList.contains(&apos;number&apos;)) {
  currentInput += button.textContent;
  display.textContent = currentInput;
}
</code></pre><h3 id="task-7-handling-calculation">Task 7: Handling Calculation</h3><p>When the user clicks the equals button, calculate the result and display it on the screen:</p><pre><code>// Inside the button event listener for equals button
} else if (button.classList.contains(&apos;equals&apos;)) {
  try {
    currentInput = eval(currentInput).toString();
    display.textContent = currentInput;
  } catch (error) {
    display.textContent = &apos;Error&apos;;
  }
}
</code></pre><h3 id="task-8-implementing-clear-functionality">Task 8: Implementing Clear Functionality</h3><p>Allow users to clear the current input or reset the calculator:</p><pre><code>// Inside the button event listener for clear button
} else if (button.classList.contains(&apos;clear&apos;)) {
  currentInput = &apos;&apos;;
  display.textContent = &apos;0&apos;;
}
</code></pre><h3 id="task-9-keyboard-support">Task 9: Keyboard Support</h3><p>Add support for keyboard input to enhance user experience:</p><pre><code>document.addEventListener(&apos;keydown&apos;, event =&gt; {
  const key = event.key;
  const allowedKeys = [&apos;0&apos;, &apos;1&apos;, &apos;2&apos;, &apos;3&apos;, &apos;4&apos;, &apos;5&apos;, &apos;6&apos;, &apos;7&apos;, &apos;8&apos;, &apos;9&apos;, &apos;+&apos;, &apos;-&apos;, &apos;*&apos;, &apos;/&apos;, &apos;.&apos;, &apos;=&apos;, &apos;Enter&apos;, &apos;Backspace&apos;, &apos;Escape&apos;];

  if (allowedKeys.includes(key)) {
    event.preventDefault();
    const button = document.querySelector(`.button:contains(&apos;${key}&apos;)`);
    if (button) button.click();
  }
});
</code></pre><h3 id="task-10-styling-enhancements">Task 10: Styling Enhancements</h3><p>Update the CSS to improve the visual appearance of the calculator:</p><pre><code>/* Add styling to the buttons */
.button {
  width: 50px;
  height: 50px;
  font-size: 18px;
  border: none;
  background-color: #e0e0e0;
  margin: 5px;
  cursor: pointer;
}
</code></pre><p>Stay tuned for the next part of our tutorial, where we&apos;ll wrap up the development of our simple calculator app by adding more features and improving user interactions.</p>]]></content:encoded></item><item><title><![CDATA[Building a Simple Calculator App: A Step-by-Step Guide]]></title><description><![CDATA[<p>In this tutorial, we&apos;ll walk you through the process of creating a simple calculator application using HTML, CSS, and JavaScript. This hands-on project will help you understand how to manipulate the DOM, handle user interactions, and implement basic arithmetic operations.</p><h3 id="task-1-setting-up-the-html-structure">Task 1: Setting Up the HTML Structure</h3><pre><code>&lt;</code></pre>]]></description><link>https://safaldas.in/building-a-simple-calculator-app-a-step-by-step-guide/</link><guid isPermaLink="false">64e4cbcd3eba480c75c7f293</guid><category><![CDATA[calculator app]]></category><category><![CDATA[learning js]]></category><category><![CDATA[javascript]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 14:57:26 GMT</pubDate><content:encoded><![CDATA[<p>In this tutorial, we&apos;ll walk you through the process of creating a simple calculator application using HTML, CSS, and JavaScript. This hands-on project will help you understand how to manipulate the DOM, handle user interactions, and implement basic arithmetic operations.</p><h3 id="task-1-setting-up-the-html-structure">Task 1: Setting Up the HTML Structure</h3><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
  &lt;title&gt;Simple Calculator&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class=&quot;calculator&quot;&gt;
    &lt;!-- Calculator display --&gt;
    &lt;div class=&quot;display&quot;&gt;0&lt;/div&gt;
    
    &lt;!-- Calculator buttons --&gt;
    &lt;div class=&quot;buttons&quot;&gt;
      &lt;!-- Buttons go here --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><h3 id="task-2-styling-the-calculator">Task 2: Styling the Calculator</h3><p>Create a <code>styles.css</code> file and add basic styling to the calculator elements.</p><pre><code>/* Add styling to the calculator */
.calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Style the display */
.display {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: right;
  font-size: 24px;
  margin-bottom: 10px;
}
</code></pre><h3 id="task-3-adding-buttons">Task 3: Adding Buttons</h3><p>Inside the <code>.buttons</code> div, add buttons for numbers and operators.</p><pre><code>&lt;!-- Inside the .buttons div --&gt;
&lt;button class=&quot;number&quot;&gt;1&lt;/button&gt;
&lt;button class=&quot;number&quot;&gt;2&lt;/button&gt;
&lt;!-- ... more number buttons ... --&gt;
&lt;button class=&quot;operator&quot;&gt;+&lt;/button&gt;
&lt;button class=&quot;operator&quot;&gt;-&lt;/button&gt;
&lt;!-- ... more operator buttons ... --&gt;
&lt;button class=&quot;equals&quot;&gt;=&lt;/button&gt;
&lt;button class=&quot;clear&quot;&gt;C&lt;/button&gt;
</code></pre><h3 id="task-4-basic-button-functionality">Task 4: Basic Button Functionality</h3><p>Create a <code>script.js</code> file and add the following code to handle button clicks.</p><pre><code>document.addEventListener(&apos;DOMContentLoaded&apos;, () =&gt; {
  const display = document.querySelector(&apos;.display&apos;);
  const buttons = document.querySelectorAll(&apos;.number, .operator, .equals, .clear&apos;);
  let currentInput = &apos;&apos;;
  
  buttons.forEach(button =&gt; {
    button.addEventListener(&apos;click&apos;, () =&gt; {
      if (button.classList.contains(&apos;number&apos;)) {
        currentInput += button.textContent;
        display.textContent = currentInput;
      } else if (button.classList.contains(&apos;operator&apos;)) {
        // Handle operator logic
      } else if (button.classList.contains(&apos;equals&apos;)) {
        // Handle calculation
      } else if (button.classList.contains(&apos;clear&apos;)) {
        currentInput = &apos;&apos;;
        display.textContent = &apos;0&apos;;
      }
    });
  });
});
</code></pre><p>In the next part of this tutorial, we&apos;ll cover Tasks 5 through 17, including handling operator inputs, calculating results, decimal points, error handling, keyboard support, and more.</p><p>Stay tuned for the next installment of &quot;Building a Simple Calculator App&quot; where we continue to refine and enhance our calculator&apos;s functionality!</p>]]></content:encoded></item><item><title><![CDATA[Building a Todo App: Mastering JavaScript and DOM Manipulation]]></title><description><![CDATA[<p><strong>A Step-by-Step Guide to Creating an Interactive Todo List Application</strong></p><p><strong>Introduction: </strong>This is a list of tasks for a beginner to think about how to build the todo application. A link to detailed post with code is at the bottom. Make sure to look into it if only necessary.</p><p><strong>Section</strong></p>]]></description><link>https://safaldas.in/from-javascript-newbie-to-dom-pro-a-step-by-step-guide-to-building-a-todo-app/</link><guid isPermaLink="false">64afe39e3eba480c75c7f171</guid><category><![CDATA[javascript]]></category><category><![CDATA[learning js]]></category><category><![CDATA[todo-app]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 14:32:11 GMT</pubDate><content:encoded><![CDATA[<p><strong>A Step-by-Step Guide to Creating an Interactive Todo List Application</strong></p><p><strong>Introduction: </strong>This is a list of tasks for a beginner to think about how to build the todo application. A link to detailed post with code is at the bottom. Make sure to look into it if only necessary.</p><p><strong>Section 1: Setting Up the Project:</strong>Get ready to start coding by setting up the project environment:</p><ol><li>Create an empty directory for your project.</li><li>Inside the directory, create an HTML file named &quot;index.html.&quot;</li><li>Add the basic HTML structure with <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> sections.</li><li>Include a CSS file named &quot;styles.css&quot; within the <code>&lt;head&gt;</code> section for styling.</li><li>Link your CSS file to the HTML using the <code>&lt;link&gt;</code> tag.</li><li>Create a JavaScript file named &quot;app.js&quot; and link it at the end of the <code>&lt;body&gt;</code> section.</li><li>Open the HTML file in a browser to ensure everything is set up correctly.</li></ol><p><strong>Section 2: Creating the User Interface:</strong>Build the user interface elements for the todo app:</p><ol><li>Inside the <code>&lt;body&gt;</code> section, create a <code>&lt;div&gt;</code> element with the class &quot;container&quot; to hold the app.</li><li>Inside the container, add an <code>&lt;input&gt;</code> element with the ID &quot;taskInput&quot; for entering tasks.</li><li>Create a <code>&lt;button&gt;</code> element with the ID &quot;addTaskBtn&quot; labeled &quot;Add Task.&quot;</li><li>Under the button, create an empty <code>&lt;ul&gt;</code> element with the ID &quot;taskList&quot; to display tasks.</li></ol><p><strong>Section 3: Adding Tasks Dynamically:</strong>Learn to add tasks to the list using DOM manipulation:</p><ol><li>In &quot;app.js,&quot; select the input field using the <code>document.getElementById</code> method.</li><li>Similarly, select the &quot;Add Task&quot; button using its ID.</li><li>Use the <code>addEventListener</code> method to capture the click event on the button.</li><li>Inside the event listener, retrieve the task input value using the <code>value</code> property.</li><li>Create a new <code>&lt;li&gt;</code> element, set its inner text to the task, and append it to the <code>&lt;ul&gt;</code>.</li></ol><p><strong>Section 4: Checking off Tasks:</strong>Implement the functionality to mark tasks as completed:</p><ol><li>For each new <code>&lt;li&gt;</code> element, add a <code>&lt;input&gt;</code> checkbox before the task text.</li><li>Assign a unique ID to each checkbox and label it as &quot;taskCheckbox.&quot;</li><li>Add an event listener to each checkbox to listen for the &quot;change&quot; event.</li><li>Inside the event listener, toggle the class &quot;completed&quot; on the associated <code>&lt;li&gt;</code> element.</li><li>Use CSS to style completed tasks differently, e.g., by changing the text color.</li></ol><p><strong>Section 5: Deleting Tasks:</strong>Allow users to remove tasks from the list:</p><ol><li>Beside each task, add a &quot;Delete&quot; button within a <code>&lt;button&gt;</code> element.</li><li>Set a class name &quot;deleteBtn&quot; to the button for identification.</li><li>Attach a click event listener to each delete button using <code>addEventListener</code>.</li><li>Inside the event listener, use the <code>removeChild</code> method to delete the associated <code>&lt;li&gt;</code> element.</li></ol><p><strong>Section 6: Local Storage Integration:</strong>Ensure task persistence even after page refresh:</p><ol><li>Inside the event listener for adding tasks, after appending the <code>&lt;li&gt;</code>, save tasks to <code>localStorage</code>.</li><li>Use the <code>localStorage.setItem</code> method to save tasks as a JSON string.</li><li>On page load, retrieve tasks from <code>localStorage</code> using the <code>localStorage.getItem</code> method.</li><li>Parse the JSON string back into an array of tasks and display them on the page.</li></ol><p><strong>Section 7: Styling and Final Touches:</strong>Add a touch of style to the app:</p><ol><li>Open &quot;styles.css&quot; and add basic styles to format the container, input, and button.</li><li>Style the tasks with proper margins, padding, and alignment.</li><li>Apply CSS transitions to create smooth animations for task completion and deletion.</li></ol><p><strong>Section 8: Conclusion and Next Steps:</strong>Celebrate your achievement and consider what&apos;s next:</p><ul><li>Recap the journey and completed todo app.</li><li>Explore more JavaScript and web development concepts.</li><li>Look into frameworks like React or Vue for advanced projects.</li></ul><p><strong>Final Thoughts:</strong>Building a todo app is a fantastic way to dive into JavaScript and DOM manipulation. As you continue learning, you&apos;ll discover countless opportunities to create impressive web applications. Keep coding, exploring, and building!</p><p>Complete coding guide of todo app <a href="https://safaldas.in/building-your-first-web-application-a-todo-app/">here</a></p>]]></content:encoded></item><item><title><![CDATA[Building Your First Web Application: A Todo App]]></title><description><![CDATA[<p>Welcome to your journey of building your first web application! In this blog post, we&apos;ll guide you through the process of creating a simple interactive todo app using HTML, CSS, and JavaScript. Whether you&apos;re completely new to programming or just getting started with web development, this</p>]]></description><link>https://safaldas.in/building-your-first-web-application-a-todo-app/</link><guid isPermaLink="false">64e4c58d3eba480c75c7f255</guid><category><![CDATA[javascript]]></category><category><![CDATA[todo-app]]></category><category><![CDATA[learning js]]></category><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 14:30:34 GMT</pubDate><content:encoded><![CDATA[<p>Welcome to your journey of building your first web application! In this blog post, we&apos;ll guide you through the process of creating a simple interactive todo app using HTML, CSS, and JavaScript. Whether you&apos;re completely new to programming or just getting started with web development, this tutorial will help you grasp the basics while creating a practical project.</p><h3 id="prerequisites">Prerequisites</h3><p>Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. You don&apos;t need to be an expert, but a basic grasp of these technologies will be beneficial.</p><h3 id="curriculum-overview">Curriculum Overview</h3><p><strong>Setting Up the Project:</strong></p><ul><li>Create a new folder for your project.</li><li>Inside the project folder, create three files: <code>index.html</code>, <code>styles.css</code>, and <code>app.js</code>.</li></ul><p><strong>Building the Structure:</strong></p><ul><li>Open the <code>index.html</code> file and set up the basic HTML structure.</li><li>Link the <code>styles.css</code> file to apply styling to your app.</li><li>Create a container with a heading, input field, add button, and an empty unordered list.</li></ul><p><strong>Adding Styling:</strong></p><ul><li>Open the <code>styles.css</code> file and add styles to make your app visually appealing.</li><li>Style the container, input field, button, and task list.</li></ul><p><strong>Implementing Functionality:</strong></p><ul><li>Open the <code>app.js</code> file and add a DOMContentLoaded event listener.</li><li>Select elements using <code>document.getElementById</code>.</li><li>Add an event listener to the &quot;Add Task&quot; button to create tasks.</li></ul><p><strong>Creating Tasks:</strong></p><ul><li>Get the value from the input field and create a new task item.</li><li>Append the task item to the task list.</li></ul><p><strong>Marking Tasks as Completed:</strong></p><ul><li>Add event listeners to task checkboxes to mark tasks as completed.</li><li>Style completed tasks with a strikethrough effect.</li></ul><p><strong>Deleting Tasks:</strong></p><ul><li>Add event listeners to delete buttons to remove tasks.</li><li>Use the <code>removeChild</code> method to remove tasks from the list.</li></ul><p><strong>Conclusion and Next Steps:</strong></p><ul><li>Congratulations! You&apos;ve built your first interactive web application.</li><li>Experiment with further enhancements, such as adding due dates or saving tasks to local storage.</li></ul><h3 id="step-by-step-walkthrough">Step-by-Step Walkthrough</h3><p>Now, let&apos;s dive into the step-by-step process of building your todo app.</p><h4 id="1-setting-up-the-project">1. Setting Up the Project</h4><p>Begin by creating a new folder for your project. Inside this folder, create three files: <code>index.html</code>, <code>styles.css</code>, and <code>app.js</code>.</p><h4 id="2-building-the-structure">2. Building the Structure</h4><p>In your <code>index.html</code> file, set up the basic HTML structure. Link the <code>styles.css</code> file to apply styling to your app. Create a container with a heading, input field, add button, and an empty unordered list.</p><pre><code class="language-html">&lt;!-- index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;!-- Add the necessary meta tags and title here --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;h1&gt;Todo App&lt;/h1&gt;
    &lt;input type=&quot;text&quot; id=&quot;taskInput&quot; placeholder=&quot;Enter a task&quot;&gt;
    &lt;button id=&quot;addTaskBtn&quot;&gt;Add Task&lt;/button&gt;
    &lt;ul id=&quot;taskList&quot;&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h4 id="3-adding-styling">3. Adding Styling</h4><p>In the <code>styles.css</code> file, add styles to make your app visually appealing. Style the container, input field, button, and task list.</p><pre><code class="language-css">/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  /* Add container styling here */
}

/* Add more styling for input, button, and task list */
</code></pre><h4 id="4-implementing-functionality">4. Implementing Functionality</h4><p>In your <code>app.js</code> file, add a DOMContentLoaded event listener to ensure that your JavaScript code runs after the page is fully loaded.</p><pre><code class="language-javascript">// app.js
document.addEventListener(&apos;DOMContentLoaded&apos;, function () {
  // Your code will go here
});
</code></pre><h4 id="5-creating-tasks">5. Creating Tasks</h4><p>Inside the event listener, you can start adding functionality. Select elements using <code>document.getElementById</code> and add an event listener to the &quot;Add Task&quot; button.</p><pre><code class="language-javascript">document.addEventListener(&apos;DOMContentLoaded&apos;, function () {
  const taskInput = document.getElementById(&apos;taskInput&apos;);
  const addTaskBtn = document.getElementById(&apos;addTaskBtn&apos;);
  const taskList = document.getElementById(&apos;taskList&apos;);

  addTaskBtn.addEventListener(&apos;click&apos;, function () {
    const taskText = taskInput.value.trim();
    if (taskText !== &apos;&apos;) {
      const taskLi = document.createElement(&apos;li&apos;);
      // Create the task item&apos;s structure here
      taskList.appendChild(taskLi);
      taskInput.value = &apos;&apos;;
    }
  });
});
</code></pre><h4 id="6-marking-tasks-as-completed">6. Marking Tasks as Completed</h4><p>You can add event listeners to task checkboxes to mark tasks as completed. Also, add styling to completed tasks.</p><pre><code class="language-javascript">// Inside the DOMContentLoaded event listener
taskList.addEventListener(&apos;click&apos;, function (event) {
  if (event.target.classList.contains(&apos;taskCheckbox&apos;)) {
    const taskLi = event.target.parentElement;
    taskLi.classList.toggle(&apos;completed&apos;);
  }
});
</code></pre><h4 id="7-deleting-tasks">7. Deleting Tasks</h4><p>Similarly, add event listeners to delete buttons to remove tasks.</p><pre><code class="language-javascript">// Inside the DOMContentLoaded event listener
taskList.addEventListener(&apos;click&apos;, function (event) {
  if (event.target.classList.contains(&apos;deleteBtn&apos;)) {
    const taskLi = event.target.parentElement;
    taskList.removeChild(taskLi);
  }
});
</code></pre><h4 id="8-conclusion-and-next-steps">8. Conclusion and Next Steps</h4><p>Congratulations! You&apos;ve successfully built your first interactive web application &#x2013; a todo app. You&apos;ve learned how to structure an HTML page, style it with CSS, and add interactivity using JavaScript.</p><p>As a next step, you can experiment with adding more features to your app, such as due dates, priority levels, or even saving tasks to local storage. This project serves as a great foundation for your journey into web development!</p><h3 id="wrapping-up">Wrapping Up</h3><p>Building a todo app is an excellent way to get started with web development. You&apos;ve learned fundamental concepts like working with the DOM, handling events, and applying CSS styling. This hands-on experience will serve as a strong foundation for your future projects.</p><p>Feel free to explore other web development topics, frameworks, and technologies. Remember, practice makes perfect, so keep building and experimenting with new ideas. Happy coding!</p>]]></content:encoded></item><item><title><![CDATA[Learning by creating projects [ Part 1]]]></title><description><![CDATA[<p>Start by listing out requirements</p><ol><li>The project-based learning website facilitates collaborative project management for users.</li><li>Users can browse and select projects listed as cards.</li><li>Upon selecting a project, users gain access to a Kanban board that visually organizes tasks into stages (e.g., to-do, in progress, done).</li><li>Users can start</li></ol>]]></description><link>https://safaldas.in/learning-by-creating-projects/</link><guid isPermaLink="false">64c364e53eba480c75c7f17d</guid><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 13:59:20 GMT</pubDate><content:encoded><![CDATA[<p>Start by listing out requirements</p><ol><li>The project-based learning website facilitates collaborative project management for users.</li><li>Users can browse and select projects listed as cards.</li><li>Upon selecting a project, users gain access to a Kanban board that visually organizes tasks into stages (e.g., to-do, in progress, done).</li><li>Users can start a project, which clones a template to their projects list.</li><li>They can add, manage, and track subtasks within each task.</li><li>The website integrates with GitHub, enabling users to attach their project repository links and manage commits and pull requests for each task.</li><li>Project progress is calculated based on task completion, similar to Jira, and the website provides analytics and reporting.</li><li>Each user has a personalized profile for a customized experience.</li><li>The website is mobile responsive for accessibility across devices.</li><li>A support system is available for user inquiries and assistance.</li></ol><h2 id="epics">Epics</h2><p>Creating epics for all the tasks can help organize and categorize the tasks into larger, high-level themes. Here are some epics based on the tasks for the project-based learning website:</p><p><strong>Epic: Project Listing and Selection</strong></p><ul><li>Allow users to browse and search for projects.</li><li>Display projects as cards with relevant details and descriptions.</li><li>Implement filters and tags to help users find specific projects.</li></ul><p><strong>Epic: Task Management and Kanban Board</strong></p><ul><li>Enable users to select a project and access its associated Kanban board.</li><li>Provide a visual representation of tasks in different stages (e.g., to-do, in progress, done).</li><li>Allow users to move tasks between different stages on the Kanban board.</li></ul><p><strong>Epic: Project Initiation and Cloning</strong></p><ul><li>Allow users to click &quot;Start&quot; on a project to initiate it in their projects list.</li><li>Implement a template cloning mechanism for copying project templates to the user&apos;s list.</li><li>Ensure that the cloned project retains its structure and tasks.</li></ul><p><strong>Epic: GitHub Integration</strong></p><ul><li>Integrate with GitHub to allow users to attach their project repository link.</li><li>Implement OAuth for secure authentication and authorization.</li></ul><p><strong>Epic: Task Commit/Pull Request Management</strong></p><ul><li>Provide a mechanism for users to link their commits and pull requests to tasks.</li><li>Display commit and pull request status on task cards or in the task details.</li></ul><p><strong>Epic: Progress Calculation and Reporting</strong></p><ul><li>Calculate project progress based on the completion of tasks.</li><li>Provide progress metrics at both task and project levels.</li><li>Generate reports to visualize project progress over time.</li></ul><p><strong>Epic: User Authentication and Profiles</strong></p><ul><li>Implement user registration and login functionalities.</li><li>Create user profiles with relevant information (e.g., name, email, project history).</li></ul><p><strong>Epic: Collaboration and Notifications</strong></p><ul><li>Enable task assignment to team members for group projects.</li><li>Implement collaboration features like comments and notifications.</li><li>Notify users of task assignments and updates.</li></ul><p><strong>Epic: Time Tracking and Reporting</strong></p><ul><li>Add time tracking capabilities to record the time spent on each task.</li><li>Provide time-related analytics and reports.</li></ul><p><strong>Epic: Mobile Responsiveness</strong></p><ul><li>Ensure the website is responsive and user-friendly on various devices.</li></ul><p><strong>Epic: Help Center and Support</strong></p><ul><li>Create a help center with FAQs and documentation to assist users.</li><li>Provide a support system for users to report issues or ask questions.</li></ul>]]></content:encoded></item><item><title><![CDATA[Learning by creating projects [Part 2]]]></title><description><![CDATA[<p></p><p>Here we work on the first epic <strong>Project Listing and Selection:</strong></p><h3 id="user-stories"> User stories</h3><ol><li>As a user, I want to browse and search for projects so that I can discover interesting projects to work on.</li><li>As a user, I want to see projects displayed as cards with relevant details and descriptions</li></ol>]]></description><link>https://safaldas.in/learning-by-creating-projects-part-2/</link><guid isPermaLink="false">64c36a0a3eba480c75c7f191</guid><dc:creator><![CDATA[safaldas]]></dc:creator><pubDate>Tue, 22 Aug 2023 13:59:08 GMT</pubDate><content:encoded><![CDATA[<p></p><p>Here we work on the first epic <strong>Project Listing and Selection:</strong></p><h3 id="user-stories"> User stories</h3><ol><li>As a user, I want to browse and search for projects so that I can discover interesting projects to work on.</li><li>As a user, I want to see projects displayed as cards with relevant details and descriptions to quickly assess their suitability.</li><li>As a user, I want to filter projects based on categories and tags to find projects that align with my interests and skills.</li><li>As a user, I want to click on a project card to view more details about the project, such as its objectives and requirements.</li><li>As a user, I want the project listing page to have a clear and intuitive layout, so I can easily navigate through the available projects.</li><li>As a user, I want to have a &quot;back&quot; button or link to return to the project listing after viewing the details of a specific project.</li><li>As a user, I want the project listing to be regularly updated, showing the most relevant and up-to-date projects first.</li><li>As a user, I want the website to remember my preferences and show me relevant project recommendations based on my previous selections.</li><li>As a user, I want the project cards to include an image or icon representing the project, helping me quickly recognize and differentiate projects.</li><li>As a user, I want to easily share interesting projects with my friends or colleagues through social media or email.</li><li>As a user, I want to have a search bar to find specific projects based on keywords or project names.</li><li>As a user, I want the website to load quickly and be responsive, providing a smooth and efficient browsing experience.</li></ol><h3 id="tasks">Tasks</h3><p>Task: Design Project Listing Page</p><ul><li>Create wireframes and mockups for the project listing page.</li><li>Design a clean and user-friendly interface with a card-based layout.</li><li>Include project details such as project name, description, category, and tags in each card.</li><li>Ensure responsive design for various devices.</li></ul><p>Task: Implement Project Search and Filters</p><ul><li>Add a search bar to the project listing page for users to search projects by keywords.</li><li>Implement filters based on categories and tags to enable users to narrow down their project search.</li></ul><p>Task: Project Listing Data Management</p><ul><li>Set up a database to store project information, including project details and associated metadata (categories, tags).</li><li>Develop an API or backend service to fetch and serve project data to the frontend.</li></ul><p>Task: Display Project Details</p><ul><li>Create a separate page to display detailed information about a selected project.</li><li>Include project objectives, requirements, and any additional relevant details.</li></ul><p>Task: Enable Project Card Click Functionality</p><ul><li>Implement a click event on project cards to redirect users to the detailed project page.</li></ul><p>Task: Implement Pagination or Infinite Scrolling</p><ul><li>Add pagination or infinite scrolling to the project listing page to handle a large number of projects.</li></ul><p>Task: Create &quot;Back&quot; Button or Link</p><ul><li>Include a &quot;back&quot; button or link on the detailed project page to allow users to return to the project listing.</li></ul><p>Task: Dynamic Project Sorting</p><ul><li>Implement dynamic sorting options for project listing (e.g., sort by relevance, popularity, date added).</li><li>Allow users to change the sorting order based on their preferences.</li></ul><p>Task: Recent Project Highlight</p><ul><li>Create a section on the project listing page to highlight recently added projects.</li><li>Display the most recent projects at the top of the listing.</li></ul><p>Task: User Project History Tracking</p><ul><li>Implement a mechanism to track and store users&apos; project history.</li><li>Use this history to offer personalized project recommendations.</li></ul><p>Task: Integrate Social Media Sharing</p><ul><li>Add social media sharing buttons to project cards, allowing users to easily share projects they find interesting.</li></ul><p>Task: Implement User Interaction Analytics</p><ul><li>Set up tracking to gather user interaction data on the project listing page.</li><li>Analyze user behavior to identify popular projects and improve the user experience.</li></ul><p>Task: Error Handling and Feedback</p><ul><li>Implement error handling for invalid search queries or when no projects match the search criteria.</li><li>Provide clear feedback to users when search results are not found.</li></ul><p>Task: Testing and Bug Fixing</p><ul><li>Conduct thorough testing of the project listing functionality on different devices and browsers.</li><li>Address and fix any bugs or issues discovered during testing.</li></ul><p>Task: Performance Optimization</p><ul><li>Optimize the performance of the project listing page to ensure fast loading times and smooth user experience.</li></ul>]]></content:encoded></item></channel></rss>