20 January Jan 2022 SoFri Double Header - Sebastian Leupold (Internationalization) & David Poindexter (Web Components) January 20, 2022By moorecreative SoFri Meetings David Poindexter, DNN, DNN User Group, DNNCMS, DotNetNuke, Internationalization, Localization, nVisionative, Sebastian Leupold, SoFri, Sourthern Fried DNN User Group, Web Components Β Β 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 Southern Fried DNN > Blog Southern Fried DNN User Group - MeetUp Β moorecreative moorecreative's Blog Please enable JavaScript to view the comments powered by Disqus. blog comments powered by Disqus