Southern Fried DNN: Sebastian Leupold (Internationalization) & David Poindexter (Web Components...)

Jan 20, 2022


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"

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!


This week's Southern Fried DNN is everyone's chance to catch up on DNN, tooling, conferences, community buzz. and more! Please be sure to join us in person or online!



• Welcome
• Sponsor Recognition
• Community Buzz & Announcements
• Session #1
• Session #2
• Social Time!


Join Us 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.


Referenced Links:


Southern Fried DNN

DNN Platform

DNN Community

DNN Docs

DNN Summit

DNN Connect




0:02 hello hello welcome to the january southern fried dnn meetup uh it's great
0:09 to see everybody if you're joining us live thank you it's good to see your faces and your pictures and everything
0:14 that's showing up in the zoom if you're joining us after the fact thanks for checking out the youtube
0:20 channel and our southern fraud uh where all of the kind of recaps are
0:28 posted out there after the fact so today we've got a pretty exciting uh
0:35 pleasure to have sebastian lipo join us from all the way over in germany and
0:42 he's going to be talking a little bit about internationalization within dnn today and then i'm kind of filling in a slot
0:49 uh that we we had and i'm going to be touching a little bit on web components and see if we can show some magic uh in
0:57 that and how kind of ionic can be used inside of a dnn module so that'll be
1:02 really really fun and interesting um let me get my screen shared here
1:10 and we'll jump into just a few announcements after we thank our sponsors uh as always
1:17 hopefully i'm sharing the right screen are you seeing the meetup screen okay yes you're good good deal um
1:23 thank you to who uh proudly supports our meetup and
1:30 hosts the southern fried dnn website again that's southern fried and
1:37 i probably should have had that one up here let's see let's put this one in here
1:46 and it's pretty much a blog site so you can go out here and see the recaps as i was mentioning earlier of previous
1:52 meetups that we have up there ryan does a good job of putting those in there putting some notes in there as well as
1:58 embedding the playbacks from our youtube channel um so thanks again to for
2:05 doing that and thank you to mandeeps for uh sponsoring a few modules that we use on
2:12 the site uh the skin and the blog module again that's right yes i keep forgetting about the skin yeah it's uh the porto skin i
2:18 believe and the live yeah on here so thanks so much for for
2:25 supporting the efforts here um if you are interested in sponsoring and uh
2:31 helping out in any shape form or fashion just let us know and then we'll try to try to help to spend that money
2:39 or use those license right right so let's see community announcements
2:46 i don't have anything necessarily to highlight from the community site but just to remind everyone of
2:52 out here and a lot of times you can go out here and see some great new blogs that are being posted as
2:59 well as discussions on the forums and quite a bit of other resources that you may find helpful out here
3:06 so be sure to stay tuned and and watch that you'll see on the banners here that
3:12 we've got a few things that one needs to be updated i would say
3:18 yeah we need to do that as a matter of fact i might do that while uh while sebastian is uh presenting there i'll
3:23 still listen to you though sebastian i promise multitasking yeah uh ryan why don't you
3:29 talk a little bit about dnn summit which is coming up
3:34 february the 9th through the 10th so take it away on that by the time we reach the next southern
3:41 fried dnn user user group meeting we will have already been through dnn summit 2022.
3:48 um the you know date on that is uh i believe it's a wednesday and a thursday that is
3:54 february the 9th and the 10th and um it is uh or was still planned as a hybrid
4:02 conference so there were in-person components and virtual online components the system that's being used is the same
4:08 one that we enjoyed uh last year the hop-in platform which made it very successful and easy for you to both
4:16 listen to and participate with speaker sessions um the in-person components uh due to
4:24 kovid's continued uptick and uh specifically with the omicron variant um
4:30 we've decided that the in-person events the impersonal social events are cancelled if you do find that you've
4:36 already purchased tickets and hotel and you're still planning to head uh out there then fear not fearless will stroll
4:44 will be in the area and if you flag him down he might buy you drinks and hang out with you for a bit
4:50 i know that myself i'm a huge proponent of being in person and having these social events i thoroughly enjoy them
4:57 but i went ahead and also cancelled my plans or trips to bring my company in so
5:03 just from one reason or another for health reasons or even just simple transportation and lodging and logistics
5:09 while you know that 30 of every business and organization is out right now having
5:15 problems with staffing and keeping everything going so it just seemed like a good
5:20 time for us to decide that the in-person events were postponed however the online event uh
5:27 two-day event still happens there's still social opportunities for meet and greet and connections and networking
5:33 online as well as of course our sessions we've got 32 sessions planned and if
5:39 david you'll stop off on the sessions page i'll point out a couple of different things for each one of the different
5:45 categories um because right now is the time when we're driving and encouraging everyone to sign up um at the moment uh
5:53 you know the the the event will happen if you don't join us but if you join us you can
6:00 participate and if you join us you can learn a lot about these different things so the event will still occur if you are
6:06 not there but i will miss you so please come uh now is the time to sign up for dnn summit and uh get your hop-in
6:13 accounts logged in too so you're ready to go uh just ahead uh heads up on some of the different sessions that are
6:19 available here as always there are tracks different topic sides to go into there's design
6:25 marketing intro to dnn so kind of like a level one dnn type thing versus development versus secure development
6:31 slash security slash upgrades which is a little bit more in-depth type of things um and this
6:38 year we also have a special track set aside for each of the major sponsors of the event so they also
6:46 have their own information and even those sponsor sessions are not you know just sales sessions for their
6:52 services although certainly you should check out the services offered by each one of our primary sponsors because they
6:58 are the leaders in the dnn community they're there for a reason they're promoting themselves and helping support the dnn uh event but they're also
7:05 sharing with you their hard work hard-won knowledge and information so there's a lot to benefit from uh if you
7:12 stop into any of those um sponsor related track uh sessions that are being given by folks like you know david
7:19 poindexter from envisionative and cassidy pearson cassidy peterson from 10 pound gorilla
7:24 and mitch sellers and will stroll it's it's going to be a fantastic track uh to pick up some of those
7:30 sessions on but if you'll kind of go back to the first in the list we'll jump off on to
7:35 design there are a number of good um sessions actually all the sessions are good i
7:41 should start by by saying that copy it all the sessions are good but a couple that caught my eye that made me think
7:47 i've been working with dnn for 10 years and and know all these different things i'm interested in jumping into some of
7:52 these because it's interesting to see other people's take and their directions on things designing for accessibility and ada
8:00 compliance and things to keep in mind when you're focusing on ada there are a couple of different levels of that type
8:06 of topic that you're going to find through the conference there's ones here on the design side and then cassidy does some
8:13 on the intro and the development side as well there are also items in here
8:19 about design related focus for tailwind css and going in depth for an hour with
8:26 aaron lopez you know he joined us recently to do some of the same but we're going to get even more details and information uh but then we also have
8:33 some things around um design and ux and we see those from 10
8:39 pound gorilla folks so there's some interesting and exciting things to see in the design category if you then head
8:46 into the intro to dnn category i'm sorry marketing category the marketing category we have uh you
8:53 know a couple things like um google analytics four this one from mark saunders caught my eye because a
9:00 few years ago i gave a talk about google analytics and google page speed and the way that things were being calculated
9:06 and a few things from google's perspective and it's really interesting to see the updates and the things that
9:12 are happening um and so google analytics uh version four uh is what he's talking
9:18 about here and that caught my eye because i'm not up to speed on that yet i'd like to sit in and get a tour of what i need
9:24 to pay attention to and understand the difference of how those things are changing um scrolling down there's another one a
9:30 little further down that i was thinking of i mean obviously okay now there's cassidy so then go into the
9:35 dnn introduction so that's level one dnn um cassidy has a couple of different ones that are in different places but
9:43 there's one here in the intruder dnn that i believe is more about ada
9:48 as well uh there are items here uh for how to clean up your site um i'll
9:53 mention that if you want to just have some fun and uh egg on the other contestants you can come join us for dan
9:59 in jeopardy we'll be doing a dna in jeopardy session um but then we also have things like uh
10:04 chris hammond pointing out that when he takes a clean brand new dnn install and
10:09 starts working on it uh he pitches here uh the different things to do with a clean install uh to further set it up
10:16 and lock it down so i enjoy those perspectives from from different people on how they do things and you'll find
10:22 that in all of these categories but now when you move over to the development category
10:28 we've got a few different things here you will find items that are talking about some of our
10:33 different versions of dnn instances so you've got vangero you've got to plant an app
10:39 talking about different ways to take those tools and make even more out of them also examples of how those things
10:44 are being used in the environments they work inside of all of it's still based on and on top of dnn
10:50 but getting some of these extra perspectives and seeing what's out there is very interesting
10:55 um ah this is the one where cassidy talks about demystifying ada compliance and finding the right ada solution
11:01 because there are several different approaches i thought that's always a good thing to get into and watch for regardless the
11:08 industries and types of websites that you work within there are other uh development items
11:14 that are in here that are worth paying attention to um i always focus on the front end so we've got uh
11:21 headache-less css and some of these different um
11:27 different tracks to take a look at so um security is also in this area and mitch
11:32 sellers has one here for managing security within dnn and modern um
11:37 things you're fighting against that is important is also another one
11:43 with um uh mandeep giving another security related focus about tools that can be
11:49 used to help shield dnn sites so these are not things about dnn and the lockdown of dnn but they are tools to
11:54 use to detect intrusion to help protect against it to quarantine things once you've found them
12:00 so there are a few really good sessions related to security here in this area as well
12:07 i think we've covered most of the bases and the things that i saw that jumped out um let's uh let's put it out to the group
12:14 you know for instance daniel's here and daniel's on screen with modern uh module development daniel would you like to
12:20 give a plug and kind of talk about what you got ahead in that yeah so that's going to be a tips and tricks and uh things i've seen
12:27 done wrong and how to do it better for web api um which will cover security performance
12:34 scalability and the fourth item i forgot and uh
12:40 web components how to wrap up uh look and feel and behavior all in one
12:46 little small thing that can be reused everywhere which is super useful for uh reusability reusing
12:53 yeah that's good i mean uh concept there david how about yours on the page the um
12:58 you know building a mobile app with dnm is the back end yeah that'll be an interesting one uh
13:04 where i'll take a real life example of where a mobile app has been built uh
13:10 with dnn serving the data in the back end uh through the mobile app and so forth so uh be kind of an
13:16 introductory type um presentation really on kind of how
13:22 about doing that and kind of connecting all the dots i uh i know it's been a few years back
13:28 but i think if you and dnn is the backend for mobile things when i think about that that davidson project where
13:34 there were screens all over the town and that was using dnns the back end for something else uh oh yeah not exactly
13:41 finding yeah it's exactly it's digital it's not mobile exactly but still uh it was very interesting all right
13:48 all right well so that's it uh the main point is uh dnn summit plans are wrapping up now all of the session
13:55 speakers are putting together their last uh details on their uh sessions and if you want to learn
14:02 what the schedule is you can come to the website to see the individual sessions and the details to follow your favorite
14:07 speakers and also like david's doing now just take a look at the timeline of events so you can plan out each hour of
14:14 the day when you're going to want to jump over from one session to another and where you're going to be going
14:21 so sign up if you haven't already you'll see uh other sponsors such as and dnn for less and
14:30 um even sponsor and organizations such as uh you
14:35 know mandeep and um bogdan and dana and sharp they're all promoting to their
14:40 client base right now uh the fact that dnn summit signups are going on and dnn summit is next week the next month
14:47 so um if you see those emails uh click links on them let people know that you're coming and if you haven't signed
14:52 up already get sent out awesome thanks brian thank you also uh mentioned that uh dnn
15:00 connect is well underway in planning their 2022
15:05 uh event it'll be in june the 30th through july the 3rd and it's gonna
15:11 actually be an in-person event you know barring no um barring no uh restrictions that come
15:19 down you know based on the the covet uh situation uh right now but it'll be a
15:24 meow france and i think they just sent out a
15:29 communication today just asking for people to go ahead and
15:34 register if they have intentions to come you know barring no issues with restrictions and so forth uh to go
15:41 ahead and commit because i think the facility which they've used in the past for uh one of the dna connect well
15:48 actually maybe two of the events uh where we're at this facility i can't remember warranty anyways
15:54 yeah yeah they there's a there's an opportunity which
16:00 ideally they would have the whole facility to themselves and that um requires a certain number of
16:06 attendees so i think they have until the end of the month uh to commit that otherwise it'll be more of an open kind
16:13 of uh event uh not exclusive uh to to to them but
16:19 no worries either way but if you do plan on being there if you're especially if you're in europe and have
16:26 greater accessibility to that area go ahead and check out the event and register if you
16:32 can on that or if you plan to attend it will be a great event
16:38 for that and you'll find all kinds of details out here about the event and the
16:43 cost it still amazes me at the low cost of the dnn connect events because
16:51 you know for those of you that have been to dnn summit but have never been to a dna connect event it's quite different
16:57 it's a little bit more social based and there's always meals together
17:03 and things like that which is really nice so really your lodging and your meals it's all inclusive in the um the
17:12 event fee on that so it's amazingly affordable uh including recommendation
17:20 exactly and let's not forget about the uh the drinks right yeah but even
17:25 that you have you don't yeah it's including the accommodation so you don't have to pay for for a whole extra for
17:31 hotels so it's all included and that's really uh worth the money
17:36 it's a beautiful uh venue as well uh sebastian did you go to the one that was in mio yeah sure
17:42 it's very nice and nice in the countryside it's not at the coast this time but it's nice on the
17:48 countryside and uh it's uh really a pleasure to be there in the summer it should be really
17:55 a great uh scenery and uh also a great pleasure and i think
18:01 usually in summer cove it is not a big problem and so i expect that it will be
18:07 much easier to see be together and
18:12 exactly exactly now that this photo here i'll mention uh i i think it correctly
18:19 from roma isn't this the pool it's like in a uh like an edgeless pool or something i know the pool was
18:27 is popular so a lot of good times had around that uh pool uh in the previous event so
18:33 yeah check that out uh you can go to or and they'll forward you there and under
18:40 events go to the 2022 page and get more details about that
18:46 excellent um does anybody have any other community related announcements that
18:52 are worth highlighting here daniel do you have any updates on on dna
19:00 platform or anything uh as far as like i know uh things are still kind of in progress to
19:06 prepare for 9.10 um me and you were both missing in the
19:12 last meeting so i don't have anything fresh but yeah that's the plan
19:17 yeah and i know we've mentioned this in the last couple months but just to reiterate
19:23 the next release is more focused on getting to a better state with the
19:28 default experience as it relates to telerik not being a part of that of course it's
19:34 been optional to remove that since 9.8.0 but in in the next release you know
19:41 unless you're doing an upgrade it by default will install with telrick removed and you'll have the
19:48 option on upgrades to to remove those uh in a more automated fashion
19:54 rather than the manual process other than that i know there's been some talk of dnn 10 and some of the plans for
20:01 that as well which by the way is a test ground to iron out all the bugs of upgrades
20:07 because the process that you will opt-in to remove telerik will be the exact same
20:14 that will be enforced and then so i when that comes out i urge everybody to test it out and make sure
20:20 that this process works fine because it's a bit complex yes yes i've seen a few pull requests
20:27 already come in i believe peter docker put in a few of them as well as i put in
20:33 a few small ones uh just to help with some of the some of the uh punch list of items that are
20:40 supposed to be for 9.10 and i believe a few others have plans over the next
20:46 weeks to come to uh to try to push it forward and and see if we can get to a release i know we all had
20:53 uh dreams of grandeur of uh it kind of being out by december or so but uh
20:59 as with any other open source project it kind of you can't like commit to dates
21:05 because people's availability and you know giving you free of their time and so forth it just kind of falls the way
21:11 that it falls but hopefully we'll be able to see that release soon
21:16 any other announcements worth highlighting
21:23 okay well let's switch gears here and introduce our first speaker many of you
21:30 know sebastian lapold and he's going to be joining today talk a little bit about internationalization
21:36 and localization i know this is uh i i don't have as much experience with
21:41 localization as i would love to have but we just don't have a whole lot of
21:47 opportunity for that but when the opportunity does come this is great information
21:54 to know because it is not always straightforward and you know obvious how
22:01 things should be set up and configured so um enjoy uh sebastian's
22:08 presentation today on this and learn take notes you know bookmark this uh
22:14 presentation for the future because hopefully it'll uh you'll have a few aha moments on how to deal with localization
22:20 in dna sebastian thank you for joining us and i will stop sharing the screen you're welcome to take it away
22:27 thank you so how do i do it
22:33 okay
22:42 give me a second here
23:00 okay dealing with all the technique but sometime it should work
23:14 meanwhile in the video background i'm enjoying sebastian's um library wall i've always wanted to have a room that i
23:20 was allowed to put nothing but bookcases and uh i've i've never won that vote to
23:26 the family yet i love that type of room set up especially with those wide drawers behind you for drawings and uh
23:34 maps and big planes love it yeah my father was an architect
23:39 and he had a room with all books around so but we had to we i wasn't able to or we weren't able
23:46 to keep every uh all of them so most of them went away because i had already a
23:51 view like you could see okay do you see my screen yes yes with
23:58 the presentation okay uh yeah i'd like to talk about internationalization this is a
24:05 short version of this word commonly used um i learned
24:12 yes first question who of you has already uh is already using dnn either in a single
24:19 foreign language or in multilingual sites
24:25 david for sure david the other david as well okay
24:31 daniel and rhino as well okay great and the others i can't see but uh it
24:37 looks like you um already have some experience which is uh not come for all the dna
24:44 admins i know um so what i'm talking uh uh what i would like to talk about is
24:53 um what are the requirements in general for multi avoid for an
24:58 internationalized site what are the features dnn provides
25:05 and maybe we find enough time to do some hands-on on
25:11 some demo and how dnn can be used in uh in this scenario uh as well
25:20 so what are the areas of concern of course as a main area is
25:26 language and uh and has uh separated this or
25:32 by technical nature this says static content and semi-static what i call
25:38 uh to be clear static um content is something like captions like
25:44 anything you can provide you can distribute with a software uh for content management system of
25:51 course it's important for the end users to have their content being localized
25:56 being available in the user's languages and
26:02 often forgotten there's some semi-static content that means content which is not
26:10 uh which is provided by the admin or configured by the admins like role names
26:15 like uh some some lists options which are not uh dynamic um
26:23 on the current content but needs to be localized as well
26:28 one of the important thing of course when you're going international is being able to provide
26:36 the proper um date and time to provide in proper format
26:42 um that's for some strange reasons uh although we
26:48 use the same clock uh it time always looks different uh wherever you
26:55 are in the world especially on both sides of the um
27:01 atlantic uh and even in europe it's different uh
27:06 different areas uh how we write um dates or uh times
27:14 past time sebastian is actually dealing with dates and times
27:20 yeah and uh if you could consider uh 9 11 uh uh or whatever um
27:27 doesn't mean a different date in in the u.s although it's written the same
27:33 as the same way with slashes but nine slash eleven slash uh 22
27:39 would be a different uh date uh meant in in the us than in in great britain
27:46 because for for you it's september for them it's november
27:52 so that's uh definitely something uh um not very easy uh to get just for if you
28:00 don't have the context and in europe it's uh most common we use
28:05 dots so when it's clear it's usually it's a day month a year but
28:11 yeah with slashes it's not as easy
28:17 and of course we have different currencies uh currency firm formats we have
28:22 different [Music] dimensions for length some people still
28:27 use food and whatever strange um matters
28:33 uh for weight uh we use keto um all the modern countries
28:39 some use still stones or pounds and what's funny when
28:44 when you're canadian is that you're stuck in the middle of two systems so sometimes it's centimeters sometimes
28:50 it's inches it depends what you're measuring yeah that's that's strange or
28:56 temperature uh i always have difficulties if i hear oh it's over 100 degrees so i
29:03 say oh it's cooking no it's fahrenheit it's a little bit different
29:09 it's not as high and although we have technically
29:15 we do have an absolute um scale which is kelvin but uh it's not used uh in in
29:21 daily use for for for all of us which would be of course easier to understand each other
29:27 but yeah we have to live with this variety and of course there are different uh standards like different
29:33 schools and different uh other things we have different if you go
29:38 into different countries you have different taxes you have different um total systems you have or child uh
29:46 strategies you have yeah shipment fees which will come different this is of course something
29:53 for e-commerce um and most of the uh currencies and different dimensions will happen in
29:58 content only and those are areas of course we cannot solve with a platform but it is
30:06 something you have to take care of when you provide content and the same is with legislation what is
30:12 the term of use how are the terms of use um what uh
30:18 do you have to take care of a kind of data protection you know gdpr is
30:23 a big subject in germany and uh yeah all europe um
30:29 but also whether it's allowed to provide uh anything without tax any uh price
30:35 without taxes or does it always have to be with tax so those are the things you have to take
30:41 you to be aware of and if you want to sell for example to end customers in
30:48 um consumers in in around the world you have to take care of warranty regulation and lots of
30:56 others and of course uh besides these are some soft facts or
31:01 some some other things you have to to be uh aware of like
31:07 what nudity is uh allowed in your content it's different and in the us
31:12 than in europe for us some nipples would be no problem in europe even if this uh uh if miners are
31:20 allowed to to use the site but uh in the u.s that's uh you will get a jail
31:28 immediately but here if you would sell a gun that would you would be
31:33 prosecuted while that's normal in the u.s so they're different
31:40 different areas with how things are um taking and how they're
31:48 [Music] considered and how strong is the focus on business what are meanings of symbols
31:55 and names some international companies had to rename that product because they had a
32:01 special is their name they had a special meaning i think was pachera once a car which is uh was sold
32:10 in in northern europe and i think in the us with no problems but in spanish-speaking
32:16 countries that was not really friendly and so they had to
32:22 rename the product and find a different name for it
32:28 so providing things for around the world is not easy and if you want to sell across
32:35 uh uh as a border then you should my advice would be you should
32:40 have someone in that country you could uh cross at least a course check and and
32:46 make sure that you don't hit any of those limitations or
32:52 local rules any questions so far
32:59 yes what time is it am i too slow sorry
33:06 what do you mean or what time is it here i was just joking yeah i was like yeah because we have so many uh time zones
33:13 represented here so yeah it's the times format is of course some people some countries can count up
33:19 to 24 some others only to 12 so they have some a and ap so
33:25 of course there are differences all around the world and making it not much easier to to display and
33:33 because for the u.s it's normal to have always a time zone annotated but in europe we always
33:40 most of europe use the same time zone so we i usually just say this uh
33:45 as a at the time without any pst esd or whatever
33:51 but really i did i wasn't aware of that
33:56 yeah it's only the only um portugal and uh great britain and
34:02 ireland use a different time zone in the west and on the east i think it's
34:07 uh belarus and uh uh and and ukraine which uh uses and in
34:14 finland which use a different time zone but also all other countries in europe
34:20 use european central time i was hearing something about about date
34:26 time the other day a youtube video and it was very really interesting daylight saving time if you're
34:32 converting from utc to whatever time zone that has daylight saving time you have one answer
34:38 but if you're going from the local time to utc you can have two possible enters
34:44 when you bring the time back and there is no way to know which one is right
34:50 yeah you have to know what's the starting and what it is yeah yeah you know you need to know
34:55 whether you are on uh daylight saving time or you need to have the date with it of course but even that is sometimes
35:03 uh challenging because the us uses different uh dates to switch between
35:08 daylight uh saving time and winter time and then as a rest of the world
35:13 so we have usually i i remember from all our team meetings um in in the core team etc
35:21 that in in springtime and an autumn level three or four weeks when uh
35:27 um a different uh for one more hours than usual so
35:33 that's something we had to take one hour less so um we have we have uh you have
35:38 to take uh consideration of course doesn't make it easier
35:44 okay so those are lots of um requirements uh if you want to provide a
35:50 website for international uh audience and those are it's just a short checklist what you
35:57 might consider before you really go online with the site
36:03 that should target an audience in a different country
36:12 so what do we have in dnn what are the localization features included
36:17 in the platform that's of course state and currency formats those are provided
36:22 by net framework not uh specific by dnn we only need to make sure that we use a
36:29 proper culture and then we will get the proper formats for those elements which makes it uh quite
36:37 easy and then we have and so that's included with dnn since
36:43 version one and so but uh for the first two versions we
36:48 didn't had any uh localization of language of the officer of the texts i
36:54 remember when i like uh i started christian and i think it too
36:59 and i was uh localized i was translating it in this in the source code so i was
37:05 taking all the source codes and and all the sex files and and the others and and
37:11 uh converting uh a checking for it for strings and converting uh english
37:16 strings to um to german strings which doesn't always
37:21 um [Music] fit um but i'll come to the challenges a
37:27 little bit later and then we have a true og right there people
37:32 sorry so that is the sound of a true og uh there where you're uh you were modifying
37:39 the the core code just to uh just localize it that was the only option at that time
37:46 and uh even with the dnn one was derived from the um
37:51 i portal workshop now i buy but i buy spy uh
37:57 um website uh or something like this and even that portal
38:08 and that even that didn't uh support uh localization at all although it comes
38:13 from a company which uh should already have some experience with localized software but
38:20 yeah we always wonder how bad it is when we get new pro new versions of windows
38:26 or office so no wonder it's obvious that it's mainly developed
38:33 in one country okay but uh when i started in dnn2 and had to to
38:40 translate everything in the source code then it was really a great step forward
38:45 in dns iii when we when we got static localization
38:51 and uh we're able to use the and really out of the box uh
38:56 within uh with the language pack in uh as a for german websites
39:03 but um providing uh it for multiple languages uh um even with
39:10 content that were some uh [Music] community members who provided
39:17 uh solutions like uh eric from balagoi um but um
39:23 it wasn't built into the cohort until the end version 5.4 and there were still some areas
39:30 missing at that time and that took really until dnn7 to get this localization and they're still even in
39:37 the current version there are still a few areas where we don't have uh localization included although those are
39:44 a little bit minor and uh finally we got gdpr support
39:49 um in dna 9.5 by peter donka i will come to that a little bit later
39:56 so what is static localization um this was added by vichenz mazanas
40:04 and uh it allows you to to provide any text which is comes with dnn and
40:12 for tables list headers and
40:17 all the texts you use in messages and so on
40:24 in theory you can now localize everything which is in dnn
40:30 even this supports not just
40:35 the core but also third-party modules or providers
40:41 but some some developers still used to
40:47 combine sentences by using a word from the resource file and then some
40:54 dynamic element like a name or a date format and then
41:00 another element from the [Music] another text from the resource file and
41:06 just making the phrases up by concatenation
41:12 and then that's really challenging for a translator because you always need to have in mind that
41:18 other languages uh um provide sentences in a different order
41:23 and then this really will fail or it will it's some most of the time it's possible
41:30 translate to translate but it looks a little bit strange or it sounds a little bit strange so
41:35 um dnn usually uh provides the option to use uh wildcards uh uh or placeholders
41:43 and uh that's something a module developer should consider to use instead of
41:49 just using those single words and concatenate it
41:56 itself and if you consider we also have languages which run from right to left
42:01 then this concatenation might even get more difficult
42:08 so the static localization stores all those texts using a key
42:17 and a content data and puts it into a language file
42:23 and or lots of those keys and
42:29 put them into a file and lots of those files then into a
42:37 language pack and i think one of the uh the great
42:42 features uh uh viscense implemented was the support of three levels like we have in dnn this uh
42:51 this host and website level and besides there's also the system level which means those are the files coming with in
42:58 a platform or with the module um or with the language pack for either or
43:04 and then you can override any of those texts on a
43:09 host or on a website level and then which are overriding those default texts
43:15 and [Music] but these won't be overwritten when you
43:20 update uh a core or language pack or the third
43:26 party module as a or skin um and that's for sure uh benefit otherwise you would
43:32 start all over like we had to do uh when we started in dnn2 to localize uh in the
43:39 uh the source code so that's really a great uh separation of concerns
43:46 and for um editing this is a built-in language editor you can find within the
43:52 dn and website settings which allows you to edit all this it's not really the
43:59 most comfortable tool but it's very well
44:05 very easy to translate there's no no support in there
44:10 for automated uh translation like uh using google translator also
44:16 but um to be honest i'm not a big fan of these because uh as
44:23 although these tools have evolved over the past years um they're
44:28 really uh it's it's not really a compliment for the website owner um
44:36 it's obvious that this is not um
44:42 not done by a professional translator um and i know what i'm talking of because i
44:48 did hundreds of language packs i'm translating dnn into a german language
44:53 since then in version 3 because when that was announced and it was
44:58 announced to be localizable and it comes with two
45:04 languages at that time and it was english and german and i said oh great and i installed it and i said oh
45:12 because it was this automatic translation and it was really it was really so
45:20 it's a dictionary translation yeah and i i uh contacted sean and say okay i'm
45:27 providing a better translation and i take care of uh
45:32 german translation in the future so uh um then we will have a better version and
45:38 nowadays dnn comes with six languages including french spanish german
45:45 dutch english i miss one i think those are
45:50 and um in italian sorry yes those are the six languages we do not
45:56 have a by in our team or in the team
46:02 of the community uh as someone who is translating actively to arab or
46:09 china but it's mainly a problem that we do not have content to the contact to the users over there i know that it's
46:16 been used in persia and or in iran and in other arab countries very
46:23 well and as well as in china so that could be
46:28 um [Music] yeah sometimes uh would be helpful
46:33 uh if you could extend the defaults to this but yeah it's not very easy
46:42 okay so we talked just about language packs that's another tool we have uh
46:47 uh or that's something if you have this translation a language packs allows you to have all those
46:53 translated texts put together in a zip all those translation files and make it
47:00 installable like any other dnn extension there's also a
47:05 built-in tools for checking the language packs whether it's complete uh or which keys are missing and there's
47:12 also a built-in tool for creating a language pack um out of the current site um which makes
47:19 it easy to if you improve the language pack and want to keep it and i wanted to
47:24 transfer it to another of your sites to
47:30 hand it over or to install it over there as well there's also an extra tool from peter is
47:37 a collaborative localization editor i think it's on on codeplex as well on github as well as it
47:45 has the tools available and that allows to see how many people
47:53 um who did translate what and you can translate just a few files and upload in
47:59 there [Music] and i think a few of the translators
48:05 already use it daniel do you are you using the um editor from peter or the built-in one
48:12 sometimes one sometimes the other i try to use the dnn built-in one whenever
48:18 possible when i have like a bigger task to do then i grab
48:26 they all have their pros and cons so it depends on the situation okay
48:32 yes it's just a different tool and uh but what you have to do you need to know
48:37 that the uh editor from peter doesn't uh work directly on the uh files within your
48:43 site the benefit in in the built-in language editor is that you can translate you can save and if you know
48:51 by the name which element should be affected then you can control and see okay that does it work
48:58 did it work or did it not work and then you can correct your translation because there's
49:03 no tool in the interuser interface to tell you where this string comes from whether how
49:10 it was translated so or whether whether it was translated at all and
49:15 from which file it comes from so that's of course our speaker i think uses that tool
49:22 yeah he he i know he used it uses it a lot
49:27 he was always a big fan of peter's tool um that's helpful if you
49:33 i think it's a great benefit if you're working with multiple translators on
49:38 on it because otherwise with the built-in one it's really a challenge to to put the
49:44 translation together that works much better by the one from peter but uh that requires you to
49:51 step up to the file to create a language pack to install the language pack afterwards
49:56 before you can uh view whether everything has been translated or there's something missing
50:02 that's of course one of the uh downsides
50:08 language facts for the core in this six languages i mentioned before they are offered by dnn already as in in the
50:15 section in the extension section as a valuable language um and
50:22 at the moment some of them are not uh up really updated and in former times they even used to be
50:28 provided in the install screen but i noticed uh that um there's
50:35 it's no longer included in there i don't know why daniel do you have any insight on that
50:40 no i am sorry what was the question uh the install wizard for dnn
50:48 it used to have this selection for this language you want to install but uh
50:53 nowadays uh there's uh this is exactly one option that's english
50:58 it's still there but it relies on the service so i don't know if something went wrong with that service i know it's
51:05 now the service the service is there and if you go to um extensions yeah then it
51:11 lists all the languages but not the um but not in the install wizard so maybe
51:17 we need to check where it comes from might be a bug there
51:22 as far as i know i don't think it was removed so i'm not a hundred percent sure yeah this is the language the drop
51:28 down is still there but but it's only one language and that's english although uh the others seem to be
51:34 available so that's something we need to check but otherwise it's a nice experience that
51:40 you can see the install wizard already in the proper language and you can select your
51:45 proper language for your uh for your website and you get it directly without
51:51 just any extra steps to add in another language and so on um to
51:58 provide it in german or in france or wherever you are
52:03 in the proper language so um so those core language packs are
52:09 offered by dnn extensions page and the other extension language packs and all the
52:16 language packs for other languages and for all the extensions are available on
52:21 the in and community that are right there is a dna connect at the end connect sorry i
52:28 think there's a big there's a big uh
52:34 language packed directory where you can [Music] select languages
52:40 this is a language that you need
52:46 okay what are those resex files for static localization their standard xml
52:52 for their format is uh defined by or by microsoft it's a standard xml format
53:00 with a specific um xs um now with a specific
53:07 [Music] syntax and
53:12 allows a couple of annotations but dnn just uses the title and the content
53:17 um option so you have every uh every translation is just the title and
53:24 the content uh for it and the content is html encoded that's something if you are
53:31 going into some one of those files to edit something directly make sure that you do
53:36 uh don't break the html code encoding and usually there's one file pair scx
53:44 and there are also some shared files for either dnn and for each extension
53:49 and component you're having and it's not used just for the core and
53:56 but also for modules providers and even skins and containers can have a look language files for texts they're
54:03 using usually by using the text skin object
54:10 which is you can place in a in a skin file
54:16 not very commonly in containers but in skins that's nice to have
54:22 although the uh other uh all others uh skin objects uh provide a localization
54:28 as well in the within the dna framework usually
54:36 okay what is content localization i think that's something
54:42 who of you did uh have a look at it daniel of course anyone else using content localization
54:49 here yeah
54:55 okay um content localization was added uh in dnn54 by dna corporation
55:02 um to be honest i'm still not very happy with the solution but it's uh
55:09 i call it language specific pages it has a concept of creating a copy of each
55:14 page and providing a workflow for a translator to
55:20 translate this content but it has very little support for
55:28 um for [Music] multilingual content
55:34 and that makes it uh very hard to use it creates a copy of each page by creating
55:40 copy of each module and then you have if you have a multilingual
55:46 module then we have some extra tasks to do to provide uh to to make sure that this is
55:53 being used as a single module is being used on multiple uh on on my for multiple languages and
56:00 makes it yes a little bit more challenging and uh you can have it's a little bit
56:05 easier for you on neutral pages uh traditionally those neutral pages were
56:11 the admin and the host menu because they didn't usually didn't need a translation or just static translation
56:18 um [Music] not not really for content and so those are yeah a little bit
56:27 yeah not not really not handled very well in [Music]
56:32 dnn and so you need to consider you have it's like
56:40 having copies of your website in each language but just with links between those pages
56:49 and links between the modules to see which module is translated which module is not translated which
56:56 what your instance or which page is uh ready for publishing or which is not
57:02 ready for publishing um so um and
57:08 for this uh to make this a little bit easier there is in page settings you get an overview of all the localized copies
57:15 of the page and in in
57:20 in website settings you get a overview of all the pages whether
57:25 they're translated in which language and so on but uh be aware that if you
57:32 enable content localization for website you will immediately create a copy of
57:38 each page for each photos for each language which is currently
57:44 been enabled for the website and that can take quite a long time and also it
57:50 creates of course a huge amount of data within your database and uh so you
57:57 um if you want to disable it i'm not sure whether all of this will be gone afterwards so um
58:05 you might um yeah have a little bit of cleanup task otherwise so
58:11 uh you should i always encourage people who want to use it to make a copy of the site first and
58:19 test it and consider how their workflow for translation would uh fit best
58:35 there are also other uh opportunities um what you can use to
58:41 um [Music] if you want to use uh um [Music]
58:46 or just a few pages in a different language then it might be easier to just
58:53 use some skin options to use a specific skin for that for the additional page
58:59 and to make sure that the additional page is
59:05 um and and this puts those additional pages just
59:10 in a separate branch of your menu and then you i can just show this
59:16 specific menu in in the other languages something we do for a couple of clients
59:21 because it's easier to handle you don't need to translate to consider translating
59:27 everything and uh and the people will just see in if they switch language they
59:33 just see the pages available in that language as well we have this for a couple of clients which just want to
59:39 provide a little bit of content for international uh visitors
59:46 questions for content localization
59:52 actually i have one that i'm not i don't entirely fit but um i do a lot of work with
59:59 canadian websites that have a french and english part but inevitably when i create my website
1:00:06 the first the creation of it is done in english us and then i got the english canadian
1:00:12 english and then french canadian but i'm stuck with this u.s part
1:00:18 is there a way to avoid that it doesn't really matter because in the end i just hide it but
1:00:24 yeah one option would be that you create a english canadian really language pack
1:00:31 but usually that's not really necessary you can in in languages you can just
1:00:37 say um instead of installing language back you can say just add language and you say i'm adding
1:00:44 language enca which is has a fallback on enus so you don't really need to provide
1:00:51 any content and then you can do the same with the french
1:00:56 france language pack for french canadian and then you have uh post um
1:01:02 uh available and and you just say okay those others are still installed but you uh disable
1:01:09 them for the site and then your language uh your language selector will still it
1:01:14 will just uh contain the um as the english canadian flag and the
1:01:20 french canadian flag and uh um yeah oh how you uh or just the the words
1:01:28 ian and us a a n and uh or how you uh created your
1:01:35 language selector so that would be
1:01:40 the best way to do that yeah that's exactly what i do and then i i make only active
1:01:45 the en cda so that they get the canadian flag one
1:01:52 thing that sucks with flags though is that we have the same flag for both languages so i usually do some skin object that
1:01:58 shows the text instead of the flag yeah i am i remember some clients in um
1:02:05 switzerland switzerland is a very small country even uh much smaller than the canadian canada
1:02:12 but this they have four official languages uh okay three are really used so they they
1:02:19 use their flag and they had a small different flag for from the main country in in the corner or or
1:02:27 um or the word or the letters that's of course
1:02:32 an option but it depends how you create your fl flag that's up to you
1:02:37 there is no really uh real option because a language flag uh doesn't uh
1:02:42 point to a language it just displays a nation not a license there's no visual
1:02:49 represent representation for language to be honest
1:02:56 does that answer your question steve yeah yeah great
1:03:03 in the 1974 um peter donker added uh the list localization that was one of the bigger
1:03:10 areas which was missing for country names and especially for country names and for region names so those are now
1:03:18 provided with dnn uh in in the language packs uh as files which are stored in
1:03:25 the shared resources folder um
1:03:31 let's uh um that's an option it has one file for
1:03:36 each uh uh one big i want smaller file for for um
1:03:42 for the um countries and a very big one for all uh
1:03:47 regions of all countries and this makes it really difficult if you have
1:03:53 added or you are updating the list of countries and lists of
1:03:59 regions to keep those keys
1:04:04 maintained so that's something which is
1:04:09 puts an extra task on you to make sure that if you edit something in here they
1:04:14 are overwritten so you have to make sure that you do your changes in on the portal or on the host level and
1:04:21 uh in order not to get it overwritten upon the next dnn upgrade
1:04:28 because of course there are sometimes new countries and or countries renamed
1:04:34 like norse macedonia um but you need to make sure uh during an update
1:04:41 or they are updated in bigger frequencies within the dnn
1:04:46 framework but um if you updated it for uh for your site before then you need to
1:04:52 make sure that those changes will be kept [Music]
1:05:02 and the last um internationalization extra which came in the n9 sorry not
1:05:07 nine nine but in nine five i think uh it was uh gdpr support
1:05:12 um which consists of a cookie consent
1:05:18 um of the option to list and export all data of a single user
1:05:24 um or if he has a request that he wants to
1:05:30 all have all his data being deleted that you have an option to delete this
1:05:35 um this is not everything uh really um that's not uh uh
1:05:42 sufficient for being compliant with gdpr but that's what we can do on the platform level
1:05:48 but if you want to have gdpr if you're in european country and you want to be a hundred percent gdpr compliant uh you
1:05:56 need to have as a gdpr officer assigned you need to
1:06:02 make sure you have documented all the workflow of user data of data you uh you're storing for
1:06:09 individual users um whether they are website visitors or whether they are
1:06:15 clients or whether they are members employees of your company and that takes
1:06:22 a lot of effort and the website is just usually just a small part of it
1:06:32 questions just a a comment from my experience is
1:06:39 that doing canadian websites where i have to have parallel between english and french
1:06:45 i find that the two sexy components work very nicely that they they the
1:06:51 the way of handling the you know the two sides of the language works out quite smoothly so i
1:06:58 when i can i tend to use those components for my uh website creations
1:07:05 yes they're from switzerland and they have this problem every day
1:07:10 because they have three as at least three languages uh to provide for all my websites so of course they they take
1:07:17 care of this and uh know this uh very well um where whereas the engine corp
1:07:22 when they added content localization um had very little ex own experience
1:07:28 with providing multilingual sites so
1:07:34 yeah that's why it is what it is sorry
1:07:40 okay so uh let's have a look um where you enable and disable um all this stuff
1:07:48 let's go and now i need to switch
1:07:54 give me a second
1:07:59 do you see my dnn now
1:08:05 sorry yes okay yes yes sorry sorry it's a
1:08:10 challenge with multiple um monitors and i'm not that i used to the zoo
1:08:17 i told you there was a cloud yeah um
1:08:23 okay so what i said before most of the things are inside settings
1:08:28 here you have a section for languages [Music]
1:08:36 uh okay i need to log in again sorry
1:08:52 timed out um so if i'm going to site settings and going to languages you see that i
1:09:00 have two cultures installed by just installing the german language pack
1:09:05 and after i installed it i had to go into um into the edit option and had to enable
1:09:11 it just putting here's a switch and then i got two languages for my site
1:09:19 which is the english and the german one and you see immediately that you have the two flags
1:09:24 um here in the admin area and also usually on the skin
1:09:30 if it has a language selector included besides
1:09:36 you have the option in settings down here to specify a site
1:09:41 default language that means which is a default language a site should show up
1:09:46 um once when his visitors are coming and
1:09:55 visits visits aside the first time usually afterwards after he selected the
1:10:02 language as a language selection is stored in a cookie and if he's
1:10:07 logging in he has even the option in his profile to provide to specify his
1:10:12 preferred language and what will be used for the next login as well so that's uh something uh you should
1:10:21 take care of and then you can enable language browser detections is enabled by default and
1:10:28 usually makes sense that means that the browser that the uh its website checks
1:10:33 uh languages uh effect languages or uh you are specified in your browser
1:10:39 settings and looks for the language uh that is
1:10:44 best fitting to your selection
1:10:49 okay you also can use the language in the url which makes the language parameter which should be done always
1:10:56 otherwise you will have multiple different languages
1:11:02 in your website um [Music]
1:11:07 under the same url with different content which is not very good for cs0
1:11:15 okay and there's a there's a very dangerous um
1:11:20 button for allow content localization that's being used if you want to provide
1:11:25 the same content in multiple languages you wouldn't have really a multilingual side
1:11:31 here are also the um very as a resource as a language back verifier and the
1:11:36 language creator tool you can call down here
1:11:42 so if i close you see up here is a
1:11:47 the [Music] language selector in the skin
1:11:52 that will be visible not only for admins but also for any other user once you have more than
1:11:58 one active language for your site
1:12:07 okay one thing which is very well hidden on
1:12:14 this page is a language editor it's a language editor
1:12:22 hidden and uh behind this symbol it's really something you need to know
1:12:28 if you want to transl enter the language editor you have to click this icon and then you get into the
1:12:35 eight a translator and you select the file and you have to know that's one of the uh challenges in which file you
1:12:43 choose your um key you want to translate is and then
1:12:48 you can select uh choose for for one of the files by default it's a um
1:12:54 global resources globe file which is uh displayed
1:13:00 or used oh it was displayed this is no longer sorry and then once you select the language
1:13:08 file then you can get the you get the list of uh
1:13:14 keys of the key with it with the key in front the default value in english or in the
1:13:24 master language if you have just modifying um an existing language pack and or
1:13:32 overriding just a few keys and then you get your localized value you can enter here very easily up here you see the
1:13:40 mode this is very important and you should always make sure that you
1:13:45 have the right mode selected up here global means uh this is a mode for um
1:13:52 for the system we used to have a system i think before um that means those are
1:13:59 files either coming with a dnn platform or with extensions or if it's another
1:14:05 language with a language pack but um
1:14:10 it's means that's not something you have specific for your side if you click
1:14:17 switch to the host level then that would mean that you want to uh modify in this case it's a german
1:14:24 language packs installed just for your all your websites to make sure that
1:14:30 because you have some specific text on your site and if you go to the
1:14:35 last item which is called the nm platform 962 which is the name of this website and then you will edit
1:14:43 the language pack just for this a specific website
1:14:49 when would you do something like this if you have a different wording for example um for for your website when you
1:14:58 or you don't you you find a bug in your in the language pack and you want to override because it's hurting you then
1:15:04 you would usually use a host level because you can usually you would
1:15:09 contact the language pack developer and ask him to fix it or the core developer or the
1:15:15 module developer to to fix a as a spelling issue and with the next update you would get
1:15:21 it a corrected version um but if there are also a few keys which
1:15:29 are a site specific like uh further down you find uh the
1:15:35 messages as a content of the um
1:15:40 of the emails like here and those email um
1:15:45 uh content is something which is usually specific to
1:15:52 your site you might use a different content in your um
1:15:58 in your email body for
1:16:03 some specific notes like uh please do not reply to this email um in in one side in one site
1:16:11 you would maybe use a different phrase or even further down the other terms of use and also the um
1:16:18 a privacy statement and those stacks should always be adapted to your website because there's
1:16:26 a default text that comes with cnn is made for about 10 years ago
1:16:33 for company in in washington state and that's clearly written in the um
1:16:39 in california it's it's uh written in the text so you would have to make sure that those texts fit your need of your
1:16:47 website and if if you see those texts
1:16:53 going down give me a second
1:17:00 message portal terms for example if you see the
1:17:05 texts are quite long and and this these text boxes are not very nice to edit it
1:17:12 there is a specific tool which is called the rich text editor if you click that then
1:17:17 you'll get a bigger window and you can edit it much more comfortable
1:17:26 and html we could code it and once you click save then it gets html encoded and
1:17:32 [Music] when you save the file into the resix this is data into the res
1:17:38 x file [Music] question choose it
1:17:46 and you go and gather problems with this editor before
1:17:56 okay
1:18:05 good
1:18:15 okay so what will happen if i click the allow content localization feature
1:18:25 [Music] once i click it nothing happens because it just uh shows a button
1:18:31 we have the switch filled in because um it's really something you need to be aware of um
1:18:37 you shouldn't it's hard to undo there's not really an undue option you can disable the additional
1:18:43 languages but the but the additional pages will be still in the database and you will still
1:18:50 um take them with you around for the future
1:18:56 of your lifetime of your website [Music]
1:19:02 okay safe and enable
1:19:10 and that's another warning that this might take time and then you can say okay i would like to have all pages
1:19:17 translatable and i click enable this and then you see that it creates in this
1:19:22 kind this uh instance it's just a home page and i
1:19:28 think the resources page but in if you have a large website with
1:19:34 thousands of websites this can be very time consuming make sure it doesn't get on
1:19:39 interrupted and always make sure that you create a backup first
1:19:44 so and once you have this done then you have multilingual website
1:19:50 and now if i go into page settings
1:20:04 you see this extra um uh this extra uh um
1:20:11 section for localization and you you find here um which uh
1:20:19 some properties you can translate and um the modules on the page where you
1:20:24 can translate the title and you can uh specify whether whether they're
1:20:30 already translated and whether they are ready for publishing
1:20:38 and you can also use this specific button which means that it's connected
1:20:43 to the to the default language um in your translation
1:20:48 in this version to be clear the left on the very left side you have the base language the
1:20:54 portal default language which i switched to in german and uh the translated would be english
1:21:01 and uh of course um in this case i need to fix uh the
1:21:06 um uh i would here call this in is
1:21:11 edit the german ones because i didn't use modifications of the
1:21:18 default template but if you start with a complete german or
1:21:25 canadian french version then you and you want to translate it to english then you
1:21:30 would have to see all the french words left and right and then you can overwrite the text and
1:21:37 the right on the right hand side and fix it to make sure that the translated text is the correct one and
1:21:44 once you finish that and you click it's translated and when you once once you're ready with that then you click uh it's
1:21:51 published and then you will have this page being published
1:21:59 okay and there's also a button to make the
1:22:05 a localized page neutral that means that this page doesn't support any localization but in
1:22:12 that moment you you are not able to provide a localized
1:22:18 title nor localized module titles you just get the same page for
1:22:25 each uh language um but you know you can you it's neces but you can use it for
1:22:30 much if you have admin pages uh where translation is not
1:22:36 really uh having translated languages is not really necessary it would be unnecessary burden
1:22:43 for for the database and this connect
1:22:49 to disable localization for a single module that's something you would use if you have a multilingual module which
1:22:56 provides localization in itself
1:23:02 clip like to sexy content because otherwise you have copies and
1:23:08 then you have you you make changes in the english version and they won't show up in the
1:23:14 german ones because you have two copies of the same module which is not helpful
1:23:28 okay any other questions
1:23:35 uh it's been a while but i've found that over time the initial setup of the multi-language
1:23:44 ability is wonderful but then keeping up the content and keeping up the
1:23:50 updates to that content over time is what falls behind what um what do you
1:23:55 have a suggestions for getting those content editors and the site management uh to to stay on top of their
1:24:02 translations usually it's done um you should be able
1:24:07 um usually if you add a module um then of course it shows up in this
1:24:13 in this list or in inside settings um where you have uh
1:24:19 i think they used to be uh
1:24:26 no sorry
1:24:32 no not side settings uh give me a second and uh let me have it in the page here you see
1:24:39 um you you can see which pages do have localization and you can
1:24:44 check but of course if it's within the uh within a single um
1:24:51 uh module the content then of course cnn the platform doesn't have any knowledge
1:24:56 that this content has been updated and needs to be checked against um
1:25:02 localization that's something which is missing and maybe that's something we could um
1:25:07 we could add in the platform that you we um
1:25:13 make sure that uh this uh translated um or uh
1:25:19 there should be a modified button which should be um uh
1:25:26 automatically uh untranslates uh uh unchecked the translated button unchecked it's untranslated right
1:25:32 and that's just made it happen yeah we made an audit screen um for managers on one site where it
1:25:40 highlighted the content which had more recent
1:25:45 translations or more recent updates in one language versus another so that you could see there was a disparity in
1:25:52 something had been changed in one but not changed in all three languages so it was the point was to highlight
1:25:58 when it gets out of sync when they keep making updates to the english only and then never go back to the french or the
1:26:04 spanish to to also make updates to links or names or text or whatever is inside that
1:26:11 content i just consider it should be possible to use a trigger in the database to whenever
1:26:18 some module content is whenever the module is updated but the module is not getting updated that's a
1:26:24 problem uh not necessarily if you update a content of a module you won't get the module
1:26:30 itself doesn't get uh unnecessarily uh of the date last update it doesn't get
1:26:37 updated no it does get updated right yeah it needs for indexing so that would be an
1:26:42 option um to have a trigger that checks the state and say okay in this case i look
1:26:49 for i'm disabled translated for all the for all the
1:26:55 translated pages that would be an option
1:27:02 maybe that could be that it would automate this process would that help you ryan
1:27:10 i think there are outside cases where maybe that doesn't always hold but yes in the situations that we experienced
1:27:17 that's exactly what would help it just helps bring to the forefront or make people
1:27:23 aware that they've only done one part of their responsibility if they edit
1:27:28 one language but not the others yeah dnn also includes once you
1:27:34 when whenever you enable um this uh uh
1:27:39 um content localization and have more than one language it also includes a
1:27:46 creates roles for translators like here this translator enus role
1:27:52 which was automatically currently created when i enabled content localization
1:27:59 but what's really missing is a screen a translate um where you can see okay what do i have to do what do i have to look
1:28:06 for this is something it would be really a great improvement in the future
1:28:14 yes yes thanks sebastian can i ask a question
1:28:21 yeah i've not done this before and so uh i'm missing a step i understand the settings
1:28:28 and i followed you how you enabled content localization but the example site you have here is just the default
1:28:34 dnn uh site um how does one go about doing the next step which is changing that
1:28:41 blue block there at the top of the page to german from english what what where does that happen
1:28:47 sorry what do you mean um do you mean the language selector
1:28:53 here or yes i mean here i have you you yeah
1:28:58 click the german flag and what happens to the page in this case you won't see much
1:29:04 difference because i haven't really translated it but but usually it would switch directly the language
1:29:10 from from the english to the german language i get that and i understand that's what it's supposed to do but what
1:29:15 i'm missing is how do i get there um at this point here i'm editing the site i've just installed the german pack and
1:29:23 now i want to make this page look german what do i do
1:29:29 you go to site settings and oh sorry i need to switch back to
1:29:36 english um second
1:29:41 don is your question more about the content or is it about yes the content yeah because there's different there's
1:29:48 localization of many different pieces of dnn so yeah right yeah am i jumping ahead are you planning to show how to
1:29:54 change this blue block that says every journey begins into german so that we see the process of
1:30:01 what the next step is to change it the first step is that you go to languages you install the language and
1:30:08 the second step what you need to do now is to enable the language yes understand
1:30:14 and once it's enabled yeah and then you will see the flags yes understand
1:30:20 and uh at this moment you're ready to provide content local attitude to enable content
1:30:26 localization so like i just did yeah and then you create copies that will create
1:30:31 the copies and then you can go into the translated pages in the into these
1:30:37 copies and it provides the translations that means you just edit the content um
1:30:42 using uh in german by using german language yeah
1:30:48 just to bridge the gap here don you basically go to the actual module like in this case
1:30:54 this html module you see okay so you click on the german flag then you click edit page and then
1:31:02 you click edit the module yes like you normally would but you would then put in german and then it
1:31:08 would save it in a localized fashion and then you can flip flop got it got it that's the missing piece okay
1:31:15 sorry [Music]
1:31:31 so i changed it and now i change it just
1:31:36 for the german version and the english version is still the old one
1:31:42 got it got it okay so that's the big step you have then and
1:31:48 once you translated it you would go into uh page settings and uh i would would
1:31:54 say okay this is now translated and i can and can be published in the in the other language
1:32:00 so how does a person actually what's the practical way of doing this do you put two screens up like side by side and
1:32:08 have the ones showing the uh the english translation and the other showing the
1:32:13 uh you should you already get like a copy of the english language and you
1:32:19 would just overwrite the english text by german translation so you you know what you have to
1:32:25 translate you can do it in the text like i just did i know what what has been of course
1:32:31 it sometimes is helpful to have a second window um a browser window where you
1:32:37 just have the original text because you want to see how long it is also be aware
1:32:42 um if you're a module developer also please be aware that texts aesthetic texts you
1:32:48 have should be have enough space because other languages like french and in german are usually much longer than the
1:32:55 english one got it okay
1:33:02 all right thank you okay thank you
1:33:07 um any other questions
1:33:13 so my idea would be uh just test it out if you have questions just contact me
1:33:20 and thank you for your patience and thank you sorry for david for taking too much time oh no worries at all
1:33:27 yeah thank you for presenting this sebastian it's a good cover complex subject and
1:33:32 i know a lot of people uh get confused easily in what they're translating where
1:33:40 where their settings are and the clunkiness kind of of the yeah it's not very easy and i would have
1:33:46 uh prefer to have a different solution where you have really um
1:33:51 the modules in in localized versions instead of
1:33:56 using those localized pages which in my opinion makes it difficult it's it's easier of course to have a
1:34:02 different structure as a same page in different languages which if you want to have different modules on the uh
1:34:09 totally different content but then you would have different sites usually um currently uh
1:34:15 if you want to make it really a translated site this makes it yeah
1:34:21 you have to be very strict and very concrete would you to know what can be um
1:34:27 how it could be done and how it you handle the workflow otherwise
1:34:32 you can get oversea and you have uh english version which doesn't meet the
1:34:37 german version or whatever and if you have
1:34:43 sorry can i ask one more question um if you uh for instance you mentioned
1:34:50 about how a uh you wouldn't translate a module that already handles localization
1:34:56 so i'm just trying to get an understanding of uh let's i'm a big fan of easy dnn news for instance so if uh
1:35:03 if i use their localization uh which i i've not used yet but i'm
1:35:08 trying to plan ahead um if i use theirs then i would mark saying that don't
1:35:14 don't translate it um right when i switch from um uh when i does does easy dnn
1:35:22 news or other modules that follow localization do they understand the um
1:35:28 the system level settings so that when i know
1:35:34 they say they don't know about uh static localization is always the captions and so on that's always uh
1:35:41 already um built into the module um but if if to sexy content or another uh
1:35:48 dyna content module uh provides multilingual support for multi-lingual content then you should click here to to
1:35:56 disable a translation because otherwise you will have really copies of the
1:36:01 module for each language and then you the content will break apart if you have like news you will you won't be able to
1:36:08 translate a single news because in the english page you have different news lists and
1:36:14 then on the german you have a different module instance than like on the german page actually uh don easy dna news
1:36:21 supports it out of the box and it just kind of works the way that you would expect it to work with like an html
1:36:26 module where you just switch the language of the pa you know of the site
1:36:31 and then you edit the article in easy dna news and it will edit it you know
1:36:37 that that language's version of it and then you just flip flop back and forth um
1:36:44 got it okay i'm not sure how of course i must i haven't used easy dna
1:36:51 so i'm not sure um whether you need to take care that it's uh installed that the incident is not um
1:36:59 uh it's not a localized one i'm i'm not sure how they handle that there's a problem it's a
1:37:05 gap in in dna localization that the module cannot tell the platform uh about
1:37:10 its localization capabilities and that the platform would have the proper default and say okay uh if i provide a
1:37:17 look at it look like they if an end localization i use this as a chat module
1:37:24 now this is the missing piece we currently have on the web platform
1:37:32 well thanks so much sebastian for presenting i'm glad that we covered this and uh glad
1:37:40 you're recovering as well
1:37:45 okay well i guess we'll uh switch gears here i'm going to do a crash course uh on web components here and
1:37:55 go there we'll try try to respect everybody's time as much as possible here
1:38:00 everybody able to see the screen okay with web components
1:38:07 yes looking good okay awesome thank you okay uh i am david
1:38:14 just in case you didn't know um i this is not morally a formal presentation but
1:38:19 more of a kind of a working presentation uh recently we we've had some conversations in the
1:38:25 dna community slack about web components and
1:38:31 how they work and you know what the value proposition is for using them and so forth so it comes up quite often and
1:38:38 recently i'm gonna pick on aaron lopez here just a little bit since he's not here to defend himself but uh he was saying you
1:38:45 know i i i appreciate the tale of this but
1:38:51 i operate off of the show of it you know and um so like show me you know what
1:38:57 what what this means instead of uh just telling or telling is powerful but it's like
1:39:03 you're left to bridge the gaps yourself and and just kind of you know
1:39:08 figure things out well um several of us in the community have been using web components for quite some time and just
1:39:14 i'm not going to go into a ton of detail here but i just wanted to give a quick overview of web components
1:39:20 um the biggest value proposition of web components is that it is standards based and and what
1:39:26 i mean by that is not some fancy new framework that's out there or
1:39:32 library you know like we think of when we think of like bootstrap as a css framework
1:39:39 tailwind is a css framework angular is a you know a javascript kind of based
1:39:47 or typescript based library for building applications um or framework i should say it's not really a library jquery
1:39:53 would be a library right well web components is not any of those kind of things it's not something that an
1:40:00 individual or a group of individuals sat around and came up with and said here is our opinion of the way that you should
1:40:06 build apps moving forward well web components is actually a standard um and what i mean by that is
1:40:13 that it's based off of the the w3c standards it's actually built into
1:40:20 the core of browser support and so forth so like this is an example of the
1:40:25 the mdn web docs mozilla documentation which you know kind of the de facto standard and web
1:40:32 components is talked about here and there are different kind of segments of web components
1:40:38 and a lot of times the people are referring to custom elements a lot
1:40:44 when referring to web components so those are somewhat synonymous web components has come to overarching idea
1:40:51 but custom elements is like um just like you have a a paragraph tag in html well you can
1:40:57 have a my dash paragraph tag in there and that would be a custom
1:41:03 paragraph html element so um it's really nothing more than that it's it's not not super
1:41:10 fancy or hard to understand it's really at the core allowing you to use these things just
1:41:16 like you would use normal html the markup language itself
1:41:22 there's a concept of the shadow dom in here and this is kind of like an encapsulation of the document object
1:41:29 model so the entire page you know as part of the the dom the document object model but you have these little mini
1:41:35 doms or shadow doms where you can encapsulate some functionality for your custom element
1:41:42 so that's really kind of what that is and then there's a concept of html templates as well which we won't really
1:41:47 touch on today but i'll jump back over this is
1:41:53 there was a time where these various elements were not fully supported in modern browsers and the required
1:42:02 polyfills to actually provide that backwards compatibility
1:42:07 to those browsers and make them function which really wasn't a huge deal but it did add
1:42:13 an extra like four kilobytes file to to be able to support that in a
1:42:19 backwards compatible behavior but now you can see from this grid that all modern browsers are fully supported and
1:42:26 in a stable fashion for web components so it's really safe to start using them
1:42:33 with no hesitation whatsoever one of the biggest benefits of using web
1:42:38 components is that you are now no longer framework dependent so if you're
1:42:45 building angular applications you're dependent on the angular framework and all of its downline dependencies
1:42:52 if you're using react to build apps you're dependent on react if you're using bootstrap you're
1:42:58 dependent on bootstrap if you're using tailwind you're dependent on tailwind those are those are all dependencies and
1:43:05 we know painfully well that dnn has a ton of dependencies over over the years
1:43:12 and the goal is to to shift away from a lot of those dependencies because
1:43:17 they become it's not that those frameworks aren't any good or anything like that it's really not about that at
1:43:23 all it really comes down to the maintenance of those dependencies so
1:43:28 the big benefit of web components is there are no dependencies because it's standard it's just html some javascript
1:43:36 and css pure cms css in javascript so
1:43:43 it's uh there is no maintenance there's no oh angular jumped up to
1:43:49 you know to whatever version angular 55 or whatever they're on now
1:43:55 and we now have to update all of our dependencies on that um you know we we struggle with this a
1:44:01 lot with react you know in in dnn and dependencies because all the persona bars built on react modules so it
1:44:09 becomes painfully hard to maintain sometimes and stay up to date because this environment
1:44:16 moves incredibly fast so um that's just kind of the precursor
1:44:21 of what we're really kind of talking about here um i will preface this by saying i am using a template a visual
1:44:29 studio template that is that was created by daniel vladis who's
1:44:34 on here and daniel if i screw up or say anything wrong or you want to provide some extra clarity feel free to chime in
1:44:41 um but his template is kind of our de facto standard now for for creating custom modules
1:44:48 in dnn and out of the box it supports web api and web components based front
1:44:55 end now you can use this template for other purposes as well so like if you wanted
1:45:00 to have a module that is angular based or vue.js based or react based you could use this
1:45:08 template it's just got a little bit more work to do to to swap out some of the
1:45:15 web components front end for that so i'll show you some of that in just a
1:45:20 minute but you can get it on the visual studio marketplace here it's airware underscore dnn underscore templates
1:45:27 it's out on github as well so you can follow along out there with what's going on and yeah he's got some
1:45:33 nice documentation here to give you a little bit of a background but i'll be using it and
1:45:40 the reason i kind of say this because when you look at the code that i'll show in just a few minutes
1:45:45 it can be a little bit overwhelming because what you get out of the box is a lot of stuff
1:45:51 in there that you can use or not use so we'll try to focus on the parts that
1:45:56 that i made changes to but out of the box when you install the uh the
1:46:03 template or create a project using the template in visual studio it's going to wire up some basic
1:46:09 functionality for you at the beginning and i've got a site here that's loaded
1:46:15 up and showing some of the the basic um out of the box features of it
1:46:22 and let's see let me get logged into this i'll show you kind of how it
1:46:27 operates and it's it's not like crazy you know
1:46:33 beautiful ui kind of stuff just yet you know it's just kind of the out-of-the-box way to implement a search to add an item
1:46:40 to a list to have an item here and have some details about the item and an
1:46:46 ability to edit or delete the items in the list but that you know that kind
1:46:51 of covers a lot of use cases for modules because you end up creating lists of things you want a way to search those
1:46:58 things and you want a way to look at the detail of them you want a way to add edit and delete them so it just comes
1:47:04 out of the box with that there and you can replace those with your own components
1:47:09 so what i decided to do for this demo of of using web components is i was
1:47:15 thinking wouldn't it be kind of cool to create an app that uses i
1:47:21 we use ionic a lot for or ionic framework i should say for creating mobile apps and it's a
1:47:28 fantastic framework uh for doing that and um their
1:47:34 the ionic framework is really just a collection of web components
1:47:40 so i thought well why don't we blend the worlds why don't we use some ionic web components
1:47:46 inside of a dnn module excuse me
1:47:57 that'll teach me to take a bite to eat right before i start to start talking um one at a time yeah
1:48:06 take a breath take a drink exactly um so yeah i'm trying to rush through
1:48:11 this so we don't uh don't keep everybody too late so i thought well why don't i just
1:48:17 convert this app here to a to do app using ionic and i thought it would be
1:48:23 kind of fun and leverage some of the features that are already here but just replace the
1:48:28 web components that come out of the box with the the template with ionic
1:48:34 components so um ionic framework i'm using what i do is a
1:48:39 lot of this is based on documentation right here now i'm using
1:48:44 version 5 of ionic because i was having a bit of trouble with some of the um
1:48:51 some of the controllers that are in version 6 and the way that they work i just didn't have time because honestly i
1:48:56 started building this just a couple of days ago in my free time to try to try to get ready for the presentation
1:49:04 but this is really all i'm following is going through the components so i'm
1:49:09 you'll see in a minute where i used a an ion fab which is
1:49:14 uh just a uh a now i'm losing my
1:49:20 train of thought of what fab is but it's an action button something um something action button
1:49:29 floating that's what it is floating thank you floating action button um here so i just
1:49:34 come out to the documentation go to the ion fab and look and see how they use it
1:49:40 within stencil now i know i'm talking about a lot of different things here but stencil
1:49:46 is what the folks at ionic created it's really a tool to create web
1:49:52 components so this is what is being used inside of the
1:49:57 the uh template from daniel as well as to create your own web components and
1:50:04 it's really a a tool to create those it's called stencil.js and i should probably pull up
1:50:10 that website here real quick oops nope that is not
1:50:16 right let's see gotta spell it right there we go so they actually created this tool so
1:50:23 they could create the web components that they use for ionic framework version 4. so
1:50:28 it's the very tool but the thing is like it has there's so much we could talk about with
1:50:34 just it but that's what you'll see in action in just a minute so back to here
1:50:39 i i toggle over to the stencil whenever i'm looking at usage here because i want to use
1:50:45 these components in stencil and i just look at the documentation and say yep that's what i want so just grab
1:50:51 that you know and paste it over in there and as long as i've got my environment set up right in the project it'll just
1:50:58 work so the other thing that i'm i'm using is
1:51:03 ionicons which is really just a something kind of like font awesome
1:51:09 for icons it's a fairly small collection of icons that you can use
1:51:16 within ionic and i just use that because when i pull in ionic into the
1:51:22 mobile um the module then i automatically get ionicons there
1:51:28 so i just i just decided to use that so let's take a look at the
1:51:35 the app first and then we'll kind of do a deep dive the
1:51:41 also that this module is out on github on my personal repo account uh in a reap
1:51:49 i'm sorry in my personal github account on a repo called dnn dot ionic to do
1:51:54 so you can take a look at that out there and you know we can maintain it and move it a little bit forward and have a good
1:52:00 working example of this if anybody's interested so let's take a look and see how it works
1:52:06 so this is just a a clean install of dnn nine dot
1:52:12 whatever it is 9.10.2 i believe and um i am logged out right
1:52:18 now and let's wake up the site and you'll see very similar to what was
1:52:24 here um on the out of the box search ad
1:52:29 and a list now i'm logged in on this site but when you log out notice that the ad is gone and the editing
1:52:36 capabilities are gone well the same thing is true for here but the components look quite different right um
1:52:43 this is very ionic-ish for that and one of the cool things about io let
1:52:49 me inspect this and change this into a mobile view
1:52:56 and let me refresh notice i have an iphone 12
1:53:02 showing up here um for this well the look and feel just completely changed to
1:53:07 match the design guide for apple devices for ios devices
1:53:15 so that's one of the kind of cool benefits that you might get out of the box you know with with using ionic so
1:53:20 when i check something it takes the look and feel but if i switch this over to an android device
1:53:27 and refresh then the look and feel uses material design and you get that kind of look and feel
1:53:34 so that just kind of happens automatically out of the box when you're using ionic so that's one of the neat
1:53:39 things so let me log in now oops i should not have done it that way
1:53:47 i need to refresh okay there we go now
1:53:54 and feel free to ask any questions as we go along here i know i'm going kind of fast and throwing a lot of things at you
1:54:00 but as soon as i logged in now i have i was talking about the ion
1:54:06 fab the floating action button well that's the floating action button there that is replacing the add item
1:54:12 that was over here and i also have some editing capability now
1:54:18 i did something really silly just to just kind of prove i guess that i'm using ionic components here
1:54:26 that you wouldn't want to do this on a real website but you know if you're on a mobile device it's common to have a
1:54:32 swiping experience so if i swipe to the left you'll notice i've got some action buttons here so i
1:54:37 did it that way um just to show that i'm definitely using their um their web components and that it's working just as
1:54:45 you would expect it to on a in a mobile app it's working great within the context of the module
1:54:51 so what i would say is if you ever do use ionic or something for a dna module make sure you're you're
1:54:58 only using the pieces that really make sense for a web experience now while that works nobody's going to
1:55:05 think to swipe that right so unless they're on a mobile device so i wouldn't recommend something like that
1:55:11 but i just thought that would be kind of cool to show so let's jump into the co oh and the
1:55:17 search experience works just fine so if i start typing some text it'll filter
1:55:22 the to-do's by the text that i'm typing so that's working just great
1:55:28 so let's look at the code just a little bit on this
1:55:35 okay so we'll kind of focus over here on
1:55:40 the uh the right hand side and i don't i don't want to dig too deep into the module template but i do at least want
1:55:47 to give it a little bit of a high high level overview of kind of the way that things
1:55:52 are organized in here right out of the box when you create a module using this template you'll get a
1:56:00 build project you'll get some integration tests that are built into it
1:56:05 you'll get a module project which is your backend
1:56:11 type stuff so your web api code that's related to that
1:56:17 and you'll get a module.web project which is your front-end other project so
1:56:23 when you're building web components and stuff it's all front-end it's all html javascript so
1:56:28 it's front end work and then it talks to the web api in your backend project here
1:56:36 and then you'll get a project for your unit tests as well so the focus of this
1:56:41 is going to be i didn't change anything anywhere in this except for a few little
1:56:47 bug things that daniel and i were kind of working on to get her on that but i didn't change
1:56:53 anything anywhere except for the module.web project okay
1:56:58 so [Music] that's all that all these files that you see here
1:57:05 are the files that were here right out of the box and i've just done a few changes to it to bring in ionic and replace some of
1:57:12 the components so you'll have a source folder here the the front end
1:57:18 since it is a stencil app essentially that we're building here so
1:57:23 you can use stencil to create individual web components but you can also use stencil to
1:57:28 build web applications using a collection of web components or various web components
1:57:34 and it generates all the code that you need for utilizing it in the end
1:57:39 so let me pull up a little bit so i've got one file open here now this is view.html this is all
1:57:46 that is being used in the end to pull in the application
1:57:54 that is being built over in module.web and notice it has a my dash component
1:58:00 because that's the naming convention that's used in the in here right out of the box
1:58:06 for the components you'll see my component that's kind of the entry point and there's some other components that are consumed and used by
1:58:14 my component but my component is the only thing that gets put in the you know the inside of thing now notice
1:58:20 this is if you look at the path here it is in my desktop modules dnn oops
1:58:27 now let me just show you in the explorer over here so if you go over to resources
1:58:33 in the backend project there's a view.html file right here in
1:58:39 reviews and that's that's all it takes to actually render it and notice there are two script tags
1:58:46 one is in support of es modules and the other one is kind of a fallback
1:58:52 um if you're in an environment that does not or browser environment that does not support es modules and that's just a
1:58:59 later what um i'm going to botch this up explaining it but
1:59:04 it's where you don't have module support or some awareness of modules so if you're in some platform that doesn't
1:59:09 support or some browser it doesn't support yes modules but stencil takes care of that for you
1:59:16 it generates both the both of these javascript files and that's all that needs to be included
1:59:22 in there so um you may be asking well okay but you
1:59:28 style this stuff right you're styling it somehow so where is the css that controls the styling of
1:59:36 everything well it's actually in the javascript so there's a way to put css inside of the
1:59:43 javascript and that's kind of the way that that that works so you don't have to have
1:59:49 anything but these two includes here to deploy or use
1:59:55 all of the web components that you make so back over to the front end project what
2:00:02 would typically do is we'll use visual studio to edit the back end you know the c-sharp stuff
2:00:09 but i will use vs code to just open the module.web folder
2:00:15 and that's what i'm looking at here let me close some of these down
2:00:23 so we're looking here at what we were seeing in visual studio right here in
2:00:28 the module.web so i'm literally in that folder and i've opened up that folder in
2:00:34 visual studio code and this is a whole front-end project so it's node based using stencil
2:00:40 so you have a package.json file that has the various dependencies that you're that you're
2:00:46 using and you'll notice that everything is listed as a dev dependency here because
2:00:52 in the end all you need are those two javascript files that get put out so you really don't have any dependencies in
2:00:58 your deployed app i'm going to say that again because this
2:01:04 is the part that's that that makes this so powerful is that you don't have to deploy any
2:01:11 dependencies so if you're using a standards-based approach of using web components
2:01:18 you're just dealing with build tools here in generating the output which is the
2:01:24 javascript so you don't have to understand all this stuff right now but that is the benefit is that
2:01:32 you just end up with a pure html custom element and two javascript
2:01:38 file references and you're done so how do you maintain that well you
2:01:43 just maintain your web components you know so it's really great in that in that
2:01:50 regard um let's see how am i doing on time okay so i'm a little bit over already so i'll
2:01:55 just do a whirlwind uh tour here real quick i in order to use ionic i needed to pull
2:02:03 in ionic core which is an mpm package so i did that and i am using version
2:02:09 5.9.3 here because i had some problems with version 6
2:02:15 with using controllers because one of the things that i do in the front end is when you click this it has a modal that
2:02:22 pops up or an alert controller that pops up well that requires controller code and
2:02:27 it doesn't just work out of the box so you had i had some problems with the ionic six on that
2:02:34 okay so i pulled that in and then i did some magic to um to wire up
2:02:41 i created a global folder here that wasn't a part of the module
2:02:46 template that got built out and you've got this main
2:02:53 ts here that pull typescript file that pulls in some of the things that are are already
2:02:59 built in but i wanted a another one that was going to be a little bit more specific to ionic core because i didn't
2:03:06 want to in every single component i didn't want to have to re-import ionic core every single time so i wanted to do
2:03:12 it kind of in a global fashion so i created a typescript file that imports
2:03:18 ionic core globally and then i also have some imports set up
2:03:24 for things that i need from ionic from a css perspective
2:03:29 and that pulls in all of that css so that i can leverage all the ionic
2:03:35 frameworks css within the app theming type stuff and stuff like that colors and fonts and
2:03:43 things i have a little comment about this uh so even though you import ionic core
2:03:50 the whole package the only thing that's gonna get bundled is the things that you're calling so there's a concept of
2:03:56 three shaking so those javascript files end up being super small
2:04:01 that's right that's a good point daniel um within the individual conform components
2:04:07 i will actually use various things so i'll show one place i believe in the create here
2:04:13 at the very top of the file you'll see a import alert controller
2:04:19 from ionic core because i needed that controller specifically to be imported in this component so i pulled that in
2:04:26 so um yep and the way that kind of gets wired in for those that are that are interested
2:04:32 in this is you may say well how did that know to load this stuff well there is a stencil config typescript file here in
2:04:39 the root which is part of it i added these two lines which are supported with stencil
2:04:45 um oops two lines i highlighted three but yet i
2:04:50 there we go so global script i am referencing that app.ts file that i
2:04:56 created in global style i am referencing that sas file that i
2:05:02 um that i referenced and stencil uses you can use sas and stencil for for css compilation
2:05:10 or sas compilation on that and it's using the sas plugin here and all of this is really already
2:05:16 already set up for me except for these two lines here so that's the only thing i really changed on this
2:05:24 so then we get into the individual components and i'll just really quickly burn through this but the entry point is
2:05:31 my component and you could rename these and call these you know anything you want to
2:05:38 for that as long as they meet the kind of naming standards that are required for web components but for each component
2:05:46 you're going to have a tsx file which is a typescript-based jsx file
2:05:54 if any of you have had any experience with react react uses
2:05:59 jsx so i uh stencil uses a reactive base system is not react so you're not
2:06:06 pulling in react don't don't go get concerned there
2:06:11 but that is that is what that is and you can have a css file or a sas in
2:06:18 this this case since we're using the sas compilation that goes along with it and that's really all that you have to have for a
2:06:24 component to operate and your sas could be completely empty as well so you really
2:06:30 just need a tsx file and that's it the readme file gets auto generated by stencil so there's a lot of things that
2:06:37 are baked into stencil that just does things for you and you don't have to worry about it so it's well
2:06:43 documented didn't write a word of this it reads whatever i do in my
2:06:49 component and it creates the documentation accordingly so everything i did my
2:06:55 notice it changed some things here um that my ion fab my fab button that i put
2:07:01 in my icon and ripple thing it just pulled all that stuff in because it just knew how to
2:07:07 read it and create the documentation so if you were to look at that in a markdown
2:07:13 preview let me see
2:07:18 very nicely formatted documentation as you can see over here on the right of how to use this component
2:07:25 so if i wanted to use just this component by itself then this is this is the way i
2:07:31 can do it okay so we've got oops
2:07:39 so right here a lot of this is what was here to start with
2:07:45 about the only thing that i changed was i swapped out the
2:07:50 input control that was being used for the search i actually swapped it out for an ion search bar
2:07:57 and i wrapped that search bar that component with an ion toolbar
2:08:02 and i wrapped the ion toolbar with an ion header and you can see i didn't really go through much work here um i
2:08:10 reused some of the code that daniel has in the template for his search bar uh right in here i just had to figure out a
2:08:17 couple little things like how to get to the value for this particular
2:08:23 component but we're dealing in typescript here so you have um nice intellisense when you're typing
2:08:30 things and all that just kind of worked when i
2:08:35 swapped those out and then my create is another component so within
2:08:42 this component i'm referencing another component for my little add
2:08:47 fab you know that i put in there so under the my create
2:08:52 notice we're just using html marker up here this is in the render um i'll be happy to deep dive you know
2:08:59 with anybody that's interested in this and i'm sure daniel probably would too because this is really fun stuff once
2:09:04 you get used to it but under my create we go down to the render section here
2:09:11 and you can see where i left in what was in the template that's just a comment
2:09:16 and there was a button so there was a button for the ad before i swapped it out for an ion fab
2:09:24 there's my ion fab and i had to just kind of wire it up and um that's where i'm using a an ionic
2:09:32 icon ionicon to put inside of the fab button so the little plus sign is
2:09:38 that's how you reference that so it just illustrates that
2:09:45 any web component can be used pretty much anywhere you just have to kind of figure out how
2:09:50 it works within that context and then put it in so the hard part was just wiring up
2:09:56 ionic and pulling an ionic to the project and making controllers work
2:10:04 but other than that all the you you know pure ui components like ion fab and stuff like that it just worked when i
2:10:11 put it in there so it just only took a little bit of html and i'm i'm done
2:10:16 so it's really fun so there's a lot to this that you could get overwhelmed with pretty quickly i don't want you to get
2:10:22 too bogged down with all that kind of stuff but it's just an example of how you can use
2:10:29 pure web components and this in this case from another you know
2:10:34 set of web components all together that's intended a little bit more for mobile and use it right into a dnm
2:10:40 module any questions or did i really confuse
2:10:47 everyone
2:10:54 no i'll chime in to say that it makes sense we did a splash of an introduction of this
2:11:00 gosh was it the beginning of 2021 it was it's a while back but you gave us a flavor of this and i think maybe at the
2:11:08 time everything modern was supporting but some of the other ones didn't have everything supporting and now that it is
2:11:15 there uh seems like it's the type of thing we should all start learning to use and maybe uh
2:11:21 rely on some other frameworks a little less and rely on what's built into the browsers a little more
2:11:28 yeah um daniel i don't want to put you on the spot but like i know you've been building a ton of these modules for
2:11:36 you're not in the beginning of this anymore i mean you've been doing it for several years now so
2:11:42 in your experience like is this really wise to go down this path
2:11:47 rather than just you know doing things the way we used to um you know with websites absolutely
2:11:52 because the the what's really really cool is that you have one thing right the component that
2:11:58 encapsulates the look and feel it encapsulates the behavior it can fire up events it's
2:12:05 really just like a real html element right you have a button the button fires up events uh
2:12:12 whatever you put in the button is any html so the same thing happens with web components you can have slots and make
2:12:18 it very flexible by just putting whatever html you want inside of the component
2:12:24 kind of a wrapper like a button is as for support
2:12:29 the only browser that's a little bit edge case is internet explorer 11 and
2:12:35 under but on 11 even on 11 i mean i don't see any good reason why anybody
2:12:41 would have under 11 in the enterprise i know that ie11 is
2:12:46 still like the only option apparently for security reasons which is a bad reason but
2:12:55 it's still supported but the two bundles that you have with es modules and without ds modules what's cool with
2:13:02 stencil is that it's going to detect what browser you're on and it's going to load what it needs to work on that
2:13:08 browser one thing that doesn't have polyfills is to have css variables declared on
2:13:17 elements so if you wanna customize those components one thing
2:13:22 with the shadow dom is it's like a little html
2:13:27 iframe if we want it's not but it's isolated from the rest so
2:13:32 your external css if you're using channel dumb will not leak inside of
2:13:38 your component so in order to customize the component you have to declare css variables and
2:13:43 then consume them like we see on line seven eight that you had or
2:13:49 yeah cd line seven eight so this var dash dash something that's a css
2:13:55 variable so if i want to change how my component looks i just have to declare that variable
2:14:00 in any parent of this element and it's going to use that value well on ie11 the
2:14:06 only thing that doesn't have polyfill if you want to override it you have to do it on the root level
2:14:11 as in any other browser it's any parent but other than that everything works perfect and stencil handles loading the
2:14:18 polyfills needed if your browser doesn't support inherently those features
2:14:26 yeah absolutely so and you do have david yep
2:14:32 i just had a quick question could you highlight somewhere that shows an example of how it gets data from the
2:14:37 back end yeah absolutely so let's just look at the list here um
2:14:45 this is the load for this so um and let me just find my way through this
2:14:52 where it is okay so the item client here is
2:14:57 something that is imported from the services in the project so if i flip back over to
2:15:03 my visual studio go to services well it's it was in here i'm sorry
2:15:09 um services and service is there
2:15:16 so this will be let's see item client is right here and he did this in a generic kind of fashion
2:15:22 so you could rename these to make sense for for your world i can speak a little
2:15:27 bit about this though so within this template it's actually auto-generated for you
2:15:35 so if you go in the c sharp part of that
2:15:40 on the uh controllers
2:15:46 it's going to be in the controllers folder and item controller
2:15:52 so if you scroll to one of the endpoints get items page let's say whatever so you
2:16:00 see uh the decorators above these methods they have a swagger response decorator
2:16:05 and swagger is basically used to document apis but it also has
2:16:11 features to auto-generate your typescript client so within this
2:16:16 template it's not specific to web components but within this template as long as you declare
2:16:21 what you're returning if it's an okay and what you're returning if you get an internal server error you know you
2:16:27 declare the different things that it could return well when you run a build it's going to
2:16:32 generate that service ds class automatically with strong typings with comments and everything which is pretty
2:16:39 cool that's awesome so you're not returning everything as an object yeah exactly this thing is auto
2:16:45 generated all of this so we don't have to write the services you could roll your own
2:16:50 but if you can wrap your head around the way that this is being generated it it just handles it for you including
2:16:57 your models and everything yeah and it's really really cool if you go on where it's getting called
2:17:06 you have strong typings so let's say let's say between 87 and 88 there
2:17:17 like you put a new line and you do items dot
2:17:23 oops sorry results that items that i'm sorry so result dot well you get
2:17:30 typings here and if you do items that well let's say item square bracket zero let's say we
2:17:37 access the first item in the array and then you do a dot you're to have the properties of that object and
2:17:43 the code comments that you had in your c sharp so they port over
2:17:49 as ts comments js so each item in that list has a name
2:17:56 well an id a name and a description and i'm displaying the name on there
2:18:02 so down here in my template let's see right
2:18:07 here's my item i'm actually putting right there and that's all it really took
2:18:14 so this is really the only thing you end up having to write so that you know you're in typescript world here so you
2:18:20 do have to kind of have that um awareness and everything of how that works but
2:18:27 this is more complicated we'll look at but a simple in the end it's just doing a simple fetch
2:18:32 you know against that web api yeah um the channel in the back end
2:18:41 did that answer your question there jeremy yeah that was awesome
2:18:49 yeah i debated on whether or not to use the the template on this but i really
2:18:54 i i would love for more people to wrap their head around this template and start using it because i just think it's
2:19:00 fantastic what daniel's created here so it's a little bit overwhelming when doing a quick demo like this to not get
2:19:06 buried in all the the details of some of this stuff which literally is magic right you know it's or auto
2:19:13 generated stuff um it feels like oh my gosh i got to learn all that stuff well no you really don't have to learn all
2:19:19 that stuff it's uh so much of it's done for you and you can just really focus on the front end work
2:19:25 that you need to do i like magic when i can tell it saves me from 200 or more lines of code and agony
2:19:33 yeah because there's a lot of duplication when you're in this kind of module template where you have a web api
2:19:38 in the javascript front end you have to duplicate everything because you have the client server part and you
2:19:43 need to have the same kind of objects and stuff so this handles that uh surface
2:19:49 friction automatically and then you just go on with your day and you have your typings generated for you
2:19:57 so i'll show this real quick and then i'll kind of wrap up here but um i created a couple of methods for you know
2:20:03 i showed you the sliding options there for editing and deleting i didn't wire them up to actually do the deletion and
2:20:10 the in the editing but i wanted to just console log out
2:20:15 you know something to show you that i've clicked those buttons so just kind of shows you how to wire things in
2:20:20 with this and it works similarly with other web components as well this is not ionic specific but if i pull
2:20:27 up my monitors went on the fritz just a few seconds ago so now i've got to rearrange
2:20:33 everything again bring it back over so i'm going to inspect on this and
2:20:39 i'll go out of mobile view and let's just refresh make sure
2:20:49 okay so if i take one of these items here and just swipe it to the left and i click edit let's watch the console down
2:20:56 here and you'll see that that event got fired up and it's clicked and that is the actual
2:21:02 event that came from that and all the information that you have access to for that particular element
2:21:10 which is a lot it's all the information that you kind of kind of get from it
2:21:15 same thing happens when i click delete but it's delete clicked
2:21:22 so you know chrome's amazing now if you click down far enough you'll see what you had for lunch in those lists too
2:21:27 yeah that's amazing and i you know if you've used firefox developer edition it's even
2:21:34 even more powerful in this area but i have had a hard time using it
2:21:40 and this is like a really a pointer event but you can also have custom events that
2:21:45 are simpler and just provide the id of the item that clicked or something
2:21:51 that's also something uh stencil will help you do properly
2:21:57 exactly any questions i apologize for having to go through it so quickly but
2:22:05 happy to answer questions offline or give it a little bit deeper dive into
2:22:10 specific areas offline if anybody's interested
2:22:15 all right i got to jump out but nice job i really appreciate this this is very exciting thanks david oh you're welcome
2:22:24 okay if there's nothing else then i'll go ahead and end the recorded portion of
2:22:30 this meetup thanks for everybody for joining us i think our next meetup is in february
2:22:37 and it will be on the 17th of february that's right uh i don't
2:22:42 do we have anybody on board for that yet ryan i'm sorry i didn't even look beforehand yeah i don't believe we do yet and that
2:22:50 might be a good point to mention to everybody who's on and um everyone was watching this after the
2:22:55 fact that uh in the last year david uh poindexter has done a fantastic job
2:23:01 uh curating our content and really chasing after uh topical speakers and
2:23:08 people to come present exciting interesting ideas and things with us and we had a great year last year
2:23:14 some of the more watched and attended meetings that we've had in a while and we've also shaken up that format and
2:23:20 time of day between uh being able to have this during for us in the eastern part of the united states
2:23:26 daytime meetings versus nighttime meetings to help some of the folks across the pond to be able to join us so
2:23:32 all that comes around to say again if you are interested in speaking or have topic ideas that you want to have
2:23:37 us chase down reach out to southern fried dnn user group and we
2:23:43 will we'll make it happen yeah i will say um that uh we we've got
2:23:48 some new people bubbling up here or and some real ogs here as well like chris
2:23:54 hammond is gonna be speaking i think eileen martin is going to step out on a on the edge there and present something
2:24:00 in march so um this could be you uh for february or any future one please just
2:24:05 let us know the so february the 17th at 6 30 p.m eastern is the next one and
2:24:11 look forward to seeing everybody there


Southern Fried DNN: FOLLOW-UP to GA4 + DNN Connect 2023 RECAP
Jun 15, 2023

This meetup will serve as a follow-up to last month's recorded-only meetup on Transitioning to Google Analytics 4 (GA4). Watch the replay on YouTube HERE and bring your questions/comments. Afterward, we will recap all the wonderful things from DNN Connect 2023. There were so many great takeaways, so you will not want to miss this - there's something for everyone!

Southern Fried DNN: Transitioning to Google Analytics 4 (GA4)
May 19, 2023

As many of you know, support for legacy Google Analytics will cease in July 2023. In this meetup, we'll discuss what it takes to make a smooth transition to Google Analytics 4 (GA4). We'll also cover the various methods for implementation within a DNN instance.

Southern Fried DNN: DNN Summit 2022 Recap + Community Project Highlights
Feb 17, 2022

This month, we'll be recapping DNN Summit 2022 and then we'll take some time to highlight a few exciting community projects. Trust us, they are worth knowing about and getting involved with!

Southern Fried DNN: Sebastian Leupold (Internationalization) & David Poindexter (Web Components...)
Jan 20, 2022

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!

Southern Fried DNN: David Poindexter (DNN Strategy) & Daniel Valadas ("I Like Vanilla!")
Jul 15, 2021

Bringing overall strategic direction for the DNN Platform project and coordination between all leadership teams. As the DNN Platform and DNN Community evolves, new ideas and technologies will surface. These are great and it is essential to have a "gatekeeper" funnel to ensure all parties are in the loop, providing feedback, and are contributing to any proposed changes in direction or special project efforts. Learn more about the exciting special projects underway and on the horizon.

Southern Fried DNN: A Web Components DNN Future
Aug 17, 2018

Are you tired of JavaScript Framework Churn? Perhaps some of my latest development efforts will help brighten your day and improve your outlook for future DNN development possibilities. While this project is in the early stages, I am so excited about it and wanted to go ahead and share what I am working on for the DNN community. I believe this contribution will have similar, if not greater, impact to future DNN development as some of my previous open source contributions.

Southern Fried DNN: URL Redirects + What's Next with nvQuickSite + DNN Corp Webinar Post-Game
Sep 22, 2017

Have you ever had to install DNN? Did you do it with nvQuickSite? If you didn’t then you may have taken longer than needed. nvQuickSite is a great tool for installing DNN created by our very own David Poindexter of nvisionative. The DNN Community loves nvQuickSite and uses it all the time to help make installing DNN more efficient.

Southern Fried DNN: JWT in Action with DNN 9 & Ionic
Mar 17, 2017

This will be an exciting walk-through on exactly how to get setup DNN 8 or DNN 9 for authentication using JSON Web Tokens (JWT). Once we have have DNN configured properly, we will test using Postman. Then the real fun will begin as we integrate with a mobile app using Ionic. These will provide the fundamental building blocks for you to connect any outside application to a DNN instance using best practices.