DEV Community: Imamul I. nAyeem

Expose local Web App to the internet with Cloudflare tunnels

Imamul I. nAyeem — Tue, 09 Jan 2024 10:12:49 +0000

If you are one of these people below or one of these scenarios is true for you then this blog is going to be a must-read one for you.

If you are a web developer often need to showcase your work to your potential clients
You do not have web hosting but want to use your PC as a server to host your web applications
You do not have a public IP to give access to your local application to your client or you do not want to expose your public IP.
You have a home server, and you want to expose your home services to the Internet without exposing your public IP or without having a public IP.

If you can relate to one of these scenarios, then Cloudflare Tunnel could be a savior for you.

Cloudflare Tunnel is a tunneling software that lets you quickly secure and encrypt application traffic to any type of infrastructure, so you can hide your web server IP addresses, block direct attacks, and get back to delivering great applications.

However, you need to own a domain that needs to be managed by Cloudflare. You can buy a domain online for a pretty cheap price, or some domain provider allows users to pick a free domain. Besides, hosting domains on Cloudflare is quite straightforward, tons of blogs and videos are out there about hosting domains on Cloudflare.

Let's see how we can set how Cloudflare tunnels:

First, you need to transfer your domain to Cloudflare. You can do that following this Cloudflare documentation.
Then go to Cloudflare Dashboard and from Left sidebar Click on Zero Trust. It'll take you to the zero trust dashboard.
Now, from sidebar click on Access to expand it then click Tunnels.
Click on Create a tunnel button. Then give a name to your tunnel and click on Save Tunnel. This will take you to Configure Test tunnel page.
Here follow the instructions to set your connector according to your operating system. I'm on a Windows machine, so I'm setting up my connector following Windows OS instructions.
After configuring this, switch to Public Hostname tab.
Now, Click on the Add a public hostname button and fill in the information below. This localhost site will be exposed to the testpage.imamul.com.bd. Here, you can also add a URL path with or without a subdomain and the service type should be your local site type. If your site is running on https then select HTTPS. You can also add any local IP instead of localhost.

That is it. Your local site is now exposed to the internet. Anyone can access your site with this URL testpage.imamul.com.bd without knowing your public IP.

PostgreSQL on Render connect with Azure Data Studio

Imamul I. nAyeem — Tue, 02 Jan 2024 16:11:02 +0000

Connecting a free PostgreSQL database from Render with Azure Data Studio could be a bit tricky job. Here I'm going to show you how you can do that with no time.

Render is a hosting platform that provides free PostgreSQL for a limited time.

First, open a Render account from here. Then sign in and go to the Render Dashboard.
Select New from the top right corner and choose PostgreSQL here.
Then you will find a window that will pop up with the following fields. Give it a Name, Other fields are optional. You can leave them blank.
Scroll to the bottom and select Instance Type as Free

Then click on the Create Database button below this section. It'll take a few seconds to create this database.
Now open Azure Data Studio(ADS) and Install PostgreSQL extension.

Create a new Connection on ADS, you will find a new Connection type PostgreSQL here.

For Server Name go to your Render Dashboard and Copy this selected part between @ and / and put it you ADS server name.

Then select Authentication type Password in ADS.
Copy User name, Password, and Database name from Render dashboard and put it into ADS.

That is it, click on Connect it will connect your db in Azure Data Studio(ADS) and you can see your PostgreSQL database on the ADS connection list like below.

You can now right-click on your DB and select New Query for writing a new postgresql database query.

You can find my Video Tutorial on YouTube

Code syntax Highlighting in React project with Prism

Imamul I. nAyeem — Sat, 30 Dec 2023 19:53:46 +0000

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. Today, I'll show you how you can add code highlighting in react project.
I'm assuming you've already created your React project, now let's see how we can add prismjs following these steps.

First install prismjs package with npm

npm install prismjs

Then import Prism in the component where you want to use syntax highlighting.

import Prism from "prismjs";

Then import the specific theme css that you want to use in your component. You can find all theme CSS in this path node_modules/prismjs/themes. I'm using prism-okaidia.css here.

import 'prismjs/themes/prism-okaidia.css';

After that, add the code blocks inside the pre and code tag that you want to highlight. Here className language-js is important, it will be different for other languages. You can find full language list here

<pre>
    <code className="language-js">console.log("Hello js")</code>
</pre>

Now run highlightAll in a useEffect hook to run it at the component loading time.

  useEffect(() => {
    Prism.highlightAll();
  }, []);

If you want to add any additional language that is not in prism-core than you can add them from node_modules/prismjs/components

import 'prismjs/components/prism-csharp';

If you want to use additional plugin feature like line number you can import them from here node_modules/prismjs/plugins/. I'm adding line number plugin here and line number class in <code> tag. Import JS and CSS for line numbers and className line-numbers in HTML. Find more about plugins here.

import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
// rest of the code
<pre>
    <code className='language-js line-numbers'>{code}</code>
</pre>

Full code will look something like this

import { useEffect } from "react";
import Prism from "prismjs";
import 'prismjs/components/prism-csharp';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/themes/prism-okaidia.css';

export default function Test() {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  const CsCode =
  `
  using System;
  using Alias = AnotherNamespace.SomeClass;
  namespace MyNamespace
  {
      class Program
      {
          static void Main()
          {
              AnotherNamespace.SomeClass obj1 = new AnotherNamespace.SomeClass();
              Alias obj2 = new Alias(); // Using the alias
          }
      }
  }
  `
  const JsCode =
  `const greetings ='Hello Folks';
  console.log(greetings);`

  return (
    <div className="Code">
      <h2> Code Syntax Block</h2>
      <pre>
        <code className='language-csharp line-numbers'>{CsCode}</code>
      </pre>
      <pre>
        <code className='language-js line-numbers'>{JsCode}</code>
      </pre>
    </div>
  );
}

Output:

You can explore other options from the Prism website.

using statement in C#

Imamul I. nAyeem — Sat, 30 Dec 2023 16:40:01 +0000

The using statement in C# serves two primary purposes:

1. Resource Management:

One of the main purposes of the using statement is to manage resources, especially objects that implement the IDisposable interface. Objects that implement IDisposable typically represent unmanaged resources, such as file handles, database connections, or network connections.
The using statement ensures that the Dispose method of the object is called when the block is exited, whether it's exited normally or due to an exception. This helps in releasing resources promptly and efficiently.

Example with FileStream:

   using (FileStream fileStream = new FileStream("example.txt", FileMode.Open))
   {
       // Use the fileStream object
   } // Dispose method of fileStream is automatically called when exiting the block

2. Namespace Aliasing:

The using statement is also used for namespace aliasing. It allows you to create an alias for a namespace to simplify the code and avoid naming conflicts.
This is especially useful when you have multiple namespaces with the same class or type names, and it helps in making the code more readable.

Example:

   using System;
   using Alias = AnotherNamespace.SomeClass;

   namespace MyNamespace
   {
       class Program
       {
           static void Main()
           {
               AnotherNamespace.SomeClass obj1 = new AnotherNamespace.SomeClass();
               Alias obj2 = new Alias(); // Using the alias
           }
       }
   }

In summary, the using statement in C# is crucial for effective resource management by automatically calling the Dispose method of IDisposable objects and for namespace aliasing to simplify code when dealing with multiple namespaces.

Add a script to the HTML header but delay its execution

Imamul I. nAyeem — Tue, 19 Dec 2023 20:39:11 +0000

To add a script to the HTML header but delay its execution until later, you can use the async or defer attribute in the script tag. Both attributes allow the HTML parser to continue parsing the HTML document while the script is being downloaded and then execute the script when it's ready.

Here's an example using the defer attribute:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <!-- Add your other head elements here -->

    <!-- Add your script with defer attribute -->
    <script defer src="your-script.js"></script>
</head>
<body>
    <!-- Your page content goes here -->
</body>
</html>

With the defer attribute, the script will be executed in order, after the HTML has been fully parsed. If you have multiple scripts with the defer attribute, they will be executed in the order in which they appear in the HTML.

It's worth noting that the defer attribute only works for external scripts (those with a src attribute pointing to an external file).

Alternatively, you can use the async attribute if the order of script execution is not important:

<!-- Add your script with async attribute -->
<script async src="your-script.js"></script>

Scripts with the async attribute will be executed as soon as they are downloaded, without waiting for the HTML parsing to complete. Keep in mind that using async may not guarantee the order of script execution, so it's suitable for independent scripts.

Markdown Cheatsheet

Imamul I. nAyeem — Sat, 10 Dec 2022 05:34:10 +0000

1. First we've to save the file in `.md` extension

Heading

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Preview:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Italic

_Italic_

Preview:
Italic

strong/ bold

**strong/bond**

Preview: strong/bond

Strikethrough

~~strikethrough~~

Preview: ~~strikethrough~~

Links

[Visit This Link](https://www.youtube.com/watch?v=bpdvNwvEeSE "Hover Title")

Preview: Visit This Link

Images

![Image Link](https://learncodeonline.in/gittwo.png "Hover Title")

Preview:

Highlight Code Part.

Print with this `Console.log('something')`

Preview: Print with this Console.log('something')

Hight code block(remove star signs)

 *```

js
    var age=30
    console.log(age)
 *



Preview:


```js
    var age=30
    console.log(age)

Tables

 |Name|Age|Salary|
 |---|---|---|
 |Nayeem|30|999999|

Preview:
|Name|Age|Salary|
|---|---|---|
|Nayeem|30|999999|

Blockquote

 > Never Settle

Preview:

Never Settle

Unordered and Ordered List. Put Two Spaces for Tab space.

- One
- Two
1. One
2. Two
    1. One
    2. Two

preview:

One
Two
One
Two
1. One
2. Two ***

Horizontal Line (all 3 will work)

***
---
___

Preview:

Task list

<!-- Task List -->
* [x] Task 1
* [x] Task 2
* [ ] Task 3

Preview:

[x] Task 1
[x] Task 2
[ ] Task 3

DEV Community: Imamul I. nAyeem

Expose local Web App to the internet with Cloudflare tunnels

PostgreSQL on Render connect with Azure Data Studio

Code syntax Highlighting in React project with Prism

using statement in C#

Add a script to the HTML header but delay its execution

Markdown Cheatsheet

1. First we've to save the file in .md extension

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Acknowledgement

1. First we've to save the file in `.md` extension