DEV Community: Emre Erkoca

Dotnet Core Localization

Emre Erkoca — Sat, 20 Feb 2021 20:12:26 +0000

I had to make a multi-language application. Because there are a lot of languages and you might want to be global for more customers. I wanted to write a simple example before localization. I read documents and I felt a little bit confused. Then, I wanted to share my sample code.

You can store your text messages in a resource file. A resource record is composed of two parts. Name and value. Actually, there is one more part (comment) but probably you won’t use this part.

An example resource file looking like this:

You can create resource files for different languages.
Resource.resx, Resource.de.resx, Resource.es.resx, etc.

If you want to apply localization properly, names must be same in your resource files. When the localizer doesn't find resource content, it returns null. I’ll explain this project step by step. https://github.com/emreerkoca/LocalizationExample It’s a simple Dotnet Core Web Api project.

Add Resources folder to your project.
Add your resource files.

Add a new folder to your project as “Localize” and add a public class to Localize folder.

namespace LocalizationExample.Localize
{
    public class Resource
    {
    }
}

If you want you can use different names but your resource names and your resources must be suitable. You will reach resource content through this empty class.

Resource name: Localize.Resource.de.resx
The namespace of your class is LocalizationExample.Localize and the class name is Resource.cs

Startup Configuration

Add this code block to into boldConfigureServices(IServiceCollection services)bold method in Startup.cs file.

services.AddLocalization(options =>
{
    options.ResourcesPath = "Resources";
});

services.Configure<RequestLocalizationOptions>(options =>
{
    var supportedCultures = new[]
    {
        new CultureInfo("en-US"),
        new CultureInfo("de")
    };

    options.DefaultRequestCulture = new RequestCulture(culture: "en-US", uiCulture: "en-US");
    options.SupportedCultures = supportedCultures;
    options.SupportedUICultures = supportedCultures;
});

It’s about adding supported languages for localizers. Showing your resource files. Selecting default language.

Add this code block to boldConfigure(IApplicationBuilder app, IWebHostEnvironment env)bold method.

var locOptions = app.ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>();
app.UseRequestLocalization(locOptions.Value);

It’s for automatically setting culture info for your localizer. You can set culture info by any request header value.

Showing Localized Messages

I used IStringLocalizer interface for reaching resource files. You can see an example usage here. Add dependencies and call the resource field name.

private readonly IStringLocalizer<Resource> _stringLocalizer;

public HomeController(IStringLocalizer<Resource> stringLocalizer)
{
    _stringLocalizer = stringLocalizer;
}

[HttpGet]
public string Get()
{
    var value = _stringLocalizer["Hello"];

    return value;
}

Get() method will return “Hello!” because English is the default culture and English resource value is “Hello!” When you add “culture=de” to your request URL, you’ll change the culture as “de” and you’ll see “Hallo!” message.

If you want you can detect the current language from “Accept-Language” header. You can change your configuration.

Change your ConfigureServices configuration part like this:

 public void ConfigureServices(IServiceCollection services)
 {
     services.AddControllers();

     services.AddLocalization(options =>
     {
         options.ResourcesPath = "Resources";
     });

     services.Configure<RequestLocalizationOptions>(options =>
     {
         var supportedCultures = new[]
         {
             new CultureInfo("en-US"),
             new CultureInfo("de")
         };

         options.SupportedCultures = supportedCultures;
         options.SupportedUICultures = supportedCultures;

         options.RequestCultureProviders.Insert(0, new CustomRequestCultureProvider(context =>
         {
             var languages = context.Request.Headers["Accept-Language"].ToString();
             var currentLanguage = languages.Split(',').FirstOrDefault();
             var defaultLanguage = string.IsNullOrEmpty(currentLanguage) ? "en-US" : currentLanguage;

             if (defaultLanguage != "de" && defaultLanguage != "en-US")
             {
                 defaultLanguage = "en-US";
             }

             return Task.FromResult(new ProviderCultureResult(defaultLanguage, defaultLanguage));
         }));
     });
 }

It’s reading the “Accept-Language” header value and getting the default language. Put a breakpoint after the language variable and see values. It’s changeable for different browser languages. If you feel confused when you read CustomRequestCultureProvider, ProviderCultureResult, etc. you can read them from official Microsoft documents.

Now, you don’t have to add a culture parameter to request URL. You can try to get values from English and German browsers.

You can read this document for detailed information.
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization?view=aspnetcore-5.0

I have nothing to say after this. I hope it might be helpful.

MutationObserver and Event Usage

Emre Erkoca — Fri, 29 May 2020 21:44:31 +0000

I want to explain it through an example. Say you have your own company and you're working with e-commerce companies. Your customer says to you "Can you provide user's last added product for another consultant company. We need this information" and you said "Yes, we can do this"

Of course, you can find a professional solution to this problem. I'll make this with MutationObserver and Event. MutationObserver is using detect DOM changes. For example, you have an element. You can detect any changes in this element. Adding a new child element, changing element content, adding a new attribute, etc. I used it for my card page element. It's imitating a basic cart page. I'll add a child div to here as a product.

<html>
    <head>
        <title>MutationObserve and Event Usage</title>
    </head>
    <body>
        <div class="cart-modal">
            <div class="product" data-product-id="424242">Product 1</div>
            <div class="product" data-product-id="213113">Product 2</div>
        </div>
    </body>
</html>

I added a new child element in this code.

setTimeout(function() {
    var product = document.createElement("div");
    var node = document.createTextNode("Product 3");

    product.appendChild(node);
    product.classList.add('product');
    product.setAttribute('data-product-id', '232323');

    var element = document.querySelector(".cart-modal");

    element.appendChild(product);
}, 4000);

I used setTimeout for wait 4000 milliseconds. Because we want to detect DOM changes. It'll trigger after 4000 milliseconds. You can review MutationObserver sample codes from here:

const targetNode = document.querySelector('.cart-modal');

//config defined for change types. I'm just listening child element additions
const config = { childList: true };

//You'll understand this from name. MutationList so list of detected mutations
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) { 
        if (mutation.type === 'childList') {
            //if mutation type is childList, any child element has been added or any child element has been modified
            //I created a new event and I triggered it. I explained it below
            createAndTriggerEvent({
                id: mutation.addedNodes[0].attributes['data-product-id'].nodeValue,
                name: mutation.addedNodes[0].innerText
            });
        }
    }
};

const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing.
//observer.disconnect();

I wrote createAndTriggerEvent function for creating a new Event and triggering it. When our data is ready we're triggering it.

createAndTriggerEvent = (productInfo) => {
    var event = new Event('listenLastAddedProduct');

    window.lastAddedProduct = productInfo;

    document.dispatchEvent(event);
}

Finally, I'm listening to our custom event. When it's triggering we're catching data.

document.addEventListener('listenLastAddedProduct', function (e) {
    console.log(window.lastAddedProduct);
}, false);

You can get all JavaScript codes from here:

createAndTriggerEvent = (productInfo) => {
    var event = new Event('listenLastAddedProduct');

    window.lastAddedProduct = productInfo;

    document.dispatchEvent(event);
}

setTimeout(function() {
    var product = document.createElement("div");
    var node = document.createTextNode("Product 3");

    product.appendChild(node);
    product.classList.add('product');
    product.setAttribute('data-product-id', '232323');

    var element = document.querySelector(".cart-modal");

    element.appendChild(product);
}, 4000);


const targetNode = document.querySelector('.cart-modal');
const config = { childList: true };

const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) { 
        console.log(mutationsList);

        if (mutation.type === 'childList') {
            createAndTriggerEvent({
                id: mutation.addedNodes[0].attributes['data-product-id'].nodeValue,
                name: mutation.addedNodes[0].innerText
            });
        }
    }
};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

document.addEventListener('listenLastAddedProduct', function (e) {
    console.log(window.lastAddedProduct);
}, false);

// Later, you can stop observing
//observer.disconnect();

Calculating User's Session Count

Emre Erkoca — Sat, 18 Apr 2020 22:13:00 +0000

I wanted to calculate the user's session count through session storage and local storage.

Get the last session value from local storage.
- If there is no stored value create new storage items. Session storage prevents increase value in the same session.
- If the last session value is not null, the user was closed browser and opened it again. Increase the last storage value and save the last values.
Finally it returns session count.

var updateStorages = (storageValue) => {
    localStorage.setItem('last-session-value', storageValue);
    sessionStorage.setItem('current-session', storageValue);
};

var getSessionCount = () => {
    var lastSessionValue = localStorage.getItem('last-session-value');

    if (lastSessionValue === null) {
        updateStorages(1);
    } else if (lastSessionValue && sessionStorage.getItem('current-session') === null) {
        lastSessionValue++;

        updateStorages(lastSessionValue);
    }

    return parseInt(lastSessionValue);
};


getSessionCount();

It's my first technical post. It's just basic solution and I wanted to share it. I would like write more complicated things too. Cheers.