Coding Livestream - Creating an Online Chat App w/ Python (PART 2)!

Key Takeaways

all right I believe we are live now I'm just gonna wait one second to make sure everything's working here oh I forgot to get the music going okay we got to get the music going so we're gonna be one second here guys but essentially what I'm we doing this stream while I kind of just look to set things up here quickly is we are going to be continuing from the last one although I won't lie I've done a significant amount of work on this project off camera I had a lot of time yesterday coming in between classes on my laptop or I couldn't stream but I want to work on it so I'll be you starting off refreshing you guys with what I've got here I've actually got this chat working and I've kind of changed frameworks a little bit so it'll be a bit of a refresher on what we've done but if you guys didn't catch the lot the last livestream and you want to see kind of from the very beginning then there is the last upload on my channel that you guys can check out give me one second I'm just going to try to get this music working because this is gonna be painful for about an hour streaming if we don't have that and that's also what I wanted to say we are probably gonna be streaming for close to an hour today I don't wanna go for too long I actually have a job interview later today so I figured I'd hop on work on the project a little bit first and then go from there alright so let's get music again you guys gotta let me know if this music is too loud or too quiet I never really can tell based on my broadcasting software so let's see this right Wow $20 from mr. genius appreciate the super chat man you didn't want to ask any questions let's see what the chat saying here hello how are you doing man hello greetings from Greece this is so true is the front end just flossing they're using a framework you have to tell us a result of the interview for sure I'll let you guys know 125 concurrent viewers appreciate you guys hopping in here hello Python rich JavaScript alright so let's get started and kind of discuss what I've done I'll start with a little bit of a demo and then we'll kind of talk about all the backend work that went into and the changes that we did here so you guys don't remember from last time I'll log out here what I was trying to do was essentially have it so that I had a separate server that handled all messaging communication and I had data from this kind of front-end server here being sent to that server and then it handled the message communication sent out it back and I was kind of working but it was pretty glitchy like it was there's a lot of bugs and stuff so I actually changed framers completely and now I'm using flask socket IO which I didn't even know existed but apparently is built into flask so I'll show you guys a little bit here so essentially socket IO dot on event and you can handle custom events right from flask and it does all the connection disconnection for you so you don't have to worry about actually creating the sockets you just have to kind of understand a bit about the communication protocol which is what I've been doing so let's do a demo so you can see I've changed a little bit this page I want to make look a little bit nicer in terms of like signing in creating an account or whatever that's not creating account it's just like picking a name but let's go with test as our name here and when we go we can see I've actually set up a database as well that stores all the previous messages and the time in which they were sent I'm having a slight bug with that which we'll talk about later but this is just a local SQLite three database and now actually I'm on my phone and I'm on the website on my phone because I have this running on my local IP address which you guys can see 192.168.0.1 don't try to connect to it because it won't work unless you're on my network but on my phone I have the website open so I'm just gonna send a message I'm gonna say hello my name is Tim going to click send and you can see that that message actually pops up on here now notice too when I send a message from here I said hello my name it was test oh wow we get a gray bubble instead of this lighter gray level so it actually separates the different people you can see their names are on the right side our name is on the left side and it changes the date format as well based on who's sending the message so pretty interesting let's see what the guys are saying in the chat here you have a Spotify playlist I do not don't your eyes get tired when you code for too much time yeah definitely they do greetings from Bangladesh hello why don't use Django I've been asked that question about a million times louder please it's perfect what would turn up one anything else you guys are saying here no no 173 K subs with 173 views that's funny yeah but only 53 likes if you guys are here watching right now go please like the stream help significantly hello from India hi from India lots of Indians lo guys okay so let's start getting digging into the code I'll show you guys kind of what I've done and then I'm gonna start working on fixing a few bugs again it's just a shorter stream today I just wanted to hop on I figured I have to do this I might as well stream it anyways so yeah okay so let's look at kind of our architecture of this program now so this is the old message server I split it up into this server file so this is what I was trying to do before is have this client communication all running from this server with like global variables and person objects and it was working but it was just kind of glitchy and then the client was here so you could connect and send messages and I had memory locks and all this complicated stuff so I kind of scrapped that I still kept it just in case but I'm not gonna be using it so instead everything is now inside this website folder so what I have is this main application which is almost the entry point I'll talk about that in a second so the way this works is we import flask i/o we import some things from application which I'll show in a second we create an app using a factory which I'll show you and then we create a socket and then all I have in here is literally just the communication functions for events because I've split everything up into blueprints actually with flask and I'll show you how that works so let's go actually inside application to this init top PI file where things kind of start so this is the create app function you can see here I call create app after importing it from application because this is a package and what ends up happening if I go to or is it an it here is this creates a new flask application based on my environment variables which are in here and then what it does is it imports all the necessary modules and imports a filter which I use in the Jenga templating engine and the database registers the blueprint for the views folder which is here that handles all the routes and then it actually registers a context processor which is used to do a slice operation inside of templates for flask I know this is complicated but it's kind of the easiest way to explain it then it returns this application from the width from the return app so when it returns that that gives us a working application in main so then we can simply socket dot run that app and then run it with whatever the configuration server variable is in our env file now database this just works doesn't sqlite3 database local database is called messages dot DB forgot I don't need to see duck CDW there um and yeah what this does is just you know makes a table closes the connection and creates the table just some basic queries with SQL get all messages we run a query and then we actually have a limit on the query because sometimes you don't want to get unlimited amount of messages from the database you just want say 100 or you just want the most recent 50 or whatever so this queries all of them and then we'll take the most recent messages by doing this and then it returns out in JSON format like that alright so save message what this does is just insert into that table the save message so we're just using date/time objects and then time done now let's see what you guys are saying here how did you connect your PC to your IP address I can't all you do is just run the flask app on your local IP address rather than localhost it's not very hard can I ask why you use regular sockets I'm not using regular sockets I'm using flask IO sockets that's what I was trying to explain I'm also using pycharm okay so this is the views file I'm just gonna go through all of it because I know you guys if you were here in the last one probably want to know what changed so the way that this one works is similar to before essentially I should okay even need Lions global yeah I don't need this oops so let's start cleaning up some code that's also what I'm gonna be doing a bit today is just cleaning some things up making it look a little bit nicer so we can get rid of that now cuz we didn't even need that so I just start by registering this blueprint in view and then I have all my routes so I my login method which has potent guest requests I also implemented this message flashing which you guys saw in the HTML I have log outs I have a home page I have get name which is the used for fetch request from the jQuery get messages which is used for fetch request from the jQuery as well and then remove seconds which just removes the seconds off a date/time string for me filters this is just a slice filter this is a custom I just found this online I just it just does slice for you it so you can use it in Django templates config' these are just grabbing the config variables from the env file and then if we go into static or so into index EAS you can see I've implemented a few async functions here so I have this one up here this essentially just resizes the window that's a chat window to be 90% of the site or 80% of the size of the actual full window this one is just a scrolling implementations of too many messages pop and it'll automatically scroll at the bottom I have a function to load the name to load all the messages I have a function that gets the date now in the proper string format I have the socket connection which is needed for socket IO connection and flask and then this is kind of handling all of the events and sending receiving messages and then we have an onload the onload displays all the old messages on the screen and then add message which simply adds it to the div on the screen so what are you guys seeing here are you storing messages somewhere directly sending it to the client I'm storing messages on in a database but I'm only storing them in a database after they've been sent to all clients that are connected what else you guys saying can these messages be end-to-end encrypted they could I don't encrypt them but I mean they could be can we go through GPT especially crap I don't know what that is encapsulate it will you end up code on github you're actually not really supposed to encapsulate flask applications at least the way that I'm doing them so it doesn't really make sense to put them in classes it just makes it actually more confusing I'm just gonna keep it functional for now we make a tutorial on this potentially will your code be up and github there's a link in the description for the code I still see a hundred 70 people in here and 112 likes which means some of you have not liked the stream yet so please go ahead and do that and yeah okay so let's type some more messages so I trying to show you some more features so if you go like like yes sir oh whoa I don't know why that happened of course we're gonna glitch right on stream when what the heck oh it's cuz I haven't I haven't pulled the thing yet let's see here rebase 5000 W I don't know what that currency is just started learning coding great content thank you for what you're doing love your channel I appreciate the super chat man rebase the current branch on top of incoming changers all files are up to date okay I don't know why that sent multiple times because that's literally never happened before but of course that's gonna happen to me now oh it's cuz okay so I think I'm working on an outdated version right now I'm just gonna get my laptop out and push more recent github changes so one second guys on that front so yeah yesterday I was working on this quite a bit on my laptop but I don't think I remembered to push the changes to github so let's do that now alright sorry that I am just boring you guys right now but this is how it's gonna be okay so get that dot ah yeah there was a lot of change down here that I hadn't pushed yet okay so I was wondering why it was like that so it's like I thought I fixed that so give me what's like I'm just gonna get clone this again once we get back onto this computer turn that off there we go all right yeah so I was trying to do a thing where it said like you left the server you joined the server but it wasn't really working so yeah that was kind of why this one had it and then like this new version doesn't that I'm going to show you anyways you'll see yes so inspect by the way whoever told me this where you can empty the cache by left-clicking on this is like a genius thank you so much that saved me a significant amount of time so let's I can actually be able to rebase because I already have changes in here that aren't committed so we're just gonna have to actually get the link again which means I have to go to github alright one second just need to clone this repository guys give me one second oh what's happened to my music Oh still here okay get stash yeah I know you guys are saying get stash but like I've tried to use it it just as like glitchy I just rather use this okay does this work chat web app alright oh no it's only Linux okay let's do that delete okay so now we should have the most recent version so I'll be able to show you guys that's a pycharm sorry about the delay I really thought that app did that just use links I would but my recording software does not work on Linux or it doesn't work but I just have like all these settings in Windows and I don't really care to import over right now um okay close that alright there's something else I wanted to do okay so this needs to be refreshed let's go inspect and then I wanted to remove something from views ah this one okay nice all right so let's run the web server think we should be okay here awesome yep that's what we're looking for let's just go here inspect why can't why is this inspection not working inspect okay well that's great okay there we go login all right so name let's go with Tim submit you're successfully logged in as Tim let's go test what's up my name is Tim and this it's just testing I want to add some more messages so you guys see I also need to add a thing so that it doesn't let you send a blank message so notice this it actually lets you scroll it Scrolls down automatically when a new message comes in so I'm gonna go on my phone again just clear the cache here and show you guys that someone 9 - lets go yeh sense you can see it automatically Scrolls down which i think is kind of cool and if you guys think of any other features you think I should add to this let me know but like for example I log out and I log back in as like Joey then it shows all the messages again but now my name changes so the only thing that's kind of conflicting is if floods like two people on the server that the same name then it gets a little bit like okay it just shows you the same thing so yeah that's like the only issue I don't really know how to fix that though because I mean I have to save all the names of the people and then check that you don't already have the same name which I don't really want to do right now but anyways okay let's hear you guys are saying Tim you brought it up man you're helping tons of people appreciate that if you press ctrl f5 that resets cache as well okay use the what's everyone saying okay I don't know sometimes you guys have conversations in here and I have no idea what you're talking to them alright so what I want to do now oh yes there is a glitch where sometimes these messages when they display from the database don't work properly like they display in the wrong order so let's log in as Billy and we'll see and I think it's fine right now but sometimes this sort doesn't work properly on these messages and it shows them to me and like a different order at least that's something I've noticed so I want to see if there's any way I could fix that I also want to see it you guys think there's any other features that should be added to this website I mean I'm kind of thinking that like I want something that looks a little bit nicer but I don't really know okay who's drunk okay if you guys are sending D then I'm just gonna be banning you in the chat so okay so I guess our first person is gonna be getting banned here um remove actually you can go in a timeout like that you can go in a timeout - who wants to be a moderator and ban everyone okay put user in timeouts let's see put user in timeouts ah there we go okay that's much better nice clean chat okay um so login logout chat I'm wondering like what else I could do I'm almost thinking like do chat history like maybe I'll add a page right now that says chat history and what it will do is you like when you logged in as a certain specific name it'll show you all the messages in your chat history so actually maybe let's let's go and implement that that doesn't seem like it's gonna take too long and that could be some new work to be doing on this stream because this was coming in just be like a bug fixing stream but that's fine um what's the problem about the name on the site the problem is just that's not secure because it's on my local IP address are using flask on the back and looks like material thing yeah I'm using flask on the back end okay so let's make a new view actually for that and we're gonna meet need a new database method that will query by name so I'm actually gonna say define get messages by name self name alright so returns it's gets wise where's my capital gets a list of messages by username I suppose we'll have a limit on this as well - just in case those message in case there's too many so we'll set the limit at 100 by default but they can change that if they want say / am not SAS string return actually this is gonna be a list of dicks so what I'm gonna do here is Lily just copy this query and this results yep and we'll do that here okay so we're gonna say query F select from where name equals question mark and I think what I have to do here is put inside of these parentheses B name which is that although I'm just gonna look it up because I kind of forget how I query like that so I'm just gonna say sqlite3 query by column python okay cuz I think there's something I got to do with like a question mark for the query select star where ya priority okay so it's in execute comma okay sweet so I was right okay so now we'll just say for our and results and someone's gonna tell me how to fix the stem PyCharm Auto completing like it just ruins my time trying type here so let's take this let's literally take the same thing so it results and then results equals I understand this a little bit redundant I'm almost thinking there's a better way to do this although this is reversing yeah cuz it's gonna do the same thing okay actually no I'm just gonna make it get all messages I'm gonna make it one function we could say get messages my name is one sure but it'll just end up calling this interior function hmm cuz I don't want to rewrite this if I don't have to so let's do this so query 1 SF select from where name equals question mark okay so we'll just say limit name equals blanks actually the name equals none and I will say if not none because we'll just do the same thing okay so let's do this we'll say if not name then query this Alice query equals select from so the only thing is I don't want it to be like you have to do a limit and you have to do a name so I'll make another function that will call this properly in here let's do that name content time reverse limit yep that seems to work for me get Beth's messages by name okay so what this will do is simply just call this so it'll say self get all messages return that with the limit comma name and then we should actually be good on that not idea so what is this saying here what's the issue okay let's see what you guys are saying the chat what's your favorite IDE IDE like PyCharm or vs code maybe hello Tim what do you saying find out Tim's actually getting a job opportunity for disk or anything leading online chat company that's not actually true I'll tell you guys later on but I'm leaving it a secret for now until I go through the interviews okay so come on still that's fine okay so get all messages get messages by name I think that should work where name equals question mark ah that's what I need yes so that query nun named comma okay so now what I'm gonna do is make a new route so say that's you route slosh history maybe yeah so this way you could see the history of any user so this obviously is not meant to be like a secured chat site it's just meant to like kind of show the fact and the communication like more just to show off to be honest than anything so define history I guess we'll have a refresh on the history page so what history will need to do is render a template and it will need to send to that template all of the data both the messages umm-hmm see a better way to do this so get messages okay remove seconds I will need to do that so now I'm thinking I want a utility function just to save me but it's I'm here define remove seconds from messages okay let's say this is promise geez okay removes the seconds from all messages to be less return list so what this will do is say messages message message message yeah okay souls that return messages this now can just be messages equals remove message of seconds your messages MSG's and then return messages JSON five masters okay nice so now we'll make our other routes here so that's you dodge route are already which already make one at the top I did so actually we'll move this to the bottom so I feel like it makes sense to be there okay so here define history at few dot routes will say define hiss sorry this will need a name for sure and we'll call literally the exact same thing here well I should say get underscore history and get underscore history here just on the fly messages except DB duck gets messages by name and then we won't pass the message limit we'll just pass the name which means we'll get a hundred messages at most and then remove setting for messages return JSON five looks good to me okay so this is actually gonna be the route yeah so just say to turn Graham name string return all messages by name of user okay and then we'll add another route here at few routes history like that define history okay this will need a name for sure so in here I'm just I'm kind of thinking like if you go to the slash history page maybe what we'll do is just yeah cuz they could just refresh the page if they wanted to see the new history is just actually call this so get so will get the history by calling this function I think I can call this even if it's not returning yeah cuz it should just give me JSON response and messages then I could pass that JSON response and messages through to a template and the template could just display them in kind of like a chat window yeah so let's try that for now so that means we'll make it need to make a new template so let's go new HTML file this Tory dot HTML okay add we don't need that let's go to index and just copy some of this stuff okay message history and then say percent percent o'clock content I'm trying to debate how I want to display this if I want to put it in like a table I want to like just show them in like a list like I don't really know see what you guys are saying have you enabled the font no I don't know what that is um you guys chatting about I des another reminder if you guys are in the chat right now please do go and like it doesn't take very long I mean I'm gonna be streaming for like an hour I feel like that's like a word the trade off you guys like the chat and I stream for you so anyways okay anything else we need to clean up your message limit okay so history name okay so let's say messages let's say JSON message is equals get messages I think I can call that um forget history but I don't know if it I don't even let me call that just because it has a decorator of it so you say get history and we'll give it the name of session ass that's what I need to do session name key so if not name key if you say if name P no it's in session then return a redirect of the URL for home and I actually want to flash on the home page please login it's not even home sorry this should actually been logging and it should actually be you don't log in so I'm actually gonna flash on that page please log in before viewing message history like that okay redirect otherwise we'll get the JSON messages and then we'll say return around your templates and this will be history HTML nice we just say data equals JSON message is or will actually say kiss Tory okay so that should be good for that let's go to the slash history page let's go blog content let's just do a for loop and less it out for now just to make sure that this is gonna work before you go too far so we'll start by just saying ya know for MSG in what I call this history yeah so this is JSON so let's start our and for I want to remember what it even has as the indexes here so let's go to database name message time come on display all that I've already done that in index quite a bit so I fit in that Jason let's see here documents where do I add messages I've had this in here somewhere then cévennes events add message here's where it is okay so up here we make divs if type of message does not equal undefined bar glow as a wiggle and bar content that's what I wanted okay so we actually just want the one that's dark right darker here okay so I need to put this in a specific div that's what I remember that makes us look like kind of nice and styled and like shows all the messages so let's go history we're gonna copy that in here for now we'll deal with this in a second and then what I want to do I should I can remove all these quotation marks I don't even know why we need that so I don't even think I need these plus signs actually okay then this should go inside a larger div that's okay no no help stop don't want you to do that oh it should be it's a div for message you're like that and then here instead of that would say msg the name okay msg message p what's wrong with this that looks fine okay so I think that should be okay I need to add something to this div I forget what it was in here div class not that one which is here it is okay class overflow I think I had something to do with that but this should be fine for now okay and I think that's alright see what you guys are saying please don't use var and J s letting const are much better about whatever it's fine front end with template block file div or something so what to use Python for Python handles the entire back end this is just like this is the front end stuff I'm doing right now I need to find where this window was here it was okay so let's inspect now the web server is down invalid syntax that's good I saved it at that point okay so we have history on HTML we have used out HTML get name get messages utilities there's something I need to add inside the base template which I believe is just another thing in the navbar exactly okay so another navbar I actually want to do this oh that's interesting chat okay so let's do this have our item link why can't i okay you know what that's fine slash history history okay it's around the web server okay let's go here no not that one I'm ever gonna be remember which one this is k empty cache whoa see so I don't want this I don't want this message Billy just left the server popping up so I'm gonna need to fix that unless it's literally like that I need to clear the history or something okay so history history missing one required potential arguments name why did my Siri just go off okay so we need to fix that so if you go to history so history doesn't actually need to take name and that's in views okay now there was something going on in my front end here that I need to fix so sending messages let's see here if connect equals true cuz I don't want what is the same response object is not iterable for message in history hmm okay ah wait response object history equals because I almost want to do it like this so I know this is literally gonna do the same thing but I think that should hopefully work let's see what you guys are saying is it offline installer' online it's not an installer it's just like a website you're coding website with Python yep so there's something going on though when it leaves that I don't want the index you can just connect ah that's why because I don't want it to say they left the server so we'll get rid of that for now and then here spawns object is not interval or message in history see it's not saying its response so why am I getting that though that shouldn't be the issue message in history I want to see what history is though so JSON message Eagles get history okay let's just print JSON message I think I have an idea why it's saying that but we'll have an idea here in a minute okay so we got an error here I response bytes 200 okay so that because it's returning JSON fly from get messages from get history you know so let's not JSON Phi okay fresh haha this in history tab so this is all the messages that were saved in the server with an okay so we're gonna have to delete those from here because we're not we're no longer going to save those kind of messages um get history remove seconds okay so face use history HTML class and this needs to be msg it's time okay so that should work no you need to use get body on JSON five all right I mean I think I'm fine using flask yes I am using flask okay let's go login actually history okay so when I click history oh it's because I'm logged in but I felt thought I cleared this okay so let's restart the web server actually so I don't know where I'm logged case of logout history please login for viewing message oh my good why's my Siri keep going off Jesus okay so I need to change something here quickly use where is flash here yeah when we go history history history okay history dot HTML flash zero all right okay so now we go in there and we start typing some messages so let's go Tim submit let's go test message okay another one Kevin login from my phone now and just clear the cache first and see if this works give me one second guys I really should just do this on another computer to be honest you know what yeah let's just use my Mac do you have community version of pie chart I've community I prefer Drive it's a Python same I would agree now you your work on localhost no it's not this isn't localhost right now this is um this is working on my like local area network right so so out to 168 0.1 to 1 colon 5,000 ok let's say ok Joey is logging in successfully logged in as Joey Joey just left the server ok so this is what I don't want what's showing right now Joey just left the server so I think there's something that I need to hate to handle with the leaving of the server so get history get message get name slash history slash home go man handle my event if name and data okay so from here I'm sending a message when someone leaves that I don't want to add add message msg okay where is just left the server this is what I don't want to do disconnect I don't care about if they leave the server so let's get rid of that for now leave it in as like commented out though slash slash okay now let's just check the history on here so let's go history and there we go okay so it shows messages this I think should be longer on the the history page so when you click history it just refreshes it obviously I'm go to chat you got your main message there history login history chat log now I'm almost thinking in this bar here what I want to do is put like their name if they're logged in or say like logged in as just so like they see it in the bar or say like logged out maybe so like some kind of status logout you were logged out if you had a history please log in before viewing message history okay so let's go Joey all right Joey just left the server that's gonna be in message history Joey just left the server okay nice so that's working I'm thinking maybe now like some headers for these so like you know start chatting or like view message history or like you know something like that let's see what you guys are saying means coding language yeah you guys have any ideas for what you think I should add to this do let me know please okay so I need to fix this leaving the server kind of thing though first okay so let's try to do that - so I have another laptop beside me which is gonna be my handy tester here as we go through this specs empty cache and hard reload shut up history like okay so does it say in chat now Joey left sir okay so I do need to clear this though so if what you guys might not know is when I delete this database what happens is if it gets too late it'll just automatic automatic Li create a new one so I can keep doing that okay so I removed who don't want remove all that it so save that let's refresh okay remove login when logged in remove logout we're not logged in oh good idea so it'll just check if there's a name in the session if there is a key I like that I actually like that a lot because then that's like kind of intuitive but it doesn't necessarily tell you and although I kind of want to say like your name in the top right so I'm gonna do that in the base template so let's now that means that we have to pass every time the session name oh no we can just fetch request it and display it if they're logged in in the bar okay so we'll do it from JavaScript but I need to make something in the bars another linked if then there's their way I can hide yeah I can hide things in JavaScript from the thing okay so let's do that then so window dot onload and here it'll populate it add messages okay I could just write it base mmm this needs to be in the base template sure I think I want to do this just hide it if they don't have a name I'll fetch request to get name if they don't have a name then just okay so we could do that I'd say so you're saying that's name equal weights get name I'm pretty sure get name just returns blank are not getting named load name okay say load name so if name does not equal blank then what we'll do is just add it into the bar or we'll just hide one of the things so to hide which can look up my other computer or actually it let's just go yeah hide HTML tag JavaScript style dot display is that a thing which is there a better way to do that how'd you toggle between hiding and showing an element Oh jQuery hide I kind of like this one buttoned up click function P hide I think I can use that okay so we'll do that now I need to go to history or base and just get some IDs for these tags so say log in log out ID equals log in ID equals log X okay so here star plug in dot hides all same thing but this means I should have to show it again slash next by default it should be okay so log out log in log out okay see if that works yeah okay so currently I'm logged in so just as log out history chat log out now we get the login page okay nice so actually maybe I shouldn't even show anything I should just show login like I know it's fun they can try to click it and it won't work so log in log out okay so I like that log in Tim submit successfully logged in as Tim log out so I'm thinking beside like this thing I just want to show their name like in the top right hand corner of the bar I don't know if that's really necessary let's see what you guys stay in the chat here agreed what development environments okay anyways that'sthat's fun alright so jQuery hide that works pretty well to be honest now I'm thinking maybe some like descriptive text like this so I want to change how this login page looks cuz like look at this light like it looks pretty ugly what I'm picturing is like a big huge text box that says like name and then like linear almost like enter your name name submit button I don't know let's see login page HTML template let's see how I can steal something see like this is kind of what I want but it's just a username and then yeah so like that like something like that is nice let's see can I like just steal download I want to just view HTML this gonna give me like a wordpress theme oh wow it's like that okay all right so let's steal this and then just modify it message animate toggle opacity slow okay so we'll modify that we'll leave the background how we have it okay so let's just go to index space okay so it's a message block lock content posts okay so I need to modify that so this works on so this has type text' ID static name - don't need password login form text placeholder username okay yeah its input name it's fine so I'll leave the placeholders username but yeah just that form [Music] okay some changes here some it's from inline sack name - I'll have to change the styling a little bit on it but should be okay like that okay I could have messed that up pretty badly but we'll see and then let's go take the styling oh my god okay well we'll just do this in line then block title can I like literally just add style I think I can style slash style [Music] type equals text slash CSS okay so it's just a madness of a file but that's okay so this should actually work hopefully div class form I don't think I had like a different ID on the other form um I'm gonna look on get nice yeah it should be okay just say for login form I'm sure my member found a name on that I want to look at the github for a second and that I think I need that dog message I looked up for my animate height toggle opacity toggle although I don't think I even have anything called message yeah no I don't think that matters okay so submit button primary let's see what you guys are saying sent block is JavaScript code now it's not JavaScript code I'm just gonna look at my other JavaScript for a second I know this is like the worst way to do it but it's just um just goes static Jay yes or not jazz what am i doing application templates login see if I had any specific name here no okay so let's run that whoa Oh God okay we'll fix it over I honestly don't really mind the like obviously this box behind it is like pretty broken but I don't really mind the green although I don't really want to keep it green but that's just gonna be some styling now okay so login contain our info and I'm gonna have one of those Tanner in postman I don't I want to lose either continue I fo standard out info h1 don't have one of those either okay Tanner info no container before I believe that container such a relative for message a I don't have any a tags okay so it's form do we have any even message tags we're stealing no so we don't need that she registered for one we do know much but in hover but an active form input form login page okay so let's go back now fresh okay so I still have this container in the back though and I going to assume that's because in the base template I have div container for block content so I'm just going to remove this actually and we'll implement it in the base templates or in the child templates as we please so in login not not in login in like all of them except login will have div container / div in the index / div okay and then was there any other ones no that should be it okay so let's look at this there we go okay so that's nicer immediately I mean I like this a little bit better so just say Tim submit successfully logged in as Tim okay nice so logout I like actually I'm kind of liking this like green button theme to be honest with you yeah okay I'm almost just happy leaving that kind of the way it is right now as a login button I want to see how it looks on my phone actually on mobile and then we'll go from there so let's go what do you guys think Tim you have have you read the book head first Java no I have not okay let's go login oh it looks pretty nice on the phone - oh and it even focuses in when you click on it okay I just want to change this to say name as placeholder because the username lowercase is kind of messing with me but other than that that's fine so let's go shit's wrong one login say name ok actually we'll say your name cuz why not so I like that green so now the idea is like do I accent some other pages with a little bit of green do a bit more styling your name yeah I like that better submit on the history page I want to say okay so Joey left the server that's a 1041 so I'm still getting this damn message leave thing I don't know why though I genuinely don't know why not I completely remove that from my JavaScript make sure that's saved I think it's just like a mess up like with the cache these views let's see what people are saying here okay hey Tim funny thing is I actually just looked at the same article yesterday but ran to an error and didn't have time to study it out I'll have to come watch you later and see how you did Tim have you read black hat pie no send button green as well yeah good idea let's do that let's make it green so whatever I've done for the button forum button hugger forum button even form input I'm gonna say I want to see what happens if I just move these into uh base leave them and the other one for now but let's just see how this looks oh that literally didn't oh it's because these have bootstrap classes on them so I think I need to remove the bootstrap class or at least just change this although what do you guys think like I kind of like the way it is with the gray although that yeah just the send button being green maybe would be a bit better so I don't need to necessarily add all of this for an input dot form button ah - so what does this have color font size transition cursor so hey that's okay so let's go to you index let's add some style tags here so style I'm gonna go ID son bun okay so let's do pound send BTN steal that background and then just remove this class okay send button login grunt outline actually yeah the only I don't want is padding okay let's see how that looks and then get rid of that out of the index actually or out of base I do want that button:hover though okay so let's get rid of that login not login index okay let's see this okay home empty cache every start send ah see I don't know if I'm a fan of that though like how seeds will square rounding off a button I need to be a little bit bigger than that to maybe we will pad it actually border could I do like five here does that what is that gonna do cuz I'm definitely not a fan of that button I might just steal a bootstrap button and actually make it and just make it green so let's just do that boot strap button green like this one see like a button like that is nice see button success just steal that and then put that in here this is my least favorite part of making websites trying to style it just take so long for it we'll leave that WebKit transition with color okay okay that looks much better in my opinion this scent it's obviously a little bit different than the login button see I'm almost considering making this one yeah I want to make this one that class see if that will override too much or not if I make it button success in the other one so let's go login type button button button primary see how guessing really this and then just change the color shape we'll leave color change the background change the font family okay let's see ah okay that looks much better nice okay so I like that a lot better now history please log in before viewing message history okay nice see what everyone's saying here um let's agree that Tim is smart his mind works on different level I don't know if I necessarily agree with that although I would say different yeah for sure it's flask yes I've been watching the stream from the start hi Tim it's my first time watching you live I wish good luck and bye bye guys I'm only really gonna go for another like 10 15 minutes just because um what do you call it I actually have to go to a job interview chemist and so would you actually release the sappers more kind of a project for YouTube definitely more of a project for YouTube like I would consider releasing an app but I just don't know how to code them secure enough that it really is like the scales to like hundreds of thousands of people and I'm not assuming that that many people would actually go on it but I know if I release this on YouTube like I could probably get a few thousand people to actually go on a website and join it and yeah I don't know if that is you know maybe the best idea okay I'm liking this then looks a lot cleaner now I like this green the accent this history page needs to have something fixed though with with this bar because it's like and you said at least show like no message history or something because right now it's kind of boring you need to delete this database again okay so let's go to history and then get scroll height 500 J us this messages don't see us as height messages messages messages so in history ah because it doesn't have that messages div because I'm just showing them here so I need a div that just has messages okay so div div id equals messages okay let's just see what I had an index class overflow:auto oh I just forgot the ID and the other one yeah I think what am i doing putting another div inside one all I need is really just div like this okay so that should work let's go aha beautiful okay so now I'm thinking a little heading at the top like it nice let's actually just go bootstrap headings for a second any ones I can get that are like I don't even anything crazy I don't really want typography just looking for like customized headings fancy headed with phase faded secondary text can just do with like an H for bootstrap heading although I do I kind of want it to be like centered and let's see you know what let's just go with this for now see how this looks for message history okay so let's go here so I don't want to inside that actually though yeah see so that's not what I want it centered okay so Center heading HTML I think I can just do like text-align:center or something yeah line Center very nice although is that gonna put it in the middle of the screen let's see ah you message history okay I mean I feel like that doesn't look that good though or like there's any way I could pad it and make it a little bit bigger okay so let's go h3 style padding : 10 pixels ah that looks a lot better okay you message history I almost want like a nice little underline let's see I think they have underline here I'm not necessarily underlined but like line components buttons button group dropdowns form input group list group bar page nation what is pagination oh okay progress tooltips oh that's kind of cool what's actually neat okay so what you guys are saying so guys for everyone asking me now is ask me what language I'm using I'm using like four different languages right or four three I think it's three I don't I'm using HTML CSS JavaScript and Python Python is majority the back end javascript is majority the front end HTML is just displaying stuff and yeah that's pretty much what it is okay I want colors display I spelt like a line like I've seen it before spacing text okay let's just look for this mm strap line okay give me a line horizontal divider if you want to divide it with text in the middle let's see what this does just curious so I'll go like this the message history oh that give me a play yeah for sure that could definitely be it okay div stick what I had here what do you guys think like a nice a-line like that like I feel like that looks kind of kind of cool or I could put a line like underneath it just seems like cuz the padding is like kind of messing it up almost if you like let's see if I get rid of the padding we put the padding like on the road Dave instead although that's just gonna apply to everything inside of it now um okay let's just see this padding Cadieux there's a way to do like padding top is it like that cuz I just really wanted off the top oh yeah there we go view message history let's see more spacing between the text and the header okay you can do let's see what everyone's saying here let's see okay I actually think this looks kind of nice I mean like maybe it's not perfect but like it's kind of nice it's good chat I almost want to do the same thing here with the chat and say like start chatting or something like because now it seems like it could be consistent which means I almost want to put this well I'm just gonna copy then the other one it's fun detainer start chatting okay which means index touch yes this is gonna go down to be 72 minus 250 okay there we go so I like that start chatting history view message history I don't know why it's yeah it's always staying so I don't to fix that in the bar too okay so let's go to base now I'm var toggler okay no bar not active do you guys know how to make it so it changes which one's active based on what ones click done um don't know if that's a thing or if it should automatically do that maybe chat history logout history okay okay um nice yeah and then we have a little login button click Submit okay so let's do some dislike last minute testing and then I'm probably gonna call it the end of the stream actually I don't really know how long I've been going for think like started at 9:45 can hour and 15 months maybe okay so let's