Web Development: 04 - DnaWeb Basics Beginners Tutorial AngelSix

[Music] so in the last few videos we've been building up the foundations for web technology so we've done the basics of HTML and CSS then we also introduced sass which is basically native CSS just with additions of things like variables include files ways to organize the CSS and make it a lot more friendly and drive UL so you're not just repeating values all the time you've got variables built in and stuff like that the last piece before we then start really making an actual website is to fix the same issue that on HTML so CSS we've now got sass but on HTML there's nothing out there I don't feel that's the same as the equivalent of sass for CSS in terms of you've got a HTML file that you want to say the most basic thing is include a header and a footer you know the the navigation headed to a website like this would be the header on this website say that stays the same for every page and then you go to another page and this head of stays you know always there and that in natural native HTML was not possible so to give you a quick example I just downloaded a random free template online so I didn't have to make one because he got an index.html file that shows say this page with this landed home layouts then you go to the say left sidebar and it has the same again landed home layouts and but that if you look at the source code to the HTML files so we open with code and you can see there is the index page if we open say the left sidebar one means these all repeated again so there's the two files you can see basically the whole all this hat is repeated they've simply changed the class they're on the body then all the navigations repeated it's it's a hell of a lot of repeat code so now say you're working with these files and you change your your mind or your design and you want to re-encode say a different file here or the header decides that this option is going to change from from one you've now got to go through every single HTML file in your whole static page so like all of these and potentially way more and adding those values multiple times and keep them in sync so a solution to that might be to try and find a technology similar to I because they what's Astor's for CSS and there are many out there but personally I've never used many because as soon as I look at them instead of being like what's a sister CSS where you still write CSS you simply add the additions to it anything that seems to work with HTML completely redoes the language so you're not really writing HTML and then adding the benefits to it you're practically writing in a different language a different syntax and you don't get a feel for HTML you also lose the native ability so I'm sure there'll be a lot of people debate that there are technology out there that do what this software I've now written doors but honestly I don't think the Reza doesn't get anything does it simple and clean and keeps the ability a variety in HTML and it looking like a HTML file so in short what I've done as I've made software completely open-source as usual so you can go to github angel 6 and go to DNA web if you want the source code to this entire software and I've documented it well and then a link to the website is obviously this website that documents everything so you can read all this so what we're gonna do is simply work through this this websites guide that I've written visually so it's nice and easy I mean get a feel for how it works and what I'm talking about so to get started you'd simply click one of these to download buttons so go for the 64 bits if you have a 64 bit machine download and install DNA web that will just go ahead and install a file or a folder in here DNA web program folders DNA web and the version and then this is the dotnet core application installed and here is Exe that gets wrong and then it adds the install adds a path to here so that we can invoke DNA web from anywhere it's that's what the Installer so you click you install and then the website will start with explaining you know why and the issue with static HTML which is what we just spoke about basically that you change your header on one page you need to change it all the other pages and blah blah blah and then it says like enter DNA web so we'll just jump right into actually using this so you can see what I'm talking about so if we go to just the examples folder that's on the github source so if you originally clicked on if you on github say here and you looked at the examples folder we're gonna work through these folders it's that's where we're going to be so we're going to includes an output this is the first part of the tutorial so it gives you the most basic example as what I described first the first thing you want to do is you'd up a website and it's got at least a header and a footer so if we open this index header and footer files and you'll see I've called them dot d HTML instead of just dot HTML and I'm just opening up with Visual Studio code you can open them up with any editor you like unless you can see a standard HTML so the header is basically the head of my website nice and simple HTML head title body and the footer is then the closing tag to the body and the HTML and that's then shareable now between any any other pages and in this index page we've set at two outputs so we can delete those and all we have to do here is include the header and include the footer and also we do for that is we put this comment in so this is a HTML comment so as I mentioned the point of the DNA web is to keep the HTML valid or as close to a valid HTML as possible so it simply looks normal and you can still double click on view you know the files it is it's native to the language it doesn't go and create a whole new language it keeps it very similar so decided to use HTML tags take some out comment tags that simply start and end internally with the @ symbol and that then jumps into these special values that the DNA web engine then processes so we have an index that basically says include a file called header dhtml and then we'll write header and then we'll include the footer and now that is the most basic example and you can see the three files here so in order to generate the HTML from this you can go to a folder where your files are so typically it'd be the root of your main project folder that you're working in you wouldn't be directly here it could be say the examples folder or you know an actual folder that you're working in and then the address bar of the title bar here of Explorer just type DNA web like that and then press ENTER and that'll actually then open up a a DNA web window and you can see the output it's saying that it's found the current folder which rent it's found the configuration here the default configuration from the installed folder and with these values and then the final configurations worked out that we want to monitor this folder that we're in we want to generate all the files when we start and we want to process and close false which means stay open once it's there and then it's told us basically the version of DNA web it's told us that it spun up three engines which we'll get into later and then you can see here green it's generated the file footer index extra and header and that's because I didn't save this here to remove that so if I then delete the HTML it generated for a minute and I go back to edit this and save you'll see that when I save this file this will generate I'm gonna I've clicked in here that's right if you click in the window if you're doing this and you got something selected this window won't update this will kind of pause so provided that and then I did something and save nothing happens because it thinks you're trying to do something so you just have to get rid of the selection and so it's do that once more so and here you can see it's generated book deleted it edit the file and save and you can see then you animates the HTML and if we open up the HTML you can see it's got the header file if you will then it's got the index files content then it's got the footer so from these three it's you know combined them and and generated a HTML file for us so as you saw them the next part of this documentation so we talked about we add a header or add a footer and then we include the two and it generates we then talked about if you want to generate multiple outputs or simply change the name so we've got an index file but here we might want to change it to say home and give it a new name and we do that by doing again a DNA tag which is just a comment with an @ and ending with the app and we say output and then we give it a name and we save that roughly that generates a home HTML file and in similar fashion you couldn't do multiple you can do two outputs and save nobody the same file because we haven't changed anything well now you've got two outputs so then you can output them to two different locations if you wanted the you know this file to generate to certain outputs then we were onto partial so you'll have noticed that if we have we stopped the engine I'll just press ENTER twice and we've run the engine again DNA web on start generates everything and you can see it's actually generating a header and a footer HTML well that isn't actually what we expect because the header and the footer really a partial files that includes we don't want to generate HTML from them so there's two ways we can do that and if we just step up and into the partials demo folder and then we'll open these three you can see the index is just the same we've got an output of index we include the header we include the footer nothing's changed from the last example but in the foot so we've added this special tag that just has got the word partial and the same for the header so now when we start up DNA we're in this folder you can see it's only generated the index file so you can define a partial via that way you could also remove the partial from say the header and if we run it now obviously it will generate the header HTML but if we rename the header to start with an underscore just like sass then it won't generate any output for it so now we can edit the header and it won't generate output for the header because it's you know it knows it's a partial class so it won't screw up and generate you know the output for the header whoops what we got here include file not found oh the header isn't underscore at the minute so there we go it's generated the index but then the header have you edit it will still generate so it's smart enough that it finds that if you edit the header file it finds out that index uses it and generates that as well so I've just added this underscore feature this morning to match how SAS predefined them it's an underscore it's classed as a partial or you can simply add this partial tag inside the file so you don't have to name it with an underscore so you got two options and I'll likely end up fixing so again to match similar to SAS I'll remove the requirements happen underscoring the name and I'll also remove the requirement to do the extension so probably in another few days you won't have to do you know you won't have to include the dot d HTML or the underscore if the files got an underscore and or you know if it hasn't anyway and you just got a normal one you won't have to have the extension but for now obviously you do so when I update that you'll see in the documentation on DNA web that I oh I'll update that with you know that valid information so it's clean these back up get them back the way they were and that is the the partials now it gets more fun so now we want to do say some variables so these are good for things like the links to websites that again you can you don't have to repeat or have randomly in the middle of your HTML you can now make use of a variable and simply inject it in wherever you want so the variables come throw a single class here but again you could quite happily and you really should have you know another class that stores your variables are variables dot d HTML file and where this can go and then you can make use of them throughout your HTML any way you like so all we've done here in this single file as we've told it to output an index file index dot HTM we've then done these two which are profiles so we remove these for the minutes just so you doesn't complicate things and we've then done a special data tag so we've dealing this time a comment but with a dollar which instead of it being a single line commands this dollar now means we can break out and do some data and then again we've kept the format the same as HTML so we're using like an XML style structure so you do this kind of layout you do data has the main one and then you define a variable with a name title and you give it a value my title and if we remove all the other bits you can see that's all we've got I can even remove the output so the name just stays default and you can get down to you know this simple and now if we save well if we run yeah save that file and then run DNA web in this folder you can see it's generated HTML and if we take a look at that you can see it's injected my title so if we split that over so you can see two files and we now change the variable name or not the name of availables value to my title is he or something and save you can see it generates this HTML output here so it's alive you know updating a value that you can now use anywhere inside your HTML so all's we're doing in order to make use of the variables is anywhere inside of your HTML if you just put two dollar signs than the name and two dollar signs that's how you make use of a variable and you declare one by simply anywhere again anywhere at all in your code you open and close this data tag and then you you put your variables inside so that's the variable section and again you can read more about it on the website here but it's pretty much that simple there are I think we get further down profiles yes so this DNA variables are something you have added recently and in short you can simply do you could say copy this and instead of having my title or you could keep my title and let's just do Dola Dola and then DNA date and then a format of how we want the date to come out and if we save that and take a look at the output you can see it's now outputted to date so this would be good for things like you know a copyright notice why we do copyright angel six and they just want the Year quoting so you do that and then you get copyright angel section it's always the right date so it's like you know an auto-generated value so these are the DNA variable have added so far if you want anything else adding you just simply ask or add it yourself to the source code so you can make use of them inside of HTML so one useful thing might be the current project path or the current file path for whatever reason and then we'll move on to output profiles so in this file at the start about it go backwards you can see you know how to use output where you generate an output name you simply give it a name now we've got variables I've decided that well it's for a reason and you'll see why when you get to asp.net as we've now added the ability to have profiles which is simply a different version of an output so we generate output for asp.net core as well as static HTML Thor you know building up there the UI flat in the first place so this can also generate HTML output that's like asp.net CS HTML files and for that we make use of these profiles so if you have a file name and then you simply end it with a colon and a name this name is then what's called the profile name so now we will generate a file called index - server dot HTM but anywhere there's a variable made use of inside of your HTML likea title for the outputs with a profile name it will actually look for a different variable it will look for a variable that's in the profile server so you can see here there's two ways to define variables inside of a profile one is you can define the variable the normal way and simply add an attribute that says profile equals and give their name all the other ways you can make an entire group called profile with a name and then put the variables inside so you've got lots of variables and you're doing say you've got one of ten variables and they're not all called tile it could be tile one to ten or something and then you have form for the server and you wanted to you know do another ten you'd probably use this group like this so that you simply define the profile name wants and then you would you know add them all inside there and if you were to do it this way you'd end up with as you can see a load of you know valuables with this repeating itself so it's completely up to you how you want to to make those variables and how you want to define the profile but you'll see more on example of what happens here so again this this is exactly the same as the first example but we added these two outputs with a colon and then server and server two which is simply define two different output profiles and what should happen is that the server file should pick up on the variables in the server profile which would be this one so we should see my server title the server too should pick up on the profile name server - they should say my other server tile so if we look at the output here and we could just dump that over there and see that and we save you can see it'll generate the three files and then if we looked at the three files you can see there's the index dot HTM with my title the index server has got the server title in the index server - it's got the other one so by just having one single D HTML file and and generating here and having a single variable you can generate three different outputs with three different values so again you can make use of this however you like in HTML and all this will become very useful as we make the websites but that is output profiles and that's all the output profiles being generated in that way and again like I say they'll be more useful if you see see them used as we build the website it's that sets output profiles again the website will give you a read up in a similar fashion as well as output profiles you have input profiles and again I mention here the perfect use case for this as asp.net CS HTML files and if you've done asp.net development before you'll know that CS HTML files have a layout tag that simply states for the header instead of having the header directly in the file it simply has and include you know and layout equals and you specify a head or a different way so in order to do that you'd need to have a different basically you wouldn't want to include a header in there asp.net output because it won't have the head of it it uses a layout option instead so you basically want to include a file but only in a certain profile so similar to output where you're outputting you know variables if you will the profile still the same you still define it just the same you know you still have : after the name and you profile and that will still work for valuables but the difference is as well as variables you this can work for includes so you know only include a header in certain cases so if we look at the input profiles and we open all three of these in Visual Studio code again the Headroom for two were just the same as normal and the index is just the same as the first example the only difference now is we have if we removed those two to see we have an include header and include footer but we've tagged the include header and footer with a wrapped profile name so now by default if we were to spin up DNA web in this folder and then we open up the HTML you can see that there's no header and footer this is just the index file because by default the profile is you know nothing so this should only be included if the profiles wrap so basically Headroom for to never get included so then we instead define to output specifically and we have an index full which is basically then tagged with the profile wrapped so that both the head when the photo get included and then will be a standard output which basically is a normal output we simply give it a name and we don't specify a wrapped profile and then when we save this well now we'll get index content and index file and they should expect the content is just the content so this would typically be your asp.net page that doesn't want the header and footer and the index fault now includes the header and the footer and again this is all being generated from one file so that's the input profiles and again like I said will make use of all of this when we're making the website but we just want to cover you know all the features in one inline data next which is where you simply want to include small it's well the reason I made it whisk sometimes you just want to include small bits of HTML and not have to create a separate file you know just to do that and again this was aimed at the the asp.net situations where you know you might want to include a layout so if we go to input data and we open this up and you'll see here you've got again a simple part of normal HTML here you've got two outputs that we generated local and server and the server will only have any specifics that are in the server profile so there's no variables we don't use anything there but we do this include so include and then once you do this this way of including everything between you know the after the inline part is simply included it's just output again so it's it's basically the same as doing this you don't really need to do that include around you know it's the inline around it it's just to show you that you can't do that so this will just always be included in all outputs then this inline will only be included in the server code so this is like didn't include that we've done in the last one you know an input profile so it's very similar to doing you know this include only in this wrapped profile but instead of including a file as we mentioned here you're simply including the actual text right here so you want this this HTML without this having to be a file because it's just a small snippet of HTML so the output server should end up with this in all because there's no profile for that so it goes in all of them this for the server and then the special banking symbol here the exclamation is for basically only default so basically ones that don't have a profile name so if these have any kind of profile name don't include them as opposed to this one which will always be included no matter what so again to see the results of that we just type DNA web and it will generate the output you can see we've got the wrong folder one second we've navigated in and out of that folder let's go to the right folder 5 so if we then go to DNA web you can see it's generated the local and server files and you now have the local which has got header which was here it's got the this is and all outputs because it will be which is simply an inline with no specifics this is really you never really use this I'd say it's just there for showing you that that exists and then you got this as in default outputs only which is this one with you know the bank and then the server one has got the header this is in all outputs as we expect and then this is in server only because we specified the profile so that again the reason for that is if you've got an include that you want to include only in certain profiles but you don't want to have to make a file just for a really quick and small include you know doing an inline you don't want always to have you know HTML it's similar in c-sharp where you'd say sort if profile equals equals server no output blah blah blah alfe's blah blah and you wouldn't want to have to then put this little bit of code inside a file you know you just have you're just simply doing a you know an output of a few lines you don't expect that to be a new file so you can think of it as almost like an if statement that if the profile for the output is server then you know include this bit at this location and that's kind of the point of the inline data next up is well in fact really let me just double check on the site so go through all inline data yes oh really that is for the most part all of what we need right now in DNA web so that does everything I need to make dynamic HTML files nice and easily and be able to share headers and footers and have variables so I'm sure we make their websites with this we can add more features as we need but the beauty of it is now because I've made it in it's open source and we're going to be making real websites with it anything that we don't like or anything that we need to add we can add and we've got a nice easy way of you know of running the system if you will of generating this content so typically if this is your actual website folder which you're making it at the start of your day you'd simply come to the folder type DNA web press enter and you'd leave it running while you're working in it'll Auto generate everything so again one thing I did past this was then to go to c-sharp so I make use of bridge net in some projects which we haven't got to yet but it said a Java Script while it's basically you write c-sharp code that generates JavaScript so you can use the full net framework for the most part to write JavaScript and again it allows it to make JavaScript maintainable similar to sass and DNA web that's the point of a tester to be able to make these web languages but make them a lot large when I'm a lot more manageable than using you know native JavaScript HTML and CSS so one of the things I wanted to do and one of the things you might want to do is we have these variables such as say a classic one would be say a website link or an ill to the API on your website and you would embed that ill in the header of your you know your site so you'd have a header here and you might have in the body you'd have like a navigation with a home page and index and about page and you put that in the HTML but then you'd also want to make use of that on your asp.net core website in the background so again what you tend to do is have separate c-sharp code files that then store the variables again so in order to now share the variables that we define in DNA web between not only the CSS the JavaScript and the HTML files we can now make use of those variables inside of our c-sharp code in asp.net and to do that I simply made a c-sharp engine built into DNA web so now it can you can define your variables just the same they can be used in the DNA web files again just the same and so there's nothing special about this we simply we made a group so that it would add a region around it and we add comments like this so that they get commented in the c-sharp code but in essence this is still just the data tag with a variable in there and we can make use of this some ID valuable inside of anywhere we like and then we can now output a code file so if we open go to c-sharp and open this DNA CS file and we just run DNA web here you see it's generated index yes so what we have here is we have because the extension is DNA CS and not the HTML the engine knows that there's DNA web knows it's a c-sharp file because you've got a HTML engine which is what we've just been using we've got a c-sharp engine here and it's listening out for dot DNA CS file changes so we've made a bunch of variables here and then you can see below now we'll write in native c-sharp so this is just normal c-sharp and again to keep it just like a normal code file we then use this comment here but this time with a hash because c-sharp so I kind of made a hash there and instead of being an @ and this time it's a special value called properties which is basically a group of variables and we expect it to be the group Dom IDs so what this all do now where it finds this it will remove this and it will replace it with all the variables it finds though inside a group called Dom IDs so we have a group here that we've named Dom IDs and then inside of here we've now got variables we've got comment for data one here above the variable called my string one will give it a type so we've got a c-sharp type of string and we want it have a value of value one there's another example of a multi-line comment and then there's a final one below and you can see then if we just look at the output you can see it's generated the c-sharp file for us so if we look at the native file here if you will you've got the namespace you've got a comment and then you simply got inside the class nothing you've got a special tag so you've ended up with all the code here and here and then the special tag has been replaced with a region that's been given the name tomm ids which is the name of the group and then for each variable it found in that group it's created a correct public property of the correct type with the value and it's also added the comment that was in and then we've got all the you know the comment in here so and then you can see here if we were to do a multi-line comment it's it's maintaining the spacing so what we're trying to show here is even though we've got all the space in here it knows because the way that the comment loops it's correctly analyzed it and removes this a bunch of you know free amount of space here but while still maintaining any sort of inner space if you will so this will touch on later but I just wanted to brief over the fact that you can also generate c-sharp files and really the only use of that right now is to share variables so simply to generate to c-sharp file that would potentially contain a class with all of your variables in so that you can make use of that inside your asp.net code so again that'll probably go a lot further and then finally I also embedded sass so as you saw in the last video in order to generate sass files you have to run sass from the command line or you have to install the tool that are most likely paid for tools half the time so if we had a sass file here we've got a bunch of sass files so if we just open them here you can see a test the import a the imports be the input see so we generate basically a just a normal sass file now what you'd have to do is go to this folder type CMD they'd have two types us whereas it's just a watch dot I think and there we go it only generates your cash folder and it also generates the CSS and the CSS map well the problem here is and this is what you find with these web technologies is that then you just working with your code you start having to think well now I've got our own DNA web and I've also got an assassin you know I've got to find software that can handle SAS processing and then what about when we use JavaScript or something else in and you end up finding that in the morning when you start work you need to then open up three or four different applications so basically just process these files and that's kind of what I also don't like and then some of those programs all only work on Windows what does already work a Mac some of them and most of them are paid for all those kind of issues so in DNA web again recently a few days ago I added support for sass built-in so now if you've got sass files and DNA HTML files and c-sharp files all you have to do is run DNA web and this thing will monitor and generate you know everything for you and so you don't have to maybe don't have to run your sass engine as well so if we looked at this DNA config file you'll see here that I've specified a path as well called CSS so that you can change the output of the seat you know the CSS generated file so that's that's another thing that has and you can see when I added the file has generated this test OCS because we told it to generate it in a folder called CSS and then you can open that and it's valid CS so it's really that simple as you simply run DNA web and it will you know generate the SAS files for you as well so now when we're working on our website we can just run DNA web and not have to worry about running anything else we can then go and write our SAS we can write our D HTML files and it will all get generated automatically and we don't have to go and set up and add folders or anything like that we just simply browse to the folder we want like say this examples folder if we want to generate everything here in the morning we just type DNA web here and it will open up and generate everything and you can see all through you got an error because we were messing around with renaming things it will highlight it really obviously so it's saying that it's failed to process index.html yeah the HTML because it can't find header under underscore header and that's because we renamed it back so if we then rename it backwards and we save this file you can see it then generates so it's just a really useful way of generating you know of writing your HTML files but then instead of it becoming I'll write me HTML files for making the initial you know dummy website if you will and then when we move on to is p.net you end up writing CSS HTML and you're cutting and pasting the header from this file on the photo from this file and then moving it over and then you start tweaking the live website you end up with a disc enjoying between your original created static HTML and what ends up being your live site you've kind of that's what always happens you lose that link between the original files that you were met playing with to make the site in the first place so this always maintains a link so these files that you write for initially your your static website if you will will be the exact same files that will generate your asp.net or other language violence without losing that link and again you gain all those benefits of being able to use variables like you do in SAS being able to do anything we really want because I can update this code as as needed but this is DNA web there's the website DNA web uh-oh and there's a whole riot up of all options that you can do how it works but I thought just a video gets people into it first gets them seen exactly what it is how it's done and then we'll now go ahead and actually make a website using this so you'll get a lot more feel for it but I'll be really interested to see and you know and hear the feedback you have on this because right now we only use it internal to you know the people that work for me so it been asked to get some feedback from other users that start using this and if it's benefited you and if you've got you know any kind of feedback so hopefully this has explained what DNA web is and we'll now start using it you know in the very next video so you just let me know what you feel if you get confused by it or ever you think it's cool or you know just anything really so I'm eager to see any feedback on this so you know let me know [Music]

Channel: AngelSix

Views: 6,447

Keywords: learn, dnaweb, dna, web, angelsix, html, dhtml, css, sass, scss, basics, tutorial, beginner, website, server, javascript, style, elements, code

Id: 2oEv3dg8n5Y

Length: 40min 56sec (2456 seconds)

Published: Thu Oct 19 2017