WEBVTT

00:00.000 --> 00:18.920
Okay, welcome to the fight on their room where we will explain some stuff about jungle and

00:18.920 --> 00:28.920
HTML and out to discuss with LLM by Juren, okay, let's go.

00:28.920 --> 00:35.320
Okay, yeah, hi there, welcome to my talk, skips the overhead line web development with

00:35.320 --> 00:46.920
Django, about me, I'm Jorn Vassava freelance software developer from this is off, I have some

00:47.160 --> 00:53.320
jump speaking pattern podcasts and yeah, I created this Django resume package, I'll use as an example

00:53.320 --> 01:04.040
throughout this talk, okay, what do you expect from this talk? At first, don't try to read all the

01:04.040 --> 01:12.200
quotes, I have some in there because I couldn't resist, but the slides of the talk are in the

01:12.280 --> 01:19.240
detail page of the talk, so can read them later, if it's too fast. And at first, there's three parts,

01:19.240 --> 01:25.240
the first part is what's up with modern web development, do we really need an SPA for everything,

01:25.240 --> 01:32.360
single page application or are there other ways? Then the second part is about how to build interactive

01:32.520 --> 01:39.240
websites without all this blood and in a third part, I'll try to do a live demo,

01:41.560 --> 01:48.440
yeah, we'll see how that works, okay, yeah modern web development, there's a lot,

01:49.480 --> 01:55.880
there's a front end, a back end web frameworks on front end side, on the back end side, and then there's

01:55.960 --> 02:03.880
some communication over rest API, which are not really restful, but more traditional kind

02:03.880 --> 02:10.520
server, Jason, the API is tightly coupled, and then we have another different framework,

02:10.520 --> 02:17.560
probably for CSS stuff, and build pipelines on its front end for TypeScript to JavaScript and

02:18.520 --> 02:29.960
back end, and yeah, it's complicated stuff, and if you read some book on design patterns or

02:29.960 --> 02:34.920
software architecture, probably there's a place for every pattern, probably multiple places where you

02:34.920 --> 02:43.160
can find even dependency injections or stuff like that, which is kind of nice, but also

02:44.040 --> 02:52.120
can get a little bit difficult, but yeah, we maybe we didn't choose to do that because it's

02:52.120 --> 03:00.920
easy, we wanted to go to the moon, the little website, which is difficult, and yeah, we do it on purpose,

03:03.800 --> 03:11.000
but maybe there are things we didn't expect, and for example there's also the people

03:11.880 --> 03:20.280
who don't want to write JavaScript, and then there are people who don't want to write

03:20.280 --> 03:26.200
Python, and nobody wants to write HTML and CSS, and sooner or later you get a front end

03:26.200 --> 03:32.600
back end split between the developers, and then those paths have to communicate, which is kind

03:33.560 --> 03:42.120
of yeah, they don't want to do it maybe, or can't, in some projects we used Tailwind for CSS stuff,

03:42.120 --> 03:50.040
and from that needed to use the Python backend web server also, and it was months into the

03:50.040 --> 03:56.680
project that we found out during a paper programming session, that yeah, they didn't configure

03:56.680 --> 04:02.280
their virtual ends differently, and the tailwind CSS process has to run at run over all the virtual

04:02.360 --> 04:08.840
ends stuff, and gigabytes of dependencies, and it took 40 seconds for changing some classes

04:08.840 --> 04:15.560
in HTML to show the feedback, which will feedback of changing the layout, which was kind of

04:16.600 --> 04:24.760
made them with angry, yeah, but also, paper programming, many institutions don't do it,

04:24.760 --> 04:30.200
because they think it's expensive, and paper programming between front and the backend people,

04:30.280 --> 04:39.080
oh, that's almost unavoidable expensive, but yeah, so they have to live with some minor inefficiencies,

04:39.800 --> 04:49.960
sometimes, yeah, making our life even harder, okay, so it's probably not easy, why are we doing that?

04:49.960 --> 04:57.640
Why are we buying into all this complexity, and I think the reason is because of the non-functional

04:57.720 --> 05:03.800
requirements, we want smooth user experience, appealing visuals, we now building websites is

05:04.920 --> 05:10.920
complex and expensive, so we want to be able to show the internet stakeholder's paying for

05:10.920 --> 05:19.000
that some wow effect, so it shouldn't, at all costs, it shouldn't look like a website, so it has to

05:19.000 --> 05:26.040
be something really premium, and then there's also the developer experience, we shortly talked

05:26.360 --> 05:33.400
about it, there are just, if you have a problem like that, you can probably do much,

05:34.600 --> 05:40.600
because for example, if you have a software development department, which is used to climb stuff,

05:40.600 --> 05:47.480
and if you talk to them, yeah, maybe it's time to write some HTML and CSS, they will kind of push back,

05:48.840 --> 05:55.240
and maybe you have to persuade them in another way, like telling them, oh, that's this

05:55.240 --> 06:02.200
shiny new typescript language, which is kind of similar to Java, and you don't have to touch

06:02.200 --> 06:10.360
HTML and CSS, and you have only, you can use your standard IDE and just compile for a different

06:10.360 --> 06:19.640
build target, right, and yeah, then you might have changed your legacy enterprise development department

06:19.720 --> 06:32.200
to cutting at WebDef team and profit, so, but if you don't have those requirements, maybe you

06:32.200 --> 06:40.680
can do something much simpler, like choosing some of those old boring back-and-back frameworks,

06:40.760 --> 06:49.480
like Django, which is community government, no major drama expected there, it works, you can

06:49.480 --> 06:57.640
upgrade it in last years, I didn't hit any major rock blocks update in Django and spend your

06:57.640 --> 07:05.160
innovation tokens elsewhere, which is kind of great, and Django, in the time it was founded,

07:05.160 --> 07:13.080
there was not really a front-end back-and-split, and yeah, then there was for a long time, people wrote

07:14.360 --> 07:19.480
back-and-a-p-i-s using Django rest framework or something like that, and then building front-end

07:19.480 --> 07:27.240
on top of it using single-page application, next year's React, UGS, something like that, but now

07:27.320 --> 07:35.720
in the set, Django doesn't have really have a front-end story, but now it's changing again,

07:35.720 --> 07:42.680
and maybe you can do a lot of front-end stuff in Django again, and Django kind of is the front-end framework

07:42.680 --> 07:51.560
and why not use it as a smart, and this is because there have been, for example,

07:51.560 --> 08:00.360
development in CS-Esland, CS-Es is much better now than it was, you probably don't have to use

08:00.360 --> 08:09.080
a big CS framework to just make responsive websites, pre-processors are probably no longer essential

08:09.080 --> 08:15.240
because you can use custom properties, and yeah, you have quantitative queries, grid,

08:15.480 --> 08:24.440
flexbox, all working well, and maybe you can even use CS-Es to your advantage, like using

08:24.440 --> 08:29.720
releases as electors and the cascade, and there are maybe your friends, if you don't have to use

08:30.520 --> 08:36.440
utility for HTML components and copy them, because you can compose your sites layout,

08:37.560 --> 08:42.760
maybe using layout primitives, and CS-Es electors, there's a book I like, I mentioned, it's called

08:42.760 --> 08:50.680
Every Layout where this approach is described in more detail, it's just I want to show it a little

08:50.680 --> 08:59.320
bit so you can check it out, and maybe the most important part is HTML's, so HTML's, I don't know,

09:00.360 --> 09:07.320
how many people are knowing what HTML's is, okay, most of it, maybe I don't have to talk

09:07.960 --> 09:17.000
about that, it's the next evolution of the HTML Pokemon, it's kind of, in old HTML,

09:17.000 --> 09:24.440
you can only two elements can do HTTP requests, the anchor tag and the form tag, and when HTTP

09:24.440 --> 09:31.240
response is coming back from the server, the whole DOM has to be replaced, and the DOM has to be re-rendered,

09:31.240 --> 09:36.920
and it's kind of tags about a second, and you have a flash of white in which we can, so you

09:36.920 --> 09:43.240
will notice, it makes multi-page websites feel like they usually do, and for single-page apps,

09:43.240 --> 09:49.320
it's different because they only have to update parts of the websites that have changed, and this

09:49.320 --> 09:59.160
is much faster, the latency, fetching JSON from a backend API versus fetching HTML is basically

09:59.160 --> 10:06.360
the same, there's no difference, but with HTML's possibility to just fetch small snippets from the

10:06.360 --> 10:13.880
backend, and then swap them into the DOM, and it's feels like an SPA, and another advantage is that

10:15.400 --> 10:21.880
it's really restful, it's for HTML's, the stack is called whole hypermedia, and whatever you'd like,

10:21.880 --> 10:26.200
you don't have a tight coupling between front and the backend, and you can just change your backend,

10:27.160 --> 10:35.480
don't modify your front end, it's also great, yeah, and HTML's is not the only game in town,

10:35.560 --> 10:42.920
there are different approaches for Lara, there's like Maya, for Rails, there's hotwire,

10:44.120 --> 10:51.080
and for Elixir Phoenix, there's like you, and for Django, people usually use HTML's, which is kind

10:51.080 --> 10:55.400
of a little bit special, it's different, but I like it, because it's more low level, you can do

10:56.600 --> 11:02.600
a little bit more things, yeah, but it's not as tightly integrated, yeah.

11:05.640 --> 11:13.000
Okay, so let's have a look at Django resume, as freelancer sometimes, you have to update your CV,

11:13.960 --> 11:22.280
and, oh, procrastinate, by building CV management app, and for me the choice was kind of obvious,

11:22.280 --> 11:28.440
and, yeah, I looked at existing solutions, but they are all were implemented in things like

11:28.440 --> 11:33.960
next jazz, and I thought, I'm doing Django all the time, maybe I can pull it off just using Django,

11:34.600 --> 11:43.480
how hard can it be, and, yeah, there are some additional functional requirements

11:43.480 --> 11:50.520
when you write something like a CV management app, and the most important is that it probably should

11:50.520 --> 11:58.440
be easy to customize it, because different people have different needs, so academics have maybe

11:58.520 --> 12:04.200
list of publications, designers have pictures, images, and portfolios stuff, and, yeah, that's

12:04.200 --> 12:11.000
different for every profession and so, and I don't know every profession, so, I can do it by myself,

12:11.000 --> 12:16.280
I just provide an application architecture, so people can build stuff they need for themselves,

12:17.800 --> 12:25.960
and, yeah, the data for each plugin is stored in a central JSON field, and under the name of the

12:25.960 --> 12:32.200
plugin, so each plugin has its own namespace, and, yeah, you don't have to write, if you want to

12:32.200 --> 12:37.720
write a new plugin, you don't have to write any Django bottle, and you don't have to do any

12:37.720 --> 12:45.480
migrations, because, yeah, it's all stored in the JSON field, but you still have to specify

12:45.480 --> 12:53.000
somehow the schema of your data, and also do validation, and you can write just the Django form for

12:53.000 --> 13:00.360
that, because, yeah, they do validation, and you can specify the schema, and also you have to

13:00.360 --> 13:06.520
make sure that the clean data attribute of your Django form is JSON serializable, but if you

13:06.520 --> 13:11.560
write a form that does that, then, yeah, most of the programming part of your plugin is already done,

13:14.440 --> 13:21.960
you need two things, additionally, one Django template to render the plugin data to HTML,

13:22.040 --> 13:32.680
to show your plugin, and one Django template to render a edit interface for your plugin data.

13:34.760 --> 13:41.800
Yeah, so, and then there's some edge cases like, if you have lists of stuff, if you add a tag

13:41.800 --> 13:47.000
to something, then you probably don't want to send all the data to your backend, and then,

13:47.320 --> 13:53.160
because it's not here, if you get rendered HTML back, then you have to click on edit again,

13:53.160 --> 13:59.960
if you want to remove the tag, so it's better to manage the state of those lists in the front end,

13:59.960 --> 14:06.920
and then if you've finished editing just send all the data to the backend, and I use welcome

14:06.920 --> 14:14.360
comments for that. There's a second one called editable form, which is kind of a shortcut for

14:14.360 --> 14:23.480
not having to style forms, because this could also be hard, you can just reuse your plugin

14:23.480 --> 14:31.320
data to HTML template, and sprinkle in some content editable attributes, and then have a form

14:31.320 --> 14:40.120
from HTML form rendered from your Django form, which is just hidden, and then have a web component,

14:40.120 --> 14:47.320
which connects the content editable text to the input fields of this form, and then subit the form

14:47.320 --> 14:54.280
just using HTML. Yeah, you could also use an SPA for that, and it would probably make sense

14:54.280 --> 15:01.160
if your UI requirements are really complex, but web components have some advantages like

15:01.160 --> 15:07.640
you don't have to download a big bundle, they are standard space, so you don't come back into

15:07.640 --> 15:12.760
your project a few months or years later, and you have to update everything, and it doesn't work anymore,

15:12.760 --> 15:20.280
so that won't happen using the components. But web components are also a little bit more complicated,

15:20.360 --> 15:26.360
because you have to write some more boilerplate, and it's a little bit more complicated, but

15:26.360 --> 15:33.640
you can, what I did was I just wrote the functionality in spaghetti JavaScript, and then pasted

15:33.640 --> 15:39.880
this JavaScript into an LNM, and said, oh, maybe you can generate a clean web component out of this,

15:41.240 --> 15:49.720
and write some unit tests in it, plot 3.5, so net it, and it looked quite good, and so I didn't

15:49.800 --> 15:56.680
have to remember all this lifecycle hook stuff in web components, because LNM did it for me.

15:58.360 --> 16:03.320
Yeah, then you can use also LNM's for structured JSON generation, if you have an example of

16:03.320 --> 16:09.080
how your data should look like, then you can use this as an example, and just say, yeah,

16:09.080 --> 16:15.080
use a different theme, different contents, and it will do that works pretty well, but it's

16:15.400 --> 16:19.800
also kind of boring, but what's really interesting is you can maybe

16:21.000 --> 16:28.520
plug-in development, even easier, by providing the existing plastic plugins as future learning

16:28.520 --> 16:37.640
contexts to an LNM, and then provide a new prompt for an plugin, and here's some examples,

16:37.640 --> 16:44.440
here's a new prompt, just write the plugin, and yeah, this kind of works, it's experimental,

16:44.520 --> 16:52.600
it's not really stable, but that it's even possible, it's kind of fascinating, so yeah,

16:53.240 --> 16:59.800
and now I want to show you a little demo, a little overview of how this all looks like, and then

16:59.800 --> 17:08.520
web components, how they behave, and the interactivity, and also maybe we can ask an LNM to write

17:08.600 --> 17:22.120
a plugin for us, let's see, do I have internet here? Okay, just take my phone, yeah, so this is

17:23.080 --> 17:38.520
this one, this is general resume, and there's a cover, let us think, if you click edit,

17:38.520 --> 17:45.000
then you can just inline edit the content, so for example, this stuff, I can just add some things,

17:45.000 --> 17:50.840
and this now doesn't look like a normal website, it just updates instantly, and yeah,

17:50.840 --> 18:01.560
you don't have this page reloading going on, in the main part of this, this third partly package

18:01.560 --> 18:10.440
is the CV, looks like this, and also if you here, maybe we check some more complicated

18:11.400 --> 18:21.080
element like a new timeline entry, so I can hear add some badges like Python or type script,

18:22.840 --> 18:28.040
and remove some other stuff, and submit it, and it's just there,

18:29.320 --> 18:38.200
there are error messages, if I break something like break this URL, then I should get an instant

18:38.280 --> 18:48.280
error message, but it's not generated in the front end, it's coming from the back end, so

18:51.160 --> 18:58.360
yeah, and if I want to delete it, it's also just gone, okay, that's how the edit stuff works here,

18:58.360 --> 19:07.960
and yeah, this is all HTML and general, okay, let's try to add a plugin, I have this profile,

19:07.960 --> 19:21.720
this is a house plan, but this far or correctal, let's see, yeah, this one, and maybe she needs

19:22.280 --> 19:30.840
a plugin to break about the height of a very permanent, because that's something to be brought

19:30.840 --> 19:47.480
off, apparently, okay, so I need a prompt, I won't write it, okay, and if I click general code from

19:48.440 --> 19:56.360
then it will try to to create some, I use a small model, a cloud 3.5 iq, which should be enough

19:57.720 --> 20:06.120
for this small task, so now the element m is generating code, and yeah, here is now the plugin data,

20:06.120 --> 20:12.120
you can see it's later here in this field, and then there's a source code for the module

20:12.120 --> 20:17.560
which is basically the form, and then template to render plugin data to HTML, and then template

20:17.560 --> 20:27.320
for edit the plugin data, okay, now the element m is done, and yeah, it brought some code, I don't know,

20:29.240 --> 20:39.160
in some templates, looks good, looks good to me, I just have to start the development server

20:39.160 --> 20:45.880
because experimental, but if I reload so now I now I have a preview of this plugin, and it even

20:45.880 --> 20:52.120
then has a small world for the location, which is kind of great, and I can edit it, say,

20:54.120 --> 21:02.040
called Hese, maybe, so and now if I, yeah, this is now the plugin data in the JSON field,

21:02.280 --> 21:09.800
it's kind of neat, and also I wrote in the prompt that the pyramid has to be at least 50 meters,

21:09.800 --> 21:17.320
so let's see if the error message works out correct, that's that it's 20 meters, oh, it also works,

21:17.320 --> 21:29.160
yeah, so, no, didn't change it, yeah, there's somewhere in error, I don't know, okay, yeah,

21:29.160 --> 21:36.520
it's not perfect, sometimes it works, let's see, if I take the working exam now the people

21:36.520 --> 21:49.800
is not working, okay, yeah, but now if I want to use it on the CD page, I can just say it here,

21:49.800 --> 22:01.160
and then it should be available in here on edit, I broke it, no, but you get the idea,

22:02.600 --> 22:10.680
okay, I probably need to restart the server, okay, now it's here, yeah, okay, and here's also

22:10.680 --> 22:27.240
now the error message should show up correctly, yeah, okay, yeah, so, okay, thanks for your attention

22:27.240 --> 22:34.600
questions, yes, do you have some question, oh yeah, just one, just one, up to,

22:40.680 --> 22:46.120
just a question regarding the resume, there is a JSON scheme for resumes,

22:48.440 --> 22:55.560
is it accidental that you haven't used it, or is it because you want to extend it in some way,

22:56.200 --> 23:03.240
there's a JSON scheme for what for resumes, I didn't, didn't know it existed so, yeah,

23:03.880 --> 23:12.040
nice to know about this, I have a look at that, yeah, another question,

23:12.840 --> 23:28.440
hello, hi there, thanks for the very interesting talk, a question I have, I was also working on

23:28.440 --> 23:33.240
a bit of a Django project using HTML and one of the things that we're running into is you get

23:33.240 --> 23:40.040
like these very, a lot of very small snippets of a Django template files and they do like one little thing

23:40.120 --> 23:47.240
and that's I think that tends to happen because you're using HTML, but how can we

23:48.040 --> 23:54.040
be more in control of that and be more in, you know, don't lose ourselves in the, in the

23:54.040 --> 24:00.520
the revenue of templates, yeah, one of the approaches would be to use cotton,

24:00.520 --> 24:07.000
gipses, Django template parses, package, where you can just define your parses in line in

24:07.000 --> 24:12.440
your Django template and don't have to use different files, Django template parses is probably

24:12.440 --> 24:20.440
the name of the package, yeah, and yeah, in this case I saved the snippets in the database,

24:20.440 --> 24:25.800
so this is also an option, but I can't recommend it, it's probably unsaved, so yeah,

24:28.440 --> 24:35.640
thank you, so if we have no other question we can go, thank you so much,

24:35.640 --> 24:39.160
thank you,