DNN Blogs

Written for the Community, by the Community

Jan 2022 SoFri Double Header - Sebastian Leupold (Internationalization) & David Poindexter (Web Components)

Written By Moore Creative
2022-01-20

 

Sebastian Leupold (Internationalization) & David Poindexter (Web Com

 

In this Southern Fried DNN User Group Meeting:

In this Southern Fried DNN meetup, the hosts discuss various topics, including internationalization within DNN, web components and their use in DNN modules. They also touch on sponsorship and upcoming events like DNN Summit and DNN Connect.

Speakers: Sebastian Leupold (Internationalization) & David Poindexter (Web Components...)
Speaker: Sebastian Leupold
Topic: Internationalization/Localization
Providing a website for an international audience can be quite challenging. Sebastian will provide an overview of common aspects to take care of and strategies for addressing them using all the features of DNN Platform.

Speaker: David Poindexter
Topic: Web Components "For Show In DNN"
We all keep hearing about web components. We believe they must be cool or something. So, just show me the freakin' secret sauce already. Stop telling me about them and start showing them - in action - in DNN!

--

Community Topics and Updates

  • Managed.com and Mandeeps were acknowledged as sponsors of the meetup.
  • DNN Summit 2022 was promoted, highlighting its online format due to pandemic-related concerns.
  • DNN Connect 2022 was announced, planned for June 30th to July 3rd in Meaux, France. Registration was encouraged, pending any COVID-related restrictions.

--


DNN Internationalization/Localization With Sebastian Leupold

Recommendations and Presentation Notes:

  • 🌐 Localization and Internationalization:
    • Static and semi-static content localization is crucial.
    • Handling date and time formats for different regions.
    • Dealing with various currencies and measurement units.
    • Compliance with different regulations, like GDPR.
    • Understanding cultural differences and sensitivities.
    • Recognizing regional preferences for symbols and names.
    • Utilizing the correct time zones when displaying times.
    • Be cautious about daylight saving time variations.
  • 💡 DNN Localization Features:

    • .NET Framework provides date and currency format support.
    • DNN supports multilingual content.
    • Localization was not initially included but has been improved over versions.
  • 🌐 Language-specific pages created by copying each page
  • 📄 Each module may require extra tasks for multilingual use
  • 🔄 Workflow for translators to translate content
  • 🔗 Links between pages and modules to manage translations
  • ⚠️ Enabling content localization creates copies of all pages for each language
  • 🗑️ Cleanup task may be required if you disable content localization
  • 🌐 Consider using separate menus or skin options for some pages in different languages
  • 🌐 Language Localization:
    • One option for language localization is creating an English Canadian language pack.
    • However, it's usually unnecessary; you can simply add languages without installing a new pack.
    • Add language like "enca" with a fallback to "enus" for English Canadian.
    • Do the same for French Canadian.
    • Disable other languages for the site, keeping only English Canadian and French Canadian.
    • Consider using text instead of flags due to similar flags for both languages.
  • 🚩 Flags for Language Selection:

    • Flags don't represent languages, only nations.
    • Swiss websites face similar challenges with multiple official languages.
    • Consider alternative options like small flags or text.
  • 🧩 Localization Challenges:

    • The system's list localization is crucial for country and region names.
    • Maintenance is needed for updates and changes to avoid overwrites during updates.
    • GDPR support includes cookie consent and data management features.
    • Full GDPR compliance requires documenting data workflows and assigning a GDPR officer.
  • 🌐 Multilingual Websites:

    • Parallelizing English and French using Sexy Components works well for Canadian websites.
    • Challenges arise when dealing with multiple languages, like Swiss websites with three official languages.
    • Carefully choose the language file for translation and use the editor efficiently.
  • 📝 Content Localization:

    • Enabling content localization is a one-way process, difficult to undo.
    • Backup your site before enabling content localization.
    • Translating content involves modifying keys and ensuring proper translation modes.
    • Page localization settings allow translation of properties and modules.
    • Neutralizing a page disables localization, useful for admin pages.
    • Disable localization for multilingual modules to prevent duplicate content.
  • 📅 Managing Translations Over Time:

    • Keeping up with content translations can be challenging.

    • Content editors and site managers must regularly update translated content.

    • Currently, there's no automated system to track changes in modules for translation.

 

Web Components "For Show" in DNN with David Poindexter

Recommendations and Presentation Notes:

  • 🌐 Web Components are based on W3C standards and are built into browsers.
  • 🧩 Custom Elements allow you to create your own HTML elements.

  • 🕶️ Shadow DOM encapsulates functionality within mini DOMs.

  • 📜 HTML Templates can be used but won't be covered in detail.

  • 📚 Modern browsers fully support Web Components.

  • 🚫 Web Components reduce framework dependencies.

  • 🔄 No need for maintenance with Web Components.

  • 🛠️ Daniel Vladis created a Visual Studio template for Web Components in DNN modules.

  • 📦 The template also supports Web API and can be adapted for other front-end frameworks.- ⚙️ The DNN (DotNetNuke) module template for web development is available on GitHub.

  • 📄 Documentation is provided for understanding and using the template.

  • 🧰 The template offers a wide range of functionalities out of the box.

  • 📦 When installed in Visual Studio, it sets up basic functionality.

  • 🌐 A sample site demonstrates basic features like searching, adding, editing, and deleting items.

  • 📱 The presenter plans to integrate Ionic web components into the DNN module.

  • 🔌 Ionic is a framework for creating mobile apps.

  • 🖥️ The template relies on Stencil.js to create web components.

  • 🌐 Stencil.js is used by the Ionic team to create web components.

  • 🗂️ The template organizes the project into backend, frontend, and test components.

  • 📦 Dependencies are minimal due to the use of web components.

  • 🛠️ Styling is accomplished within the JavaScript files.

  • 🚀 The deployment includes only HTML custom elements and two JavaScript file references.

  • 🌟 The advantage is easy maintenance of web components.

  • 📝 Summary:

    • The text discusses setting up imports for Ionic CSS and leveraging Ionic framework's CSS for app theming.

    • It mentions tree shaking, where only the imported elements are bundled.

    • The Stencil configuration file is used to reference global scripts and styles.

    • Components in the project consist of TSX and CSS files.

    • Web components are highly flexible and can be integrated into various contexts.

    • The TypeScript client for API services is automatically generated using decorators.

    • Data from the backend is fetched using a simple fetch method.

    • The demo showcases event handling for editing and deleting items in a list using custom events and console logs.

    • The text primarily focuses on setting up and using web components with Ionic CSS in a Stencil project and demonstrates event handling for interactive features.

 
 

Watch the Southern Fried DNN User Group January 2022 Meeting:


 

About the SouthernFried DNN User Group

Even though our DNN user group is nestled in the Carolinas, we are really YOUR DNN User Group regardless of your Southern heritage or lack thereof. Everyone is invited to attend in person or to join us online! We always try to broadcast the meeting so everyone can participate. Register now for the online meeting details for those of you wanting to join online

 

Total: 0 Comment(s)

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved