| 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 dnn.com 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 managed.com who uh proudly supports our meetup and |
| 1:30 |
hosts the southern fried dnn website again that's southern fried dnn.com 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 manage.com 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 |
dnncommunity.org 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 manage.com 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 dnn-connect.org or dnnconnect.org 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 a.net 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 webcomponents.org |
| 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 stencil.js.com oops nope that is not |
| 1:50:16 |
right let's see gotta spell it right there we go stencil.js.com 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 item.name 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 |