<?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:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by Hasitha Charaka 🔵 on Medium]]></title>
        <description><![CDATA[Stories by Hasitha Charaka 🔵 on Medium]]></description>
        <link>https://medium.com/@hasithacharaka?source=rss-14e9bee6a994------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/0*39ujWpfW__AWWK7F.</url>
            <title>Stories by Hasitha Charaka 🔵 on Medium</title>
            <link>https://medium.com/@hasithacharaka?source=rss-14e9bee6a994------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sun, 17 May 2026 09:21:17 GMT</lastBuildDate>
        <atom:link href="https://medium.com/@hasithacharaka/feed" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com" rel="hub"/>
        <item>
            <title><![CDATA[From Zapier to Scripts: How I Automated Monthly Invoice Emails for Free!]]></title>
            <link>https://hasithacharaka.medium.com/from-zapier-to-scripts-how-i-automated-monthly-invoice-emails-for-free-41cea5034e43?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/41cea5034e43</guid>
            <category><![CDATA[google]]></category>
            <category><![CDATA[zapier]]></category>
            <category><![CDATA[apps-script]]></category>
            <category><![CDATA[automation]]></category>
            <category><![CDATA[emai]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Sat, 25 Jan 2025 14:17:26 GMT</pubDate>
            <atom:updated>2025-01-26T11:38:15.986Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pysykPiLXBQ7IUcAfVo_Xw.png" /><figcaption>send email using google apps scripts</figcaption></figure><p>In the world of business, automating repetitive tasks can save time, reduce errors, and improve efficiency. One such task is sending monthly invoices to customers. Today, I’ll guide you through setting up an automation that sends personalized invoice emails directly from Google Sheets using Google Apps Script, with invoices stored in Google Drive. Here’s how you can achieve this and stay ahead of your administrative game.</p><h3>Why Automate Invoice Emails?</h3><p>Sending invoices manually can be time-consuming and prone to mistakes. Automating this process ensures:</p><ol><li>Consistency: Invoices are sent on time, every time.</li><li>Accuracy: Reduces the risk of missing a client or attaching the wrong file.</li><li>Efficiency: Frees up valuable time for you to focus on growing your business.</li></ol><h3>My Use Case: Transitioning from Zapier to Google Apps Script</h3><p>Initially, I used Zapier to automate my invoice email process. While Zapier is a fantastic tool for automation, I encountered a limitation: the free plan only allows two steps per Zap. This meant I couldn’t include additional steps for fetching and attaching invoices without upgrading to a paid plan.</p><p>To overcome this, I decided to switch to Google Sheets and Apps Script. This solution provided greater flexibility, cost-effectiveness, and the ability to fully customize the automation to suit my needs.</p><h3>What We’ll Use</h3><ul><li>Google Sheets: To manage customer data like names and email addresses.</li><li>Google Drive: To store invoice PDFs.</li><li>Google Apps Script: To write and execute the automation logic.</li></ul><h3>Step-by-Step Guide to Automation</h3><h3>Step 1: Prepare Your Google Sheet</h3><p>Create a Google Sheet with the following columns:</p><ul><li>Column A: Customer Name</li><li>Column B: Email Address</li></ul><p><em>Fill in the customer details as rows beneath these headers.</em></p><h3>Step 2: Organize Invoice PDFs in Google Drive</h3><p>(This is optional if you want to attached documents)</p><p>Create a folder in Google Drive with any name you want in here i use (<strong><em>Infortronix Invoice PDFs</em></strong>). Store your invoices in this folder, and name them in the following format: <em>INFORTRONIX-INVOICE-APRIL-2025.docx.pdf</em>(this name is used for me you can use any name)</p><h3>Step 3: Write the Apps Script</h3><h3>Step 3: Write the Apps Script</h3><ol><li>Open your Google Sheet.</li><li>Click on Extensions &gt; Apps Script.</li><li>Replace the contents of Code.gs with the following script:</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/557/1*Mt7eQfwfe7zO-enZV9ix7w.png" /><figcaption>app script</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PzBN-C93hcE_Z5DqixbMmQ.png" /><figcaption>apps script page</figcaption></figure><h3>Simple Explanation of the Code</h3><p>Here’s a brief and easy-to-understand explanation of the script:</p><ol><li>Fetch Google Sheet Data: The script reads customer names and email addresses from the Google Sheet.</li><li>Check the Date: The script only runs on the 25th of the month to match the schedule.</li><li>Access the Folder: It locates a specific folder in Google Drive (Infortronix Invoice PDFs) where all the invoices are stored.</li><li>Generate the Invoice Name: Based on the current month and year, the script generates the invoice file name (e.g., INFORTRONIX-INVOICE-APRIL-2025.docx.pdf).</li><li>Find the File: It searches for the invoice file in the folder.</li><li>Personalize the Email: The email body is customized with the customer’s name, the month, and the year.</li><li>Send the Email: Using the GmailApp service, the script sends an email to the customer with the invoice attached.</li><li>Logs for Debugging: The script logs success messages (or errors) for each email sent, helping you track and debug the process.</li></ol><pre>function sendMonthlyInvoices() {<br>  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();<br>  const data = sheet.getDataRange().getValues();<br>  const today = new Date();<br><br>  // Check if today is the 25th<br>  if (today.getDate() !== 25) return;<br><br>  const folderName = &quot;Infortronix Invoice PDFs&quot;; // Folder name where invoices are stored<br>  const folder = DriveApp.getFoldersByName(folderName).next();<br>  if (!folder) {<br>    console.error(`Folder &quot;${folderName}&quot; not found.`);<br>    return;<br>  }<br><br>  const month = today.toLocaleString(&quot;default&quot;, { month: &quot;long&quot; }).toUpperCase(); // e.g., &quot;APRIL&quot;<br>  const year = today.getFullYear(); // e.g., 2025<br>  const subject = &quot;Your Monthly Invoice&quot;;<br>  const emailBodyTemplate = &quot;Dear {{name}},\n\nPlease find your invoice for {{month}} {{year}} attached.\n\nThank you!&quot;;<br><br>  for (let i = 1; i &lt; data.length; i++) { // Start from row 2 (skip headers)<br>    const [customerName, email] = data[i];<br>    if (!email || !customerName) continue; // Skip rows with missing data<br><br>    // Build the expected invoice name<br>    const invoiceName = `INFORTRONIX-INVOICE-${month}-${year}.docx.pdf`;<br><br>    try {<br>      // Search for the file in the folder<br>      const files = folder.getFilesByName(invoiceName);<br><br>      if (!files.hasNext()) {<br>        console.warn(`Invoice &quot;${invoiceName}&quot; not found for ${customerName}.`);<br>        continue;<br>      }<br><br>      const file = files.next(); // Get the first file matching the name<br>      const blob = file.getBlob();<br><br>      // Personalize email body<br>      const body = emailBodyTemplate<br>        .replace(&quot;{{name}}&quot;, customerName)<br>        .replace(&quot;{{month}}&quot;, month)<br>        .replace(&quot;{{year}}&quot;, year);<br><br>      // Send email with the invoice attached<br>      GmailApp.sendEmail(email, subject, body, {<br>        attachments: [blob],<br>        name: &quot;Infortronix&quot;<br>      });<br><br>      console.log(`Invoice sent to ${email} for ${customerName}.`);<br>    } catch (e) {<br>      console.error(`Failed to send invoice to ${email}: ${e.message}`);<br>    }<br>  }<br>}</pre><h3>Step 4: Set Up a Monthly Trigger</h3><ol><li>In the Apps Script editor, click on the clock icon (Triggers).</li><li>Click + Add Trigger.</li><li>Configure the trigger as follows:</li><li>Save the trigger.</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FaAy6mMvFBsFf-SHGXwAaw.png" /><figcaption>trigger screen</figcaption></figure><h3>Step 5: Test the Automation</h3><ol><li>Add sample data to your Google Sheet.</li><li>Upload a sample invoice to your Google Drive folder with the correct naming convention.</li><li>Run the script manually by selecting sendMonthlyInvoices or <em>your function name</em> in the Apps Script editor and clicking the ▶️ Run button.</li><li>Check your Gmail and logs for confirmation.</li></ol><h3>The Result</h3><p>Once set up, this automation will:</p><ul><li>Retrieve customer details from your Google Sheet.</li><li>Fetch the correct invoice from your Google Drive.</li><li>Send a personalized email with the invoice attached to each customer on the 25th of every month.</li></ul><h3>Final Thoughts</h3><p>This solution demonstrates how simple tools like Google Sheets, Drive, and Apps Script can work together to automate tasks and enhance productivity. Switching from Zapier to this custom solution allowed me to overcome the limitations of the free plan while maintaining full control over the process. Whether you’re a small business owner or a freelancer, automating your invoice process can save you time and streamline your operations.</p><p>Are you ready to simplify your invoicing process? Let me know your thoughts or if you have any questions!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=41cea5034e43" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Unlocking Maximum Performance: A Guide to Azure Database for MySQL Optimization]]></title>
            <link>https://hasithacharaka.medium.com/unlocking-maximum-performance-a-guide-to-azure-database-for-mysql-optimization-f35139c77008?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/f35139c77008</guid>
            <category><![CDATA[azure]]></category>
            <category><![CDATA[mysql]]></category>
            <category><![CDATA[azure-db-for-mysql]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Mon, 29 Apr 2024 07:36:27 GMT</pubDate>
            <atom:updated>2024-06-28T04:01:13.488Z</atom:updated>
            <content:encoded><![CDATA[<p>As businesses increasingly migrate to cloud-based solutions, optimizing database performance becomes paramount for ensuring efficient operations and cost-effectiveness. Azure Database for MySQL offers a robust platform for hosting MySQL databases in the cloud, but to truly harness its potential, understanding and implementing performance optimization strategies is essential.</p><p>In this article, we’ll explore best practices and strategies for maximizing performance in Azure Database for MySQL, empowering you to enhance the efficiency and scalability of your cloud-based MySQL deployments.</p><p>Understanding Performance Metrics</p><p>Before diving into optimization techniques, it’s crucial to understand the key performance metrics to monitor:</p><ul><li>CPU Utilization: Indicates the percentage of CPU resources utilized by the database server. High CPU utilization can lead to performance degradation.</li><li>Memory Usage: Tracks the amount of memory consumed by the database server. Insufficient memory can result in slow query processing and increased disk I/O.</li><li>Disk I/O: Measures the rate of data read from or written to disk. Excessive disk I/O can indicate suboptimal query execution or storage configuration.</li><li>Query Throughput: Reflects the number of queries processed per unit of time. Monitoring query throughput helps identify workload patterns and performance bottlenecks.</li><li>Latency: Represents the time taken for a query to be executed and its results returned. High latency can indicate network or resource contention issues.</li></ul><p>Best Practices for Performance Optimization</p><ol><li>Database Design: Begin with a solid database schema design, emphasizing proper normalization and indexing to minimize query execution time.</li><li>Query Optimization: Optimize SQL queries by avoiding unnecessary joins, optimizing WHERE clauses, and leveraging appropriate indexes.</li><li>Configuration Tuning: Fine-tune database configuration parameters (e.g., innodb_buffer_pool_size, max_connections) based on workload characteristics and resource availability.</li><li>Scaling Options: Consider horizontal scaling with read replicas for read-heavy workloads and vertical scaling for resource-intensive applications.</li><li>Monitoring and Alerting: Set up proactive monitoring and alerting for critical performance metrics, enabling timely detection and resolution of issues.<br>Real-Life Examples</li><li>Let’s consider a real-life scenario where a retail e-commerce platform experiences slow page load times during peak traffic hours. By analyzing performance metrics in Azure Monitor, the team identifies high CPU utilization and disk I/O as the primary bottlenecks. Through query optimization and scaling out with read replicas, they successfully mitigate performance issues and ensure a seamless shopping experience for customers.</li><li>Conclusion</li><li>Optimizing performance in Azure Database for MySQL is not a one-time task but an ongoing journey. By following best practices, leveraging scaling options, and adopting a proactive monitoring approach, organizations can unlock the full potential of their MySQL deployments in the Azure cloud.</li><li>Call to Action</li><li>Are you ready to optimize your Azure Database for MySQL deployments for maximum performance? Join the conversation on LinkedIn and share your insights and experiences in the comments below. Let’s empower each other to achieve optimal performance in the cloud era!</li></ol><p><strong>#AzureDBforMySQL</strong></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=f35139c77008" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Mastering Automation: Adding Cron Jobs to Azure App Service for Linux]]></title>
            <link>https://hasithacharaka.medium.com/mastering-automation-adding-cron-jobs-to-azure-app-service-for-linux-3bd02e0b55d2?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/3bd02e0b55d2</guid>
            <category><![CDATA[azure-devops]]></category>
            <category><![CDATA[cronjob-scheduler]]></category>
            <category><![CDATA[linux]]></category>
            <category><![CDATA[linux-tutorial]]></category>
            <category><![CDATA[azure]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Fri, 18 Aug 2023 07:34:38 GMT</pubDate>
            <atom:updated>2023-08-22T08:35:22.760Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mugYGiGB9ZmlEsTjw0Qu6g.png" /><figcaption>azure tux</figcaption></figure><p>Automating routine tasks is a key aspect of efficient application management, and cron jobs play a pivotal role in achieving this automation. When combined with the flexibility of Azure App Service for Linux, developers can streamline processes and enhance the performance of their applications. In this guide, we will explore the steps to add and manage cron jobs in Azure App Service for Linux, ensuring seamless automation and improved application management.</p><h4>Accessing SSH in Azure App Service</h4><p>Before we delve into adding cron jobs, it’s important to be familiar with how to access the SSH (Secure Shell) terminal within Azure App Service. SSH provides a secure way to connect to your application’s virtual machine, granting you direct command-line access. Here’s how you can access SSH for your Azure App Service:</p><ol><li>Azure Portal Access:</li></ol><ul><li>Log in to the Azure portal (<a href="https://portal.azure.com/">https://portal.azure.com</a>).</li><li>Navigate to your Azure App Service instance.</li><li>In the left-hand menu, under the “Development Tools” section, click on “SSH.”</li></ul><p>2.Using Azure CLI:</p><ul><li>Open your command-line interface.</li><li>Log in to your Azure account using az login if you haven&#39;t already.</li><li>Use the following command to open an SSH session:</li></ul><pre>az webapp ssh --resource-group &lt;resource-group-name&gt; --name &lt;app-name&gt;</pre><p>Once you’re connected to the SSH terminal, you’ll have direct access to your application’s file system and command line, allowing you to perform various tasks, including adding and managing cron jobs.</p><h4>Installing and Configuring Cron</h4><p>Before diving into adding cron jobs, ensure that the cron package is installed on your Linux system. Depending on your distribution, use the relevant package manager to install the cron package. For instance, on Debian/Ubuntu-based systems, execute the following command:</p><pre>apt-get install cron</pre><blockquote>(Note: In an Azure environment, you might not need to use “<em>sudo</em>” before the command.)</blockquote><p>For Red Hat/CentOS-based systems, the command would be:</p><pre>yum install cronie </pre><p>Next, verify the path and permissions of the cron binary:</p><pre>which cron</pre><h4>Restart the cron service after installing or making changes:</h4><ul><li>On systemd-based systems:</li></ul><pre>sudo systemctl restart cron</pre><ul><li>On SysVinit-based systems:</li></ul><pre>sudo service cron restart</pre><h4>Adding Cron Jobs</h4><ol><li>Open Crontab for Editing: Use the following command to edit the crontab:</li></ol><pre>crontab -e</pre><p>2. Add a Cron Job:</p><pre>minute hour day month day_of_week command_to_run</pre><p>For example, to run a script named myscript.sh located in /home/site/wwwroot every day at 2:30 PM:</p><pre>30 14 * * * /home/site/wwwroot/myscript.sh</pre><p>3. Verify the Cron Job:</p><p>Confirm that the cron job is added by listing the crontab entries:</p><pre>crontab -l</pre><h4>Adding API Calls to Cron Jobs:</h4><p>Extend cron jobs by incorporating API calls. Open the crontab for editing:</p><pre>crontab -e</pre><p>Include the API call within the crontab to execute desired actions, such as making HTTP requests:</p><pre>* * * * * curl -s http://your-api-url.com/endpoint &gt;&gt; /home/site/wwwroot/cron-api.log 2&gt;&amp;1</pre><h4>Viewing Current Running Cron Jobs</h4><pre>crontab -l</pre><p>you will get following output</p><pre># Example Crontab - List of Scheduled Tasks<br><br># Minute    Hour    Day     Month    Day of Week    Command<br># ---------------------------------------------------------<br>30         14      *       *        *              /home/site/wwwroot/myscript.sh<br>0          2       *       *        5              /home/site/wwwroot/backup.sh<br>*/15       *       *       *        *              /home/site/wwwroot/data_cleanup.sh</pre><h3>*Note*</h3><blockquote>Any data outsdie /home is not persisted</blockquote><p>Therefore, a possible solution in this case is to launch a script at the start of the application, so that after each restart the cron service is installed and the work necessary to execute the Laravel scheduller tasks is created. I’ll explain what has worked for me for my PHP + Laravel application hosted on Azure Linux Webapp:</p><ol><li>Create the start script /home/startup.sh:</li></ol><pre>  GNU nano 5.4                                                                                        startup.sh                                                                                                  <br> 1 #!/bin/bash<br> 2<br> 3 # Install cron<br> 4 apt-get update -qq<br> 5 apt-get install cron -yqq<br> 6<br> 7 # Add a cron job to call a URL every hour<br> 8 (crontab -l ; echo &quot;* * * * * curl -s https://pmc-api-dev-app.azurewebsites.net/api/test-cron  &gt;&gt; /home/site/wwwroot/cron-api.log 2&gt;&amp;1&quot;) | crontab -<br> 9<br>10 # Start the cron service<br>11 service cron start<br>12</pre><p><strong>2.</strong> Set ‘/home/startup.sh’ as ‘startup command’ in our azure panel</p><p><strong>your app-service -&gt; configuration -&gt; general settings</strong></p><p><strong>3.</strong> We will have to restart our application for the startup script to load</p><p><strong>Conclusion</strong></p><p>Integrating cron jobs into Azure App Service for Linux empowers developers to automate tasks effectively, enhancing application management and performance. By following these steps, you can seamlessly add, configure, and manage cron jobs within your Azure environment, ensuring consistent and reliable task execution. Embrace the power of automation and take control of your application’s routine processes with the combination of cron jobs and Azure App Service for Linux.</p><blockquote>May your journey of mastering cron jobs and Azure App Service lead to more streamlined operations, improved efficiency, and greater success in your development endeavors. Happy automating!</blockquote><p>Happy Coding ❤</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=3bd02e0b55d2" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[INCREASE MAX UPLOAD FILE SIE AZURE NGNX]]></title>
            <link>https://hasithacharaka.medium.com/increase-max-upload-file-sie-azure-ngnx-a2e186425a30?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/a2e186425a30</guid>
            <category><![CDATA[nginx]]></category>
            <category><![CDATA[laravel]]></category>
            <category><![CDATA[azure]]></category>
            <category><![CDATA[php]]></category>
            <category><![CDATA[azure-devops]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Thu, 26 Jan 2023 07:27:20 GMT</pubDate>
            <atom:updated>2024-06-28T04:01:33.758Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*w_ZbmhjUfaupvHA-2FHtqg.jpeg" /><figcaption>microsoft Azure</figcaption></figure><h3>INCREASE MAX UPLOAD FILE SIZE AZURE NGINX</h3><p>Issue Analysis: <br>I have made some tests on my end, and you could refer to my steps on <br>increasing the upload file size of my App Service:</p><p>Go to the SSH console of the App Service</p><p>Go to <strong><em>site/wwwroot folder</em></strong><em>.</em><strong><em>(Laravel user go to public folder)</em></strong>We will use the command</p><p><strong><em>echo “&lt;?php phpinfo();”&gt;&gt;info.php</em></strong></p><p>to create a PHP info page. You could skip this <br>step if you already have one.</p><p>Navigate to <strong><em>https://&lt;sitename&gt;.azurewebsites.net/info.php</em></strong>, and we <br>could see the <strong><em>max upload file size is 2M</em></strong></p><blockquote>Now we could go back to SSH console and go back to home/site <br>directory. Use command <strong><em>mkdir ini</em></strong> to create a folder. Go to the folder <br>and use command <strong><em>echo</em></strong> <strong><em>“upload_max_filesize=50M” &gt;&gt; extensions.ini</em></strong> This <br>will create a file and write to it. Use command <strong><em>cat extensions.ini</em></strong> and <br>confirmed the write operation is successful. In this way, we created a <br>setting and configured the <strong><em>max_file_upload_size to 50M</em></strong></blockquote><ul><li>Note if you want to increse <strong><em>post_max_size</em></strong> also add same extensions.ini*</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/330/1*Q-uGx4pJkgbEvTW0Epod3w.png" /><figcaption>post_max_size</figcaption></figure><p>We’ll now need to go to the Azure Portal and add an Application <br>Setting to scan the “ini” directory that we just created to apply <br>the change for upload_max_filesize. In order to do that, you could <br>navigate to the _configuration_ blade of your App Service and add a new <br>application setting. For the App Setting Name, enter <br><strong><em>“PHP_INI_SCAN_DIR”</em></strong>. For the value, enter <br><strong><em>“/usr/local/etc/php/conf.d:/home/site/ini”</em></strong>. Please note that <br>saving application setting change will restart your App Service</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vn5fWY5kGa-dOb89soO4Lw.png" /><figcaption>azure configuration</figcaption></figure><p>Navigate to <strong><em>https://&lt;sitename&gt;.azurewebsites.net/info.php</em></strong>, and we <br>could see the<em> max upload file size has increase to 50M</em></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rS5ZOVcP5JkwOK99cE6oBQ.png" /><figcaption>phpinfo.php</figcaption></figure><p>Remove the info.php page once you’re done using the page.</p><blockquote><strong><em>remove command : rm -r filename</em></strong></blockquote><h3><strong><em>If you enjoy my content and would like to support me, you can do so through Buy Me a Coffee. Your support means the world to me and will help me to continue creating and improving the quality of my work. By buying me a coffee, you’ll be providing me with the motivation and resources to keep pursuing my passion and bringing you the content that you love. Your generosity will help cover the costs of hosting, equipment, and other expenses associated with my work. Thank you so much for considering supporting me through Buy Me a Coffee, and for being a part of my community!</em></strong></h3><p><a href="https://www.buymeacoffee.com/hasithacharaka">https://www.buymeacoffee.com/hasithacharaka</a></p><p><strong>happy coding</strong> ❤</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=a2e186425a30" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to host static website on firebase 100% free]]></title>
            <description><![CDATA[<div class="medium-feed-item"><p class="medium-feed-image"><a href="https://hasithacharaka.medium.com/how-to-host-static-website-on-firebase-100-free-c29ccfc93f80?source=rss-14e9bee6a994------2"><img src="https://cdn-images-1.medium.com/max/1024/1*nnkO_PKs2YQjz6g5hYYk7w.png" width="1024"></a></p><p class="medium-feed-snippet">What is Firebase</p><p class="medium-feed-link"><a href="https://hasithacharaka.medium.com/how-to-host-static-website-on-firebase-100-free-c29ccfc93f80?source=rss-14e9bee6a994------2">Continue reading on Medium »</a></p></div>]]></description>
            <link>https://hasithacharaka.medium.com/how-to-host-static-website-on-firebase-100-free-c29ccfc93f80?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/c29ccfc93f80</guid>
            <category><![CDATA[html]]></category>
            <category><![CDATA[firebase-cloud-functions]]></category>
            <category><![CDATA[firebase]]></category>
            <category><![CDATA[cloud-services]]></category>
            <category><![CDATA[javascript]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Sun, 22 Aug 2021 18:24:15 GMT</pubDate>
            <atom:updated>2023-02-14T17:14:10.349Z</atom:updated>
        </item>
        <item>
            <title><![CDATA[Moving From Php Strom to VS Code]]></title>
            <description><![CDATA[<div class="medium-feed-item"><p class="medium-feed-image"><a href="https://hasithacharaka.medium.com/moving-from-php-strom-to-vs-code-fd23b9545ce7?source=rss-14e9bee6a994------2"><img src="https://cdn-images-1.medium.com/max/600/1*FBEhydIqnuh6LAucftLLYA.jpeg" width="600"></a></p><p class="medium-feed-snippet">I have been used Phpstrom from last 4 years as web developer. i love to used Phpstrom but i saw some drawbacks like</p><p class="medium-feed-link"><a href="https://hasithacharaka.medium.com/moving-from-php-strom-to-vs-code-fd23b9545ce7?source=rss-14e9bee6a994------2">Continue reading on Medium »</a></p></div>]]></description>
            <link>https://hasithacharaka.medium.com/moving-from-php-strom-to-vs-code-fd23b9545ce7?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/fd23b9545ce7</guid>
            <category><![CDATA[javascript]]></category>
            <category><![CDATA[php]]></category>
            <category><![CDATA[vscode]]></category>
            <category><![CDATA[html]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Fri, 09 Jul 2021 19:42:37 GMT</pubDate>
            <atom:updated>2023-02-14T17:14:37.531Z</atom:updated>
        </item>
        <item>
            <title><![CDATA[Google ReCAPTCHA server side validation-PHP]]></title>
            <link>https://hasithacharaka.medium.com/google-recaptcha-server-side-validation-php-822398062a98?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/822398062a98</guid>
            <category><![CDATA[php]]></category>
            <category><![CDATA[recaptcha]]></category>
            <category><![CDATA[html]]></category>
            <category><![CDATA[javascript]]></category>
            <category><![CDATA[google]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Fri, 30 Oct 2020 14:20:25 GMT</pubDate>
            <atom:updated>2023-02-14T17:15:01.676Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/780/1*mDoSP8KrqlVgTW5vSYCu8Q.png" /><figcaption>reCAPTCHA</figcaption></figure><p>here is small process about how to validate HTML form using google recaptcha with server side validation</p><h3>WHAT IS reCAPTCHA ?</h3><p>reCAPTCHA is a free service that protect your site from spam and abuse.It used advanced risk analysis techniques to tell humans and bots apart.</p><h3>How to Setup reCAPTCHA ?</h3><p>first of all you need google account for use this service i assume you already own it.</p><blockquote>the go to the this link :- <a href="https://www.google.com/recaptcha/admin">https://www.google.com/recaptcha/admin</a></blockquote><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zi8L5wp-soQ2lZ5wXem4XQ.png" /></figure><p>then click on the <strong>“+” </strong>button it will show below form insert</p><ol><li>label name</li><li>reCAPTCHA type here i used <strong>reCAPTCHA v2 -&gt; “I’m not a robot” Checkbox</strong></li><li>add domain (if you using local host just put localhost)</li><li>add select the owner &amp; accept the T&amp;C</li><li>submit the form</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*amKjv1xt4VyO5zU88dnFeA.png" /></figure><p>here is my form</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qjTzXJu_kf-b7QI7sb3D_Q.png" /></figure><p>after submit you will receive <strong><em>SITE KEY</em></strong> and <strong><em>SECRET KEY</em></strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*651gl9HdBTeqyMgwYQg9LQ.png" /></figure><p>copy those keys here is the sample html form and validation php script.</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/10d62f33ca92556a432eb87cdfce232d/href">https://medium.com/media/10d62f33ca92556a432eb87cdfce232d/href</a></iframe><pre>&lt;?php<br>    $email; $comment; $captcha;<br><br>    if(isset($_POST[&#39;email&#39;]))<br>        $email=$_POST[&#39;email&#39;];<br>    if(isset($_POST[&#39;comment&#39;]))<br>        $comment=$_POST[&#39;comment&#39;];<br>    if(isset($_POST[&#39;g-recaptcha-response&#39;]))<br>        $captcha=$_POST[&#39;g-recaptcha-response&#39;];<br><br>    if(!$captcha){<br>        echo &#39;&lt;h2&gt;Please check the the captcha form.&lt;/h2&gt;&#39;;<br>        exit;<br>    }<br><br>    $response = json_decode(file_get_contents(&quot;https://www.google.com/recaptcha/api/siteverify?secret=YOUR SECRET KEY&amp;response=&quot;.$captcha.&quot;&amp;remoteip=&quot;.$_SERVER[&#39;REMOTE_ADDR&#39;]), true);<br>    if($response[&#39;success&#39;] == false)<br>    {<br>        echo &#39;&lt;h2&gt;You are spammer ! Get the @$%K out&lt;/h2&gt;&#39;;<br>    }<br>    else<br>    {<br>        echo &#39;&lt;h2&gt;Thanks for posting comment.&lt;/h2&gt;&#39;;<br>    }<br>?&gt;</pre><p>after replacing those keys all set now we have to check if it is working .</p><p>here is form output</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/414/1*77T5obSLuhw7Hmuwhr9duA.png" /></figure><p>fill the input fields and post it if it is success you will see message <strong>“ Thanks for posting comment.”</strong></p><p>if not something went wrong check your secret-key &amp; site-key are place correctly.</p><p>more info :- <a href="https://developers.google.com/recaptcha/intro">https://developers.google.com/recaptcha/intro</a></p><p>If you enjoy my content and would like to support me, you can do so through Buy Me a Coffee. Your support means the world to me and will help me to continue creating and improving the quality of my work. By buying me a coffee, you’ll be providing me with the motivation and resources to keep pursuing my passion and bringing you the content that you love. Your generosity will help cover the costs of hosting, equipment, and other expenses associated with my work. Thank you so much for considering supporting me through Buy Me a Coffee, and for being a part of my community!<a href="https://www.buymeacoffee.com/hasithacharaka">https://www.buymeacoffee.com/hasithacharaka</a></p><p>happy Coding ❤</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=822398062a98" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Best Alternatives For SourceTree and Phpmyadmin on linux]]></title>
            <link>https://hasithacharaka.medium.com/best-alternatives-for-sourcetree-and-phpmyadmin-on-linux-9a63bae7b916?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/9a63bae7b916</guid>
            <category><![CDATA[mysql]]></category>
            <category><![CDATA[git]]></category>
            <category><![CDATA[bitbucket]]></category>
            <category><![CDATA[php]]></category>
            <category><![CDATA[sourcetree]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Sat, 11 Jul 2020 18:08:13 GMT</pubDate>
            <atom:updated>2023-02-14T17:16:14.323Z</atom:updated>
            <content:encoded><![CDATA[<p>Today i’m working with some projects on windows environment and i use sourcetree as version controller and navicat(cracked version) for database then i want to move my working environment to linux(mint 19) and there is no sourcetree support on linux and i found two alternative for sourcetree and used one of them</p><ol><li><a href="https://www.syntevo.com/smartgit/">smartGit</a> (commercial and non commercial)</li><li><a href="https://www.collab.net/downloads/giteye">Giteye</a> (free)</li></ol><p>I used smartGit to continue my work</p><p>You can Download it from <a href="https://www.syntevo.com/smartgit/download/">https://www.syntevo.com/smartgit/download/</a> or can also found it on SoftwareManger</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kh1cO2kEzLUgUlGVZugt3Q.png" /><figcaption>on web</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/797/1*dv2oPMg4i6sJg7ckDUrGDQ.png" /><figcaption>on software manager</figcaption></figure><p>once you install it also easy as sourcetree setup it shows below message box either you can create new repository or clone the existing repository.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/504/1*SAGyqzhKnKTyz6O--P_KiA.png" /></figure><p>when you click the clone existing repository you can clone repository using url</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/664/1*LqVgfklyPGc29Avn5I97Dg.png" /><figcaption>clone url</figcaption></figure><p>past your clone url and click next and choose which branch you want to checkout from cloud and next</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/669/1*WzErly1yzbNKtOMqXa84HA.png" /></figure><p>last section ask where you want to store you file in local directory</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/666/1*l4AzyCfqstBHDfx7cZuanA.png" /></figure><p>select path and finish it may take while to finish the process and after that you can see your repository and it is worked same as source tree</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rXAcjUOdJ5kAu6gsqovhrA.png" /></figure><p><strong>Alternative for PhpMyAdmin</strong></p><p>this is simple file that full-featured database tool for <strong><em>MySQL, MariaDB, PostgreSQL, SQLite, MS SQL, Oracle, Firebird, SimpleDB, Elasticsearch and MongoDB.</em></strong>it called <a href="https://www.adminer.org/">Adminer</a></p><p>you can easily download file</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mBkHEkxz4piP19DgPy5Wkg.png" /></figure><p>and go to your download location (if you are using terminal need super user privileges for future action type “<strong>sudo su” </strong>in your terminal and get superuser privilages.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/656/1*ecI_weujW39ZJ4wTgQ-FCA.png" /></figure><p>if you are using terminal type<strong> ls -l </strong>to view files in your current location and find the file name adminer-x.php</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/650/1*0eC2v4lWrKS8EBeC-aw1LQ.png" /></figure><p>and type</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/9c57fcb9f64205f6776236cdbce66355/href">https://medium.com/media/9c57fcb9f64205f6776236cdbce66355/href</a></iframe><p>once you done the work we are ready to go</p><p>open your web browser and type <a href="http://127.0.0.1/adminer.php">http://127.0.0.1/adminer.php</a></p><p>it will show like this</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wZY4wZztdDMPImxEYIChIQ.png" /><figcaption>adminer</figcaption></figure><p>type your user name and password hit the login</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TDsXNtFL3Q3VB2cSn1Tq0Q.png" /></figure><p>now you can perform the all the db action through this</p><p>If you found a better solution then we can help each other out by sharing as many reference we can .</p><p>If you enjoy my content and would like to support me, you can do so through Buy Me a Coffee. Your support means the world to me and will help me to continue creating and improving the quality of my work. By buying me a coffee, you’ll be providing me with the motivation and resources to keep pursuing my passion and bringing you the content that you love. Your generosity will help cover the costs of hosting, equipment, and other expenses associated with my work. Thank you so much for considering supporting me through Buy Me a Coffee, and for being a part of my community!<br><a href="https://www.buymeacoffee.com/hasithacharaka">https://www.buymeacoffee.com/hasithacharaka</a></p><p>happy coding ❤</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=9a63bae7b916" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to Get Free Domain and point to Github Pages using Cloudflare]]></title>
            <link>https://hasithacharaka.medium.com/how-to-get-free-domain-and-point-to-github-pages-using-cloudflare-613511f28bd4?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/613511f28bd4</guid>
            <category><![CDATA[github]]></category>
            <category><![CDATA[free-web-hosting]]></category>
            <category><![CDATA[cloudflare]]></category>
            <category><![CDATA[free-domain]]></category>
            <category><![CDATA[freenom]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Wed, 01 Jul 2020 17:22:03 GMT</pubDate>
            <atom:updated>2023-02-14T17:16:44.171Z</atom:updated>
            <content:encoded><![CDATA[<p>How to Get Free Domain and point to Github Pages using Cloudflare</p><p>Freenom is domain register that provide unlimited free domains that last for one year. The only limit is that you can only get domains ending in .tk, .ml, .ga, .cf, or .gq.</p><p><strong>Step 1</strong> : Go to <a href="https://www.freenom.com/">https://www.freenom.com</a></p><p><strong>Step 2 </strong>: Check Availability</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4P1BOyj_954c7FyI5Czs8g.png" /></figure><p><strong>Step 3</strong> :if the domain name is available click <strong>Get it now!</strong> and the <strong>Checkout</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vhplHg1yslWft4lsLHHm4g.png" /></figure><p><strong>Step 4</strong> : Set the period to 12 months the click <strong>Continue</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Bvwun21wjs18bDLUKvVywA.png" /></figure><p><strong>Step 5</strong>:check <strong>I have read and agree to the Terms &amp; Conditions</strong>. Then click <strong>Complete Order</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vxv8RBBo9TEc03N8oYxNOw.png" /></figure><p>Now we have Done the Domain Purchasing Part Lets move to Cloudflare Part</p><h3>Add Your Domain to Cloudflare</h3><p><strong>Step 1</strong> :Go to <a href="https://www.cloudflare.com">https://www.cloudflare.com</a> create account</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MLlBiNBA3_5M0kAaZSqzCA.png" /></figure><p><strong>Step 2:</strong> Click <strong>Add a site</strong> in Account Dashboard and Put Your Domain.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cdhw4pZtWM4NushfCILbAw.png" /></figure><p><strong>Step 3</strong>: Select Free palan and Continue</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N13hcJQqK367j1TG5gnTog.png" /></figure><p><strong>Step 4</strong>: wait till the cloudflare checking the exsiting DNS record and click <strong>Continue</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LG8Nsfkin4gHptoROdqHmQ.png" /></figure><p><strong>Step 5:</strong> Cloudflare will give you two nameservers that you need to set in Freenom.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1019/1*RqftyIn_vlj11PE3myymnw.png" /></figure><p><strong>Step 6</strong>:Go back to Freenom Click Service &gt; My Domains</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0GJl_e4fBsiHntWC9RdGpg.png" /></figure><p><strong>Step 7:</strong> Select Your Domain and Click ManageDomain</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*e0CxoEs0ZWdDtsWnLI0ipw.png" /></figure><p><strong>Step 8</strong>:Click Management Tools &gt; nameservers</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-YxN8ku0nZUcI4kVOkB4Iw.png" /></figure><p><strong>Step 9 </strong>: select “use custom nameservers”</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pQKD_udJYgk9rkLnujNuDA.png" /></figure><p><strong>Step 10 </strong>:add the cloudflare nameservers to custom name servers</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MgciqvGDum6iunZRN_xJNA.png" /></figure><h3><em>Add Custom Domain to Githubpages</em></h3><p>In previous story i created about how to create github page as website: <a href="https://medium.com/@hasithacharaka/host-your-portfolio-100-free-a9ebe1494669">click here</a></p><p>i assume that already have github page</p><p>go to github and select the repo you want to add custom domain</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_gIMZ2j2ptNBkvE5sg1Abg.png" /></figure><p>and select settings</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q2zzJU66sW4WhL4UvbhuRg.png" /></figure><p>and scroll to bottom you will see section “custom domain”</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DzT1Jv7g2d1DL83fBRfkAQ.png" /></figure><p>add your domain and save</p><p>Now all are Set It will take a while, so please be patient.</p><p>After Done You can enter your Domain name on browser and check</p><p>If you enjoy my content and would like to support me, you can do so through Buy Me a Coffee. Your support means the world to me and will help me to continue creating and improving the quality of my work. By buying me a coffee, you’ll be providing me with the motivation and resources to keep pursuing my passion and bringing you the content that you love. Your generosity will help cover the costs of hosting, equipment, and other expenses associated with my work. Thank you so much for considering supporting me through Buy Me a Coffee, and for being a part of my community!<br><a href="https://www.buymeacoffee.com/hasithacharaka">https://www.buymeacoffee.com/hasithacharaka</a></p><p>Enjoy your Free Domain ❤</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=613511f28bd4" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to Create Angular Custom Pipe]]></title>
            <link>https://hasithacharaka.medium.com/how-to-create-angular-custom-pipe-b445dad2bb66?source=rss-14e9bee6a994------2</link>
            <guid isPermaLink="false">https://medium.com/p/b445dad2bb66</guid>
            <category><![CDATA[angular]]></category>
            <category><![CDATA[typescript]]></category>
            <category><![CDATA[pipeline]]></category>
            <category><![CDATA[web-development]]></category>
            <dc:creator><![CDATA[Hasitha Charaka ]]></dc:creator>
            <pubDate>Thu, 18 Jun 2020 18:03:10 GMT</pubDate>
            <atom:updated>2020-06-18T18:03:10.407Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/830/0*6QMOGIkiywbJZUfN.png" /><figcaption><a href="https://miro.medium.com/max/830/1*-XSh-XXT3TWGcRaeFs446w.png">https://miro.medium.com/max/830/1*-XSh-XXT3TWGcRaeFs446w.png</a></figcaption></figure><h3>What is Pipe ?</h3><p>Angular pipes are a way to transform array,string or integer to format and display in same time as an example</p><pre>&lt;h1&gt;{{ &quot;CONVERT ALL LETTER IN TO LOWERCASE&quot;| lowercase}}&lt;/h1&gt;</pre><p>and the output is</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZG9pxtHf9K49uVlabC-JBg.png" /><figcaption>loweercase</figcaption></figure><p>angular have some in build-pipes like</p><p>Datepipe , CurrencyPipe, AsyncPipe etc..</p><p>those pipes are use to modify data before displaying it ,</p><p>Here we will create some custom pipe the method is same for all angular 4 and up versions.</p><h3>Create new angular Application</h3><p>First create new application and navigate to the root folder</p><pre><strong>linux@hasi-host</strong>:<strong>~</strong>$ ng new test-pipe<br><strong>linux@hasi-host</strong>:<strong>~</strong>$ cd test-pipe</pre><p>next create pipes folder inside app folder</p><pre><strong>linux@hasi-host</strong>:<strong>~/projects</strong>$ cd test-pipe/src/app<br><strong>linux@hasi-host</strong>:<strong>~/projects/test-pipe/src/app</strong>$ mkdir pipes</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/604/1*-pU90qVeGdIL0UpLMXEgGQ.png" /><figcaption>mkdir pipes</figcaption></figure><p>now navigate inside pipe folder and create pipe using below command</p><pre><strong>linux@hasi-host</strong>:<strong>~/projects/test-pipe/src/app</strong>$ cd pipes</pre><pre><strong>linux@hasi-host</strong>:<strong>~/projects/test-pipe/src/app/pipes</strong>$ ng g pipe user-title</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/654/1*E85fq1gs-4YAVZWh6agFcA.png" /><figcaption>output</figcaption></figure><p>open user-title.pipe.ts and add below code</p><pre>import { <em>Pipe</em>, PipeTransform } from &#39;@angular/core&#39;;<br><br>@Pipe({<br>  name: &#39;userTitle&#39;<br>})<br>export class UserTitlePipe implements PipeTransform {<br><br>  transform(name: string, gender: string,status:string): string {r<br>    <br>    if(gender == &quot;M&quot;){ //gender male<br>      return  &quot;Mr&quot; + name;<br>    }else if(gender == &quot;F&quot; &amp;&amp; status == &quot;S&quot;){ //gender female not married<br>      return &quot;Miss&quot; + name;<br>    }else if(gender ==&quot;F&quot; &amp;&amp; status == &quot;M&quot;){ //gender female  married<br>      return &quot;Mrs&quot; + name;<br>    }else{<br>      return  null;<br>    }<br>  }<br><br>}</pre><p>here we add three parameters name,gender,status</p><p>update app module.ts as below</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/603/1*rZ0FP4szef5t53v3G-pApA.png" /><figcaption>app-module.ts</figcaption></figure><p>add pipe to providers</p><pre>providers: [UserTitlePipe],</pre><p>app.component.ts update like this</p><pre>user = [{<br>  name: &#39;Hasitha&#39;,<br>  gender:&#39;M&#39;,<br>  status:&#39;S&#39;,<br>  salary:&#39;100&#39;,<br>},<br>  {<br>    name: &#39;Jenny&#39;,<br>    gender:&#39;F&#39;,<br>    status:&#39;S&#39;,<br>    salary:&#39;150&#39;,<br>  },<br>  {<br>    name: &#39;Tina&#39;,<br>    gender:&#39;F&#39;,<br>    status:&#39;M&#39;,<br>    salary:&#39;200&#39;,<br>  },]</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/917/1*NoRHLFsQhfsNPueUNV39cw.png" /><figcaption>app component</figcaption></figure><p>and add below code into your app.component.html</p><pre>&lt;table class<strong>=&quot;table table-bordered&quot;</strong>&gt;<br>  &lt;thead&gt;<br>  &lt;tr&gt;<br>    &lt;th&gt;<strong>Name</strong>&lt;/th&gt;<br>    &lt;th&gt;<strong>Gender</strong>&lt;/th&gt;<br>    &lt;th&gt;<strong>Status</strong>&lt;/th&gt;<br>    &lt;th&gt;<strong>Salary</strong>&lt;/th&gt;<br>  &lt;/tr&gt;<br>  &lt;/thead&gt;<br>  &lt;tbody&gt;<br>  &lt;tr <em>*ngFor</em><strong>=&quot;</strong>let <em>user </em>of users<strong>&quot;</strong>&gt;<br>    &lt;td&gt;{{<em>user</em>.name}}&lt;/td&gt;<br>    &lt;td&gt;{{<em>user</em>.gender}}&lt;/td&gt;<br>    &lt;td&gt;{{<em>user</em>.status}}&lt;/td&gt;<br>    &lt;td&gt;{{<em>user</em>.salary}}&lt;/td&gt;<br>  &lt;/tr&gt;<br>  &lt;/tbody&gt;<br>&lt;/table&gt;</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x9HEIWXzn71cf8_Fm-9icg.png" /><figcaption>component.html</figcaption></figure><p>now the out will be something like this</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-Fs4pcPs4GA5TcxgIv6fZA.png" /><figcaption>output</figcaption></figure><p>after that now we add the pipe in to our app.component.html</p><p>here is code</p><pre>&lt;table class<strong>=&quot;table table-bordered&quot;</strong>&gt;<br>  &lt;thead&gt;<br>  &lt;tr&gt;<br>    &lt;th&gt;<strong>Name</strong>&lt;/th&gt;<br>    &lt;th&gt;<strong>Gender</strong>&lt;/th&gt;<br>    &lt;th&gt;<strong>Status</strong>&lt;/th&gt;<br>    &lt;th&gt;<strong>Salary</strong>&lt;/th&gt;<br>  &lt;/tr&gt;<br>  &lt;/thead&gt;<br>  &lt;tbody&gt;<br>  &lt;tr <em>*ngFor</em><strong>=&quot;</strong>let <em>user </em>of users<strong>&quot;</strong>&gt;<br>    &lt;td&gt;{{ <em>user</em>.name|userTitle:<em>user</em>.gender:<em>user</em>.status}}&lt;/td&gt;<br>    &lt;td&gt;{{<em>user</em>.gender}}&lt;/td&gt;<br>    &lt;td&gt;{{<em>user</em>.status}}&lt;/td&gt;<br>    &lt;td&gt;{{<em>user</em>.salary}}&lt;/td&gt;<br>  &lt;/tr&gt;<br>  &lt;/tbody&gt;<br>&lt;/table&gt;</pre><p>pipe add using “|” and first argument is user.name second one is gender and third one is status like we declared in our user title.pipe</p><pre>td&gt;{{ <em>user</em>.name|userTitle:<em>user</em>.gender:<em>user</em>.status}}&lt;/td&gt;</pre><p>out put would be like this</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/783/1*eIr_zi8f-PgdXC9aByrP_Q.png" /><figcaption>user-title.pipe</figcaption></figure><p>Refference : <a href="https://angular.io/guide/pipes">https://angular.io/guide/pipes</a></p><p>Note : If you found a better solution then we can help each other out by sharing as many reference we can .</p><p>Happy Coding ! ❤</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b445dad2bb66" width="1" height="1" alt="">]]></content:encoded>
        </item>
    </channel>
</rss>