<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kavishka Dinajara</title>
    <description>The latest articles on DEV Community by Kavishka Dinajara (@kavishka_dinajara_88).</description>
    <link>https://dev.to/kavishka_dinajara_88</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1235133%2F45b6ffc5-1cbf-4ea4-808a-e2213b0dd785.jpg</url>
      <title>DEV Community: Kavishka Dinajara</title>
      <link>https://dev.to/kavishka_dinajara_88</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kavishka_dinajara_88"/>
    <language>en</language>
    <item>
      <title>Building a Modern Authentication System with Supabase, Ballerina, and Next.js</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Thu, 10 Oct 2024 16:33:38 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/building-a-modern-authentication-system-with-supabase-ballerina-and-nextjs-1i18</link>
      <guid>https://dev.to/kavishka_dinajara_88/building-a-modern-authentication-system-with-supabase-ballerina-and-nextjs-1i18</guid>
      <description>&lt;p&gt;In this article, I'll share my journey of integrating Supabase with Ballerina as a backend and Next.js as the frontend framework to create a modern authentication system. This approach not only allows for a streamlined user experience but also leverages the power of JWT (JSON Web Tokens) for secure authentication.&lt;/p&gt;

&lt;h2&gt;
  
  
  Overview of the Tech Stack
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Supabase&lt;/strong&gt;: An open-source Firebase alternative that provides a backend-as-a-service, including authentication, database management, and real-time functionalities.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ballerina&lt;/strong&gt;: A programming language specifically designed for cloud-native application development, making it perfect for handling API integrations and microservices.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Next.js&lt;/strong&gt;: A React-based framework that enables server-side rendering and static site generation, providing an excellent user experience.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Setting Up the Project
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Initializing Supabase
&lt;/h3&gt;

&lt;p&gt;I started by creating a Supabase project and setting up the database. I defined a &lt;code&gt;users&lt;/code&gt; table with fields for the username and password. The password would be stored securely as a hash.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Connecting Ballerina to Supabase
&lt;/h3&gt;

&lt;p&gt;In Ballerina, I created a service to handle user registration and login. Here’s a snippet of the code to establish a connection to the Supabase PostgreSQL database:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import ballerina/http;
import ballerinax/postgresql;

// Supabase DB connection config
configurable string host = "your_host";
configurable int port = 5432;
configurable string username = "your_username";
configurable string password = "your_password";
configurable string databaseName = "your_database";

service /auth on new http:Listener(9090) {
    final postgresql:Client dbClient;

    public function init() returns error? {
        self.dbClient = check new (host, username, password, databaseName, port);
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. User Registration and Hashing Passwords
&lt;/h3&gt;

&lt;p&gt;For user registration, I utilized the &lt;code&gt;crypto&lt;/code&gt; module in Ballerina to hash the passwords securely. Here's how I handled user registration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;resource function post register(http:Caller caller, http:Request req) returns error? {
    json payload = check req.getJsonPayload();
    string username = (check payload.username).toString();
    string plainPassword = (check payload.password).toString();

    // Hash the password
    byte[] hashedPassword = check crypto:hashSha256(plainPassword.toBytes());

    // Insert the user into the database
    sql:ExecutionResult result = check self.dbClient-&amp;gt;execute(
        `INSERT INTO users (username, password) VALUES (${username}, ${hashedPassword.toBase16String()})`
    );

    if result.affectedRowCount == 1 {
        check caller-&amp;gt;respond({ message: "Registration successful" });
    } else {
        check caller-&amp;gt;respond({ message: "Registration failed" });
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. User Login and JWT Generation
&lt;/h3&gt;

&lt;p&gt;For the login functionality, I queried the database to retrieve the hashed password, compared it with the entered password, and generated a JWT token upon successful authentication:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;resource function post login(http:Caller caller, http:Request req) returns error {
    json payload = check req.getJsonPayload();
    string username = (check payload.username).toString();
    string plainPassword = (check payload.password).toString();

    // Retrieve the user from the database
    stream&amp;lt;record {|anydata...;|}, sql:Error?&amp;gt; resultStream = self.dbClient-&amp;gt;query(
        `SELECT password FROM users WHERE username = ${username}`
    );

    // Verify the password and generate JWT token
    // (Code to validate the password and generate JWT)
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. Implementing the Frontend with Next.js
&lt;/h3&gt;

&lt;p&gt;On the frontend, I built a registration page using React and styled it with Tailwind CSS. The form captures the username and password, sending the data to the Ballerina backend for processing.&lt;/p&gt;

&lt;p&gt;Here’s a snippet of the registration form component:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;RegisterPage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setUsername&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setPassword&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/auth/register&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="c1"&gt;// Handle response...&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="nx"&gt;onSubmit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setUsername&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt; &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Username&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;password&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setPassword&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt; &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Password&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Register&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/form&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

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

&lt;/div&gt;



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

&lt;p&gt;This project has taught me the intricacies of handling authentication securely and effectively using modern technologies. Integrating Supabase with Ballerina and Next.js has provided me with a robust solution for user management.&lt;/p&gt;

&lt;p&gt;I hope this article inspires you to explore similar integrations and improve your skills in building modern web applications. If you have any questions or feedback, feel free to reach out!&lt;/p&gt;




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

</description>
    </item>
    <item>
      <title>My Journey Learning TypeScript and JavaScript</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Sat, 28 Sep 2024 17:44:07 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/my-journey-learning-typescript-and-javascript-47c8</link>
      <guid>https://dev.to/kavishka_dinajara_88/my-journey-learning-typescript-and-javascript-47c8</guid>
      <description>&lt;h3&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;As a web developer, learning &lt;strong&gt;JavaScript (JS)&lt;/strong&gt; is essential because it powers the modern web. But as I dove deeper into development, I realized that &lt;strong&gt;TypeScript (TS)&lt;/strong&gt; could help me write more reliable, maintainable code. In this post, I’m excited to share my journey learning both JavaScript and TypeScript, the challenges I faced, and the exciting things I discovered along the way.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;1. Starting Out with JavaScript&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When I first started learning JavaScript, I was overwhelmed by its versatility. JavaScript is known for being the language of the web, capable of everything from making interactive websites to building full-stack applications.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Key Concepts in JavaScript&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Variables and Data Types&lt;/strong&gt;: Understanding &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;, and &lt;code&gt;const&lt;/code&gt; and the types of data (strings, numbers, arrays, etc.).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Functions&lt;/strong&gt;: Writing reusable code through functions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Objects and Arrays&lt;/strong&gt;: Learning how JavaScript handles data through key-value pairs and lists.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Control Structures&lt;/strong&gt;: Using loops and conditional statements to control the flow of your application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;DOM Manipulation&lt;/strong&gt;: How JavaScript interacts with HTML to create dynamic content.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Example: JavaScript Basics&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Kavishka&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greetUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;greetUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Output: Hello, Kavishka!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This was one of the first things I learned, and it helped me understand the power of JavaScript in building dynamic applications. With this foundation, I could build small interactive websites and start experimenting with frontend frameworks.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;2. Discovering TypeScript&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;After becoming comfortable with JavaScript, I noticed that larger applications could get tricky. This is when I discovered &lt;strong&gt;TypeScript&lt;/strong&gt;—a superset of JavaScript that adds static types, making the code more predictable and easier to debug.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Why TypeScript?&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Type Safety&lt;/strong&gt;: TypeScript forces you to declare data types (strings, numbers, arrays), which prevents common runtime errors.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code Readability&lt;/strong&gt;: It helps me and my team understand what the code is supposed to do without guessing data types.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tooling&lt;/strong&gt;: TypeScript's support for IDE features like autocompletion and better error handling made me more productive.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Example: Transitioning from JS to TS&lt;/strong&gt;
&lt;/h4&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;addNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;addNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;10&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;  &lt;span class="c1"&gt;// Output: "510" (Oops! String concatenation)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;addNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;addNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;  &lt;span class="c1"&gt;// Output: 15 (Correct result)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Adding type annotations to functions and variables helped catch errors early, making my codebase more robust. As someone who transitioned from JS to TS, I found that it adds structure without overwhelming complexity.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;3. Object-Oriented Programming in TypeScript&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;JavaScript has always supported object-oriented programming (OOP), but TypeScript enhances it by introducing better tools like classes, interfaces, inheritance, and encapsulation. I found TypeScript's OOP features especially helpful in organizing complex code.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Example: OOP in TypeScript&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;makeSound&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; makes a sound`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Dog&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;makeSound&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; barks`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Dog&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Buddy&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;makeSound&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;  &lt;span class="c1"&gt;// Output: Buddy barks&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;TypeScript allows you to build robust OOP patterns, making it easier to scale and maintain large applications, which was a big leap forward in my development journey.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;4. Advanced TypeScript Features&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;As I explored more, I realized how powerful TypeScript can be with its advanced features like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Generics&lt;/strong&gt;: Writing reusable code that works with any data type.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interfaces&lt;/strong&gt;: Defining the shape of objects and making code more structured.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Type Aliases&lt;/strong&gt;: Creating custom types for better readability.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Example: Using Generics&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;arg&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;identity&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;  &lt;span class="c1"&gt;// Output: 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Generics allow you to write flexible code that works with different types, making it a valuable tool for building reusable functions and components.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;5. Challenges Along the Way&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;One of the challenges I faced was managing the complexity that comes with learning TypeScript’s strict typing system. At first, it felt like I was writing more code, but I quickly realized that this additional effort paid off in preventing bugs. TypeScript also forced me to think more carefully about my data structures, which improved my overall coding practices.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;6. Practical Tips for Learning JavaScript and TypeScript&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;If you're starting with JavaScript and TypeScript, here are a few tips that helped me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Practice, Practice, Practice&lt;/strong&gt;: The best way to learn is by building small projects. Start with simple web pages in JavaScript and then add TypeScript for better type safety.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Embrace Errors&lt;/strong&gt;: Don’t get discouraged by TypeScript's strictness. Those red squiggly lines in your IDE are there to help you write better code!&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Learn by Example&lt;/strong&gt;: Use examples from documentation and tutorials to understand key concepts, then modify them to fit your needs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pair Programming&lt;/strong&gt;: Discussing code with others helped me solidify concepts and learn new tricks.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Learning &lt;strong&gt;JavaScript&lt;/strong&gt; and &lt;strong&gt;TypeScript&lt;/strong&gt; has been an exciting and rewarding journey. JavaScript gave me the flexibility to build interactive web applications, while TypeScript added the structure and safety I needed for more complex projects. Combining these two technologies has improved my code quality and helped me grow as a developer.&lt;/p&gt;

&lt;p&gt;I’m excited to continue my journey with TypeScript and JavaScript, and I hope my experience helps others who are also on the path of learning these powerful tools. If you're just starting out, keep experimenting, building, and pushing your limits—there’s always more to learn!&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;What’s Next?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Next, I plan to dive deeper into &lt;strong&gt;Next.js&lt;/strong&gt; with &lt;strong&gt;TypeScript&lt;/strong&gt; and experiment with backend TypeScript for full-stack applications. Stay tuned for my upcoming posts on that!&lt;/p&gt;




</description>
    </item>
    <item>
      <title>Unlocking AI Potential with Azure: My Experience at the Season of AI - NIBM Galle</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Sun, 01 Sep 2024 14:06:17 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/unlocking-ai-potential-with-azure-my-experience-at-the-season-of-ai-nibm-galle-4gga</link>
      <guid>https://dev.to/kavishka_dinajara_88/unlocking-ai-potential-with-azure-my-experience-at-the-season-of-ai-nibm-galle-4gga</guid>
      <description>&lt;h3&gt;
  
  
  Introduction: A Global AI Initiative
&lt;/h3&gt;

&lt;p&gt;Artificial Intelligence is reshaping the world, and being part of the journey is both thrilling and essential. On the 31st of August 2024, I had the privilege of attending the "Season of AI" event at the NIBM Galle campus—a part of Microsoft's global AI initiative aimed at empowering students with the latest advancements in AI technology. The event focused on using tools like Python, .NET, C#, VS Code, and Azure to build innovative AI-driven applications. This hands-on experience gave me a unique insight into how these technologies come together to shape the future of AI.&lt;/p&gt;

&lt;h3&gt;
  
  
  Event Overview: Tools, Technologies, and Inspiration
&lt;/h3&gt;

&lt;p&gt;The event was presented by Dileepa Bandara, a Gold Microsoft Learn Student Ambassador, who provided us with a wealth of knowledge on AI and cloud computing. We delved into the world of Azure, exploring its capabilities and how it integrates with OpenAI to unlock endless possibilities. &lt;/p&gt;

&lt;p&gt;The focus of the event was on practical application, and we were introduced to Azure AI Studio, a cutting-edge 'code-first' platform for building generative AI copilots. The session emphasized the importance of hands-on experience, encouraging us to set up our environments with Python or C#, VS Code, and the necessary extensions.&lt;/p&gt;

&lt;p&gt;For anyone looking to dive into AI, this event was a goldmine. With tools like Azure and OpenAI at our fingertips, the potential to create innovative solutions felt more accessible than ever.&lt;/p&gt;

&lt;h3&gt;
  
  
  The AdumKade Experience: Bringing AI to Fashion
&lt;/h3&gt;

&lt;p&gt;One of the most exciting parts of the event was the practical session where we created a small AI application named &lt;strong&gt;AdumKade&lt;/strong&gt;. AdumKade is a fashion-focused application designed to revolutionize the way we interact with clothing choices. This app wasn't just about showcasing AI capabilities—it was about making AI work for real-world applications.&lt;/p&gt;

&lt;p&gt;Here's what we built:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI Assistant:&lt;/strong&gt; A virtual assistant that helps users with fashion advice, guiding them through different clothing styles and trends.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Clothing Image Generator:&lt;/strong&gt; Leveraging the power of generative AI, this feature creates clothing images based on user input, offering a personalized experience.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Chatbot:&lt;/strong&gt; A conversational AI that interacts with users, answering their questions, and providing recommendations in real-time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Building AdumKade was both challenging and rewarding. It demonstrated how AI could be seamlessly integrated into daily life, offering practical solutions with a creative twist.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Learnings: AI, Azure, and the Future
&lt;/h3&gt;

&lt;p&gt;The "Season of AI" event was more than just a workshop—it was a glimpse into the future of technology. Azure's integration with AI tools like OpenAI showcases how cloud computing is becoming the backbone of modern AI development. The event emphasized a 'code-first' approach, empowering developers to create without limits.&lt;/p&gt;

&lt;p&gt;I also learned how important it is to stay adaptable. AI is a rapidly evolving field, and tools like Azure AI Studio are pushing the boundaries of what we can achieve. This experience has inspired me to continue exploring AI, not just as a technology but as a tool for innovation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Practical Insights: Applying What I've Learned
&lt;/h3&gt;

&lt;p&gt;The knowledge and experience gained from this event have already begun to influence my approach to projects. I see the potential for AI in various fields, from fashion to more complex applications like data analysis and customer interaction platforms. &lt;/p&gt;

&lt;p&gt;With tools like Azure and OpenAI, the only limit is our imagination. The hands-on experience of creating AdumKade has sparked ideas for future projects, and I'm eager to dive deeper into AI development.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion: Embrace the AI Revolution
&lt;/h3&gt;

&lt;p&gt;Attending the "Season of AI" event at NIBM Galle was an enriching experience that opened my eyes to the vast potential of AI and cloud computing. I encourage anyone interested in technology to participate in such events, as they provide invaluable knowledge and networking opportunities.&lt;/p&gt;

&lt;p&gt;If you're passionate about AI, don't miss the chance to get involved. Whether you're a seasoned developer or just starting, events like these are a perfect platform to hone your skills and explore new possibilities. And who knows—you might even walk away with some great prizes, like a $100 Azure voucher or a LinkedIn Premium subscription!&lt;/p&gt;




&lt;h3&gt;
  
  
  Final Thoughts:
&lt;/h3&gt;

&lt;p&gt;Looking back, this event has set the stage for my future endeavors in AI development. It's an exciting time to be in tech, and with the tools and knowledge I've gained, I'm ready to take on new challenges and innovate in ways I never thought possible.&lt;/p&gt;

&lt;p&gt;Thank you to the organizers, speakers, and fellow participants who made the "Season of AI" event an unforgettable experience. I look forward to applying what I've learned and continuing this journey into the world of AI.&lt;/p&gt;




</description>
    </item>
    <item>
      <title>🚀 Level Up Your Web Development with Next.js</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Sun, 25 Aug 2024 06:29:04 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/level-up-your-web-development-with-nextjs-2gkn</link>
      <guid>https://dev.to/kavishka_dinajara_88/level-up-your-web-development-with-nextjs-2gkn</guid>
      <description>&lt;p&gt;Next.js has quickly become a go-to framework for building React applications. It's packed with features that make web development faster, more efficient, and scalable. In this post, I'll dive into why Next.js is an essential tool for developers and how it can supercharge your projects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Next.js? 🤔
&lt;/h3&gt;

&lt;p&gt;Next.js is more than just a React framework. It provides a suite of features that make it stand out:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Hybrid Rendering&lt;/strong&gt;: Combine static site generation (SSG) and server-side rendering (SSR) effortlessly. This flexibility allows you to optimize performance and SEO.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Built-In API Routes&lt;/strong&gt;: Need a backend for your frontend? Next.js has you covered with built-in API routes, making it easier to handle serverless functions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automatic Code Splitting&lt;/strong&gt;: Only load what you need. Next.js automatically splits your code, reducing the initial load time and improving user experience.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dynamic Routing&lt;/strong&gt;: File-based routing makes dynamic routing a breeze. No more complex configurations – just drop in your files, and Next.js handles the rest.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Getting Started with Next.js
&lt;/h3&gt;

&lt;p&gt;Here’s a quick guide to get you started with Next.js:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Installation:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx create-next-app@latest my-nextjs-app
   &lt;span class="nb"&gt;cd &lt;/span&gt;my-nextjs-app
   npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;File-Based Routing:&lt;/strong&gt;
Simply create a file in the &lt;code&gt;pages&lt;/code&gt; directory, and it automatically becomes a route:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// pages/about.js&lt;/span&gt;
   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;About&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;About Us&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Access it via &lt;code&gt;http://localhost:3000/about&lt;/code&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;API Routes:&lt;/strong&gt;
Create a new file under &lt;code&gt;pages/api&lt;/code&gt; to add serverless functions:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// pages/api/hello.js&lt;/span&gt;
   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, Next.js!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Access the API at &lt;code&gt;http://localhost:3000/api/hello&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Real-World Use Cases
&lt;/h3&gt;

&lt;p&gt;Next.js is perfect for various use cases:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;E-commerce Sites&lt;/strong&gt;: Dynamic routing and server-side rendering enhance performance and SEO, which are critical for online stores.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Blogs and Portfolios&lt;/strong&gt;: Hybrid rendering lets you combine static pages with dynamic content seamlessly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Enterprise Applications&lt;/strong&gt;: With built-in API routes, you can build complex applications that scale easily.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Next.js is a powerful tool that simplifies modern web development. Whether you're building a small personal project or a large-scale application, Next.js provides the flexibility and performance you need. If you haven't explored it yet, now is the time!&lt;/p&gt;

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

</description>
    </item>
    <item>
      <title>What I Learned Today: Exploring JavaScript, TypeScript, Node.js, and Project Updates</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Thu, 15 Aug 2024 16:24:26 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/what-i-learned-today-exploring-javascript-typescript-nodejs-and-project-updates-32po</link>
      <guid>https://dev.to/kavishka_dinajara_88/what-i-learned-today-exploring-javascript-typescript-nodejs-and-project-updates-32po</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Understanding JavaScript&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Today, I delved deeper into JavaScript, the versatile and widely-used programming language that powers much of the web. JavaScript is known for its dynamic typing, prototype-based object orientation, and first-class functions. It’s the backbone of interactive web pages and is used extensively in both client-side and server-side development. Key takeaways about JavaScript listed following.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dynamic Typing:&lt;/strong&gt; JavaScript doesn’t require explicit type definitions, allowing variables to hold any type of data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Event-Driven:&lt;/strong&gt; It handles asynchronous events efficiently, making it perfect for dynamic web applications.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cross-Platform Compatibility:&lt;/strong&gt; JavaScript runs seamlessly in any web browser and on servers via environments like Node.js.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Discovering Node.js
&lt;/h2&gt;

&lt;p&gt;I also explored Node.js, a powerful runtime environment that allows JavaScript to run on the server side. Node.js enables developers to use JavaScript for backend development, creating scalable and high-performance applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features of Node.js&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Asynchronous and Event-Driven:&lt;/strong&gt; Node.js uses a non-blocking I/O model, which makes it lightweight and efficient. It can handle multiple simultaneous connections without getting bogged down.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Single-Threaded but Scalable:&lt;/strong&gt; Despite operating on a single thread, Node.js can efficiently manage many concurrent connections due to its event-driven architecture.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;V8 JavaScript Engine:&lt;/strong&gt; Node.js uses the V8 engine developed by Google, which compiles JavaScript into machine code for faster execution.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;NPM (Node Package Manager):&lt;/strong&gt; Node.js comes with npm, a package manager that provides access to a vast ecosystem of open-source libraries and tools.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Discovering TypeScript
&lt;/h2&gt;

&lt;p&gt;I also explored TypeScript, a statically typed superset of JavaScript developed by Microsoft. TypeScript enhances JavaScript by adding optional static types, interfaces, and other features that improve the development experience, especially for large codebases. Key benefits of TypeScript are following.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Static Typing:&lt;/strong&gt; TypeScript’s type annotations help catch errors at compile time, providing a safer and more predictable coding environment.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Enhanced IDE Support:&lt;/strong&gt; TypeScript offers better tooling in IDEs, including autocomplete, refactoring, and code navigation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Backward Compatibility:&lt;/strong&gt; It seamlessly integrates with existing JavaScript code, allowing for incremental adoption.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Comparing JavaScript, Node.js, and TypeScript
&lt;/h2&gt;

&lt;p&gt;Choosing between JavaScript and TypeScript, and incorporating Node.js, depends on the project requirements:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;JavaScript&lt;/strong&gt; is ideal for small projects, rapid prototyping, and when a minimal learning curve is desired.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript&lt;/strong&gt; excels in large codebases, team collaborations, and projects where long-term maintenance and scalability are critical.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Node.js&lt;/strong&gt; is essential for server-side development, allowing JavaScript to be used for full-stack development and creating high-performance, scalable applications.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Applying TypeScript and Node.js in TeaBridge Project
&lt;/h2&gt;

&lt;p&gt;Reflecting on my ongoing TeaBridge project—a web and mobile application for managing the tea industry in Sri Lanka—I realized that integrating TypeScript and using Node.js could be highly beneficial. TeaBridge connects tea leaf suppliers, factories, and buyers, requiring a robust and maintainable codebase.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Benefits for TeaBridge&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Error Prevention:&lt;/strong&gt; TypeScript’s static typing can help catch errors early, ensuring more reliable code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Improved Collaboration:&lt;/strong&gt; Enhanced tooling and clearer code documentation through type annotations can facilitate better team collaboration.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Easier Refactoring:&lt;/strong&gt; Static types make refactoring safer and more efficient, helping to maintain and scale the project over time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Server-Side Efficiency:&lt;/strong&gt; Node.js provides a fast, scalable environment for handling server-side operations, improving overall application performance.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Integration Steps&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1.Next.js (Web)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Set up a tsconfig.json file.&lt;/li&gt;
&lt;li&gt;Rename .js files to .ts/.tsx.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Install TypeScript and type definitions&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install --save-dev typescript @types/react @types/node&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2.Expo (Mobile)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Initialize or convert the project to TypeScript.&lt;/li&gt;
&lt;li&gt;Set up a tsconfig.json file.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Install TypeScript and type definitions&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install --save-dev typescript @types/react @types/react-native&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Today’s exploration of JavaScript, TypeScript, and Node.js provided valuable insights into how these technologies can enhance my development projects. Integrating TypeScript into TeaBridge, along with leveraging Node.js for server-side operations, promises to improve code quality, facilitate better collaboration, and ensure long-term maintainability. Embracing these powerful tools can significantly benefit both the web and mobile aspects of the project.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Exploring Cloud Computing: Insights from the Tech Talk with Chamith Kumarage</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Sat, 27 Jul 2024 18:13:51 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/exploring-cloud-computing-insights-from-the-tech-talk-with-chamith-kumarage-203n</link>
      <guid>https://dev.to/kavishka_dinajara_88/exploring-cloud-computing-insights-from-the-tech-talk-with-chamith-kumarage-203n</guid>
      <description>&lt;p&gt;Today, I had the privilege of attending an enlightening tech talk on cloud computing technologies, hosted by Chamith Kumarage, the co-founder of OPZQL, at NIBM Galle Campus. This session was part of the ongoing series of tech talks aimed at empowering minds with cutting-edge knowledge.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Dive into Cloud Computing
&lt;/h2&gt;

&lt;p&gt;Cloud computing has revolutionized the way we approach computing resources, making them more accessible, scalable, and efficient. During the session, Chamith Kumarage covered a wide range of topics, giving us a comprehensive overview of cloud computing and its various facets.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Areas Explored
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Introduction to Cloud Computing&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Understanding the basic concepts of cloud computing.&lt;/li&gt;
&lt;li&gt;Differentiating between traditional computing and cloud computing.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Cloud Service Models&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; Infrastructure as a Service (IaaS): Providing virtualized computing resources over the internet.&lt;/li&gt;
&lt;li&gt;   Platform as a Service (PaaS): Offering hardware and software tools over the internet.&lt;/li&gt;
&lt;li&gt;   Software as a Service (SaaS): Delivering software applications over the internet.&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Deployment Models&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Public Cloud&lt;/strong&gt;: Services offered over the public internet and available to anyone who wants to purchase them.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Private Cloud&lt;/strong&gt;: Dedicated environments reserved for a single organization.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hybrid Cloud&lt;/strong&gt;: A combination of public and private clouds, allowing data and applications to be shared between them.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Benefits of Cloud Computing&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Scalability&lt;/li&gt;
&lt;li&gt;Cost Efficiency&lt;/li&gt;
&lt;li&gt;Flexibility and Accessibility&lt;/li&gt;
&lt;li&gt;Disaster Recovery&lt;/li&gt;
&lt;li&gt;Automatic Updates&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Challenges and Considerations&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Security Concerns&lt;/li&gt;
&lt;li&gt;Compliance Issues&lt;/li&gt;
&lt;li&gt;Managing Cloud Costs&lt;/li&gt;
&lt;li&gt;Choosing the Right Cloud Provider&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Why Cloud Computing is Fascinating
&lt;/h3&gt;

&lt;p&gt;The session was not only informative but also inspiring. Chamith Kumarage shared real-world examples and case studies that illustrated the transformative power of cloud computing. From startups to large enterprises, the adoption of cloud technologies is driving innovation and efficiency across industries.&lt;/p&gt;

&lt;h3&gt;
  
  
  My Takeaways
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Broad Understanding&lt;/strong&gt;: I now have a better grasp of the fundamental concepts and models of cloud computing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Practical Insights&lt;/strong&gt;: The real-world examples provided practical insights into how cloud computing is applied in various scenarios.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Future Prospects&lt;/strong&gt;: The session sparked my interest in exploring cloud computing further, especially in the context of developing scalable and efficient solutions.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In conclusion, today's tech talk was a valuable experience that broadened my understanding of cloud computing technologies. I look forward to diving deeper into this fascinating field and applying the knowledge gained to future projects.&lt;/p&gt;

&lt;p&gt;If you have any thoughts or questions about cloud computing, feel free to leave a comment below. Let's continue the conversation!&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Join the discussion&lt;/strong&gt;: What are your thoughts on cloud computing? Have you had any experiences with it in your projects?&lt;/p&gt;




</description>
      <category>cloudcomputing</category>
    </item>
    <item>
      <title>Unleashing the Power of ArToPay : A User's Perspective</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Mon, 25 Dec 2023 10:30:55 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/unleashing-the-power-of-artopay-a-users-perspective-371n</link>
      <guid>https://dev.to/kavishka_dinajara_88/unleashing-the-power-of-artopay-a-users-perspective-371n</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F55ux0h68gvojv2xnp3ok.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F55ux0h68gvojv2xnp3ok.png" alt="Image description" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Introduction&lt;/p&gt;

&lt;p&gt;In the fast-paced digital age, finding a platform that seamlessly integrates into our daily lives is a game-changer. ArToPay has emerged as a beacon of innovation, offering a versatile solution that not only simplifies tasks but enhances overall efficiency. In this article, I delve into my personal experiences with ArToPay and explore the myriad benefits that make it an indispensable tool.&lt;/p&gt;

&lt;p&gt;User-Friendly Interface&lt;/p&gt;

&lt;p&gt;One of the standout features of ArToPay is its intuitive and user-friendly interface. Navigating through the platform is a breeze, making it accessible to users of all levels of tech proficiency. The clean design and straightforward layout ensure that users can harness the platform's full potential without any steep learning curve.&lt;/p&gt;

&lt;p&gt;Personal Efficiency Amplified&lt;/p&gt;

&lt;p&gt;From the moment I integrated ArToPay into my daily routine, I noticed a significant boost in personal efficiency. The platform's diverse functionalities streamline various tasks, allowing me to manage my time more effectively. Whether it's organizing schedules, collaborating on projects, or accessing valuable resources, ArToPay has become my go-to companion for productivity.&lt;/p&gt;

&lt;p&gt;Seamless Collaboration&lt;/p&gt;

&lt;p&gt;Collaboration is the backbone of success in many endeavors, and ArToPay excels in facilitating seamless teamwork. The platform's collaborative features enable real-time sharing and editing, fostering a dynamic and interactive work environment. Communication channels are robust, ensuring that every team member stays in the loop, ultimately leading to more cohesive and successful projects.&lt;/p&gt;

&lt;p&gt;Flexibility to Suit Your Needs&lt;/p&gt;

&lt;p&gt;The beauty of ArToPay lies in its adaptability to diverse needs. Whether you're a professional managing complex projects or an individual seeking to streamline personal tasks, the platform offers customizable solutions. The ability to tailor ArToPay to my specific requirements has made it an indispensable asset in both my professional and personal life.&lt;/p&gt;

&lt;p&gt;Security and Reliability&lt;/p&gt;

&lt;p&gt;In an era where data security is paramount, ArToPay stands as a fortress, ensuring the confidentiality and integrity of user information. The platform's robust security measures and reliable infrastructure instill confidence, allowing users to focus on their tasks without worrying about potential vulnerabilities.&lt;/p&gt;

&lt;p&gt;Conclusion&lt;/p&gt;

&lt;p&gt;In conclusion, my journey with ArToPay has been nothing short of transformative. The platform's commitment to user-friendly design, innovative tools, and unwavering security has not only simplified my daily tasks but has elevated my overall productivity. As a user, I wholeheartedly endorse ArToPay as a game-changing solution that caters to the diverse needs of individuals and teams alike.&lt;/p&gt;

&lt;p&gt;If you're ready to unlock a new realm of efficiency and collaboration, ArToPay is your answer. Embrace the future of productivity – I did, and the results speak for themselves.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Exploring the Power of APIs: My Journey at the Postman API101 Workshop</title>
      <dc:creator>Kavishka Dinajara</dc:creator>
      <pubDate>Sun, 17 Dec 2023 05:07:02 +0000</pubDate>
      <link>https://dev.to/kavishka_dinajara_88/exploring-the-power-of-apis-my-journey-at-the-postman-api101-workshop-4l3d</link>
      <guid>https://dev.to/kavishka_dinajara_88/exploring-the-power-of-apis-my-journey-at-the-postman-api101-workshop-4l3d</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8b4h2qqhdlm7cdj1iu0a.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8b4h2qqhdlm7cdj1iu0a.jpg" alt="Image description" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Postman API101 Workshop wasn't just informative; it was a revelation. As a student navigating the complexities of technology, this workshop emerged as a guiding light, imparting essential knowledge crucial for my academic and professional journey.&lt;/p&gt;

&lt;p&gt;The workshop commenced with a comprehensive introduction to APIs—an elucidation that made the seemingly intricate concept surprisingly accessible. The facilitator's clarity in explaining the fundamental aspects of APIs and the significance of Postman as a tool was commendable. The 'what' and 'why' behind APIs suddenly became crystal clear.&lt;/p&gt;

&lt;p&gt;Unveiling the myriad benefits of APIs felt like unlocking a treasure trove. Learning how APIs revolutionize businesses, facilitate seamless communication between systems, and pave the way for innovation left me in awe. Understanding how they enable us to access a vast array of services and information became a eureka moment.&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkg49muzmebzz13m8wzsf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkg49muzmebzz13m8wzsf.png" alt="Image description" width="800" height="385"&gt;&lt;/a&gt;&lt;br&gt;
The practical session, however, was the highlight. Engaging with the Joke API was not just fun but immensely insightful. Getting hands-on experience in manipulating data by adding, updating, and deleting jokes was empowering. Exploring the functionalities of GET, POST, PUT, and DELETE methods in real-time was a true 'aha' moment.&lt;/p&gt;

&lt;p&gt;Reflecting on the workshop, its significance for my academic and professional growth cannot be overstated. The hands-on experience solidified theoretical concepts, making them tangible. It wasn't merely a session; it was an expedition into the world of APIs—an expedition that has equipped me with invaluable skills for the future.&lt;/p&gt;

&lt;p&gt;This workshop was not just about learning; it was about experiencing the transformative power of technology firsthand. It's safe to say; it has etched a lasting impression on my journey toward becoming proficient in the tech landscape.&lt;/p&gt;

</description>
      <category>postmanapi</category>
      <category>postmanstudent</category>
    </item>
  </channel>
</rss>
