DEV Community: Zaw

The best method to save a clean web page online...

Zaw — Sun, 29 Sep 2024 00:40:23 +0000

Are you looking for a way to save a web page without all the unnecessary graphics and ads? If you're using the Edge browser, here's the best method to do just that.

Step One.

Open a web page in the Edge browser and click the icon with the `open-book-speaker` symbol.

Caption: The original web page with all its content and ads before applying the reading mode in Edge.

Caption: The web page in Edge's reading mode, showing a clean version without ads or unnecessary graphics.

Step Two.

Click `Print` to save the page as a printed copy or a PDF. Alternatively, click `Save Page As...` to save it as an HTML file.

Caption: Access the "Print" option or use "Save Page As..." from the Edge browser’s menu for saving a cleaner version of the web page.

To Learn ML.NET:

Deconstructing Search Input Box on Fluent UI's Demo Website…

Zaw — Wed, 12 Jun 2024 00:40:43 +0000

The search box component that we see on the demo website is actually implemented using FluentAutocomplete. This component combines a text box and a drop-down list box to provide autocomplete functionality.

I want to share my insights on how the FluentAutocomplete is implemented on FluentUI's demo website. This will enable us to implement or customize it ourselves. By understanding the underlying structure and functionality, we can tailor the FluentAutocomplete to better suit our specific needs and enhance our applications.

Blazor is a web framework that allows C# and .NET developers to create interactive web apps. It enables developers to create rich, modern web applications with a combination of C# code, HTML, and CSS, without relying heavily on JavaScript.

Autocomplete is a feature commonly found in user interfaces that provides suggestions to the user as they type, helping them complete their input more quickly and accurately. In the context of web development, an autocomplete component typically combines a text input field with a dropdown list that displays suggested options based on the user's input.

First, let's navigate to the Shared folder in FluentUI's GitHub repository.

You can find the repository here:

https://github.com/microsoft/fluentui-blazor/tree/dev/examples/Demo/Shared/Shared

Next, we need to locate the search box component in the DemoMainLayout.razor file:

<div class="search">
    <DemoSearch />
</div>

The DemoSearch element is a Blazor web component implemented in the DemoSearch.razor file. By Blazor's convention, the name of the Razor file becomes the component name, allowing it to be used like an HTML tag.

The following code block FluentAutocomplete is implemented in DemoSearch.razor.

<FluentAutocomplete TOption="NavItem"
                    Width="200px"
                    AutoComplete="off"
                    Placeholder="Search everything..."
                    MaximumSelectedOptions="1"
                    OptionText="@(item => item.Title)"
                    @bind-ValueText="@_searchTerm"
                    @bind-SelectedOptions="_selectedOptions"
                    @bind-SelectedOptions:after="HandleSearchClicked"
                    OnOptionsSearch="@HandleSearchInput"
                    ShowOverlayOnEmptyResults="false">
    <OptionTemplate>
        <span slot="start">
            <FluentIcon Value="@(context.Icon)" Class="search-result-icon" Color="Color.Neutral" Slot="start"/>
        </span>
        @context.Title
    </OptionTemplate>
</FluentAutocomplete>

In this code, TOption is a generic type parameter representing the type of options that the <FluentAutocomplete> component will operate on. In this case, it will be working with the NavItem class, which is defined in NavItem.cs.

Width="200px" : Sets the width of the search box.
AutoComplete="off" : Disables autocomplete in the input field.
Placeholder="Search everything..." : Sets the placeholder text.
MaximumSelectedOptions="1" : Limits the number of selectable options to 1.

Since NavItem is used as TOption, we can specify OptionText using the Title property of NavItem. This property is used to display for each NavItem in the dropdown list.

@bind-ValueText="@_searchTerm"
@bind-SelectedOptions="_selectedOptions"
@bind-SelectedOptions:after="HandleSearchClicked"
OnOptionsSearch="@HandleSearchInput"

The above code block within the component is responsible for establishing data bindings with the methods it will call.

In a Blazor component, C# code is typically written within a @code { } block using the @code directive. Alternatively, code can be placed in a separate code-behind .cs file. By convention, the code-behind file should have the same name as the Razor file with a .razor.cs extension, such as MyComponent.razor.cs.

Therefore, we can find the DemoSearch.razor's C# code in DemoSearch.razor.cs.

This code @bind-ValueText="@_searchTerm" will bind the value of the text box to the _searchTerm. On the other hand, this @bind-SelectedOptions="_selectedOptions" will just set _selectedOptions.

Lastly, OnOptionsSearch event is an EventCallback<OptionsSearchEventArgs<TOption>> that is used to filter the list of options based on the text input by the user. EventCallBack is a generic type that allows passing event data to a method in the component. By setting OnOptionsSearch="@HandleSearchInput", we specify that the HandleSearchInput method will handle the filtering logic. This method processes the user's input and updates the list of options accordingly. We can see these code implementations in DemoSearch.razor.cs.

This should now provide a clear and coherent explanation of how the FluentAutocomplete component is implemented and how it works.

The FluentAutocomplete component is part of the FluentUI Blazor library, which provides a range of UI components designed for Blazor applications. You can explore more about FluentUI Blazor here.

Additional Resources

FluentUI Blazor Official Website

My experience with installing nopCommerce on Azure

Zaw — Wed, 13 Jul 2022 22:16:01 +0000

Since I have an affinity with C# and .NET, I wanted to try nopCommerce. nopCommerce is an open source e-commerce solution based on .NET technology. Before you set up nopCommerce on Azure, if you have a custom domain to use, make sure you have a SSL certificate for that domain. And then you create an Azure Web App service. You can follow this tutorial to lay a ground foundation for ASP.NET app on Azure.

Creation of Azure App Service Plan and SQL Database

At first, you might want to choose the B1 app service plan. Though it is a higher price, you just need it for set-up time. For experimental purpose development, you can scale down to F1 or D1 service plan after installation to use nopCommerce for almost free of charge. After creating the app plan, you can associate it with your custom domain. You will still need B1 or higher app service plans to use custom domain and SSL. Otherwise, you can still use Azure's subdomain {app_name}.azurewebsites.net that comes with HTTPS. After that, you will need to create a SQL database service for the app. So there are service tiers that suit your app's demands. For my app, I just chose the purchasing model as DTU and the service tier as basic tier, which comes with a maximum of 5 DTU and 2GB of storage. That is about $5 per month, which is the lowest pricing for using Azure SQL Database. After the creation, you should also configure the SQL server firewall setting in the SQL Azure Portal under security and networking. You can set it as public access but only with selected networks with the IP address of the app and the IP addresses of development machines.

Deployment of nopCommerce app

There are two ways to deploy the app on Azure. I don't find nopCommerce in the Azure app gallery as of now though. So I have tried FTP deployment and app publishing from Visual Studio. The best way is to publish it from Visual Studio. FTP deployment takes too long to transfer files to Azure. That may be due to the app service plan, which has basic hardware performance. But the file transfer is quicker with the Visual Studio deployment. I can either clone the app from nopCommerce's GitHub site or download it from releases to do FTP deployment. To publish from Visual Studio, I need to download publish profile from Azure App Service. In Visual Studio, when you publish the app, you can just import the publish profile that you downloaded from Azure app service.

Setting up nopCommerce after Publishing or FTP.

Before you set up nopCommerce, make sure you start from your custom domain. If you don't have a custom domain, make sure HTTPS is turn on with Azure's subdomain in Azure App setting. Sometimes there may be connection time out during setup. So you can set Connect Timeout = 120 or so in SQL connection string. If something goes wrong, I have to delete the database catalog in Azure SQL and files under C:\home\site\wwwroot\ in web app because nopCommerce's Reinstall feature doesn't reset or delete the setting files to reinstall (I'll submit GitHub issue with that). The following PowerShell command is useful to remove files in the web app.

Remove-Item * -Recurse -Force

You can access PowerShell prompt for Azure web app via App Service's Advanced Tools under Development Tools and click the link Go. If you need to access the database stand-alone, you can use Azure Data Studio or Azure Portal's SQL Query Editor. During my nopCommerce installation, I mixed up custom domain and Azure's subdomain. I shouldn't install under Azure's subdomain and access the site with custom domain. With that issue, the domain was inaccessible and I had to manually change the domain in setting table dbo.Setting in the database.

Conclusion

It was a good experience using Azure App Service and Azure SQL Database. I learnt how to scale up or down web app and how to set up Azure SQL database. Azure App instances and SQL Database service tiers except Basic one can raise the cost of running services significantly. It could reach several hundred dollars in a month. Even when my website hasn't been launched or no one is accessing the site, there are automatic app activities or Azure's services running in the background. That could also raise the cost too high. I had tried to use SQL server on my Windows VM which is also hosted on Azure. It was not viable. Currently, I scale back the app to F1 free app service and basic Azure SQL database.

Converting PNG to JPG image files in C#

Zaw — Sun, 08 Dec 2019 01:03:19 +0000

If you are a programmer and you have hundreds of PNG files occupying your storage disk, you can save some space by converting PNG to JPG files, provided that you're not concerned about reducing some non-visible quality.

Here are the steps you can code that program in C#.

In bash/console terminal,

mkdir png2jpg
cd png2jpg
dotnet new console
dotnet add package System.Drawing.Common
code .

Add new using statements in Program.cs,

using System;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

Add the following code in main program.

            var folder = @"/Users/PNGs/";
            int count = 0;

            foreach (string file in Directory.GetFiles(folder))
            {
                string ext = Path.GetExtension(file).ToLower();
                if (ext == ".png")
                {
                    Console.WriteLine(file);
                    string name = Path.GetFileNameWithoutExtension(file);
                    string path = Path.GetDirectoryName(file);

                    Image png = Image.FromFile(file);

                    png.Save(path + @"/" + name + ".jpg", ImageFormat.Jpeg);
                    png.Dispose();

                    count++;
                    File.Delete(file);

                }
            }

            Console.WriteLine("{0} file(s) converted.", count);
            Console.WriteLine("Press any key to exit.");
            Console.ReadLine();

What this code does is it will get the path to the PNG directory. It will check the files one by one whether it has a PNG extension. When the PNG file is found, it will split the name and the path of that file. And save the file with the extension, JPG and its format. Then it will finalize the image and delete the PNG accordingly.

If you are using macOS, you may need to install mono-libgdiplus. If I've missed some Exception Handling, please let me know. Thanks for reading.