Live Coding! Animal Crossing: New Horizons Turnip Exchange with Angular

hello and welcome my name is Steven fluent and you are watching a very special edition of demos with angular live we are here actually sitting in my office where all work from home all work remote due to the amazing situation going around around the world but I actually have a special guest today so let me introduce let me see if I can pull him up here where did he go No there it is live porting plus Jeremy I was here and your editor the whole time he was just hiding a little bit so what we're doing today is we're gonna be building out a app a utility app for the stock exchange of the switch game animal crossing new horizons so there's this game mechanism where every Sunday there is a character that will sell you turnips for a certain price and then every other day of the week they'll buy those turnips from you and the magic here is that you can make a ton of money you can like 6x your money in a week but if you don't get the good turnip preferences that you need you can go to a friend's island and so there's this entire online economy where people are connecting to other people's islands because they have good prices to buy or sell at and so there's a lot of apps out there that are popping up to help people find the best prices and queue and manage that whole process and so we thought hey some of the apps have some UI challenges some of the apps are not the ideal app would you say Jeremy I mean there are some UX improvements that could be made we think we can do a little bit better in some respects and so we're gonna be building from scratch a brand new app I'm probably primarily gonna be doing a lot of the coding Jeremy will be criticizing everything I do yeah maybe here to heckle yeah cuz you can't really build a successful app without a really good pair heckler it's it's a new extreme programming strategy where we've been working out so I'm just gonna dive in here so I'm gonna use a Norse left CLI I'm gonna say new so first hardest part of a new project is the name of it I'm gonna call it turn it Jeremy Jeff uh do you have a better name for the app that's a great name Stephen all right so we're creating a new angular app I know how to do things at angular /c line you turn it here how about we just do ng new you know yarn global add your associate latest because I'm always on some crazy RC version so if we're actually going to do a real app I'm gonna switch to the official latest version Jeremy what are you running right now I was looking at the chat and not listening to you what am i running what there's it is there a chat oh there's a few people watching what version if I hear CL are you running uh on my home computer I don't know on my work computer it's the latest one okay I'm on a nine one I'm on my home gaming PC right now where I don't do a lot of development all right we're gonna do routing should us CSS you okay with that Jeremy that is the way to go all right installing packages usually this goes pretty fast I've got a pretty powerful machine which we tweet out the link I forgot to do that oh yeah you got a tweet about it you have more followers than me so you should do it I mean until this live stream goes out and then clearly animal crossing new it's a new Horizons right portal yes today we're building an animal crossing new horizons turn if exchange using angular come watch us live you have spell words right and then hit the tweet button alright perfect timing the app is done generating so we can turn it and you serve and we can see if this actually works out where's the live chat happening it's you are actually participating in it right now you did it you figured it out all right because version 9 defaults to IV we're doing some really fun extra compilations here while that's going what I'm gonna do is I'm gonna open up a code window here in the turnip folder and we're gonna see if I can get Jeremy connected live so we got vs code coming up here and now I'm gonna share out a secret link so we're gonna take it off screen for just a brief moment here I'm sure you don't want to just whisper the link link to me Jerry invite invite contact if you still have es code open it it says it will just like to share the session with you did that door pop up for you it did yes Wow it just gave me a thing that hit accept that's pretty cool also can you like you can ruin my app now yeah I'm gonna just fill it oh I got it here I met and you serve from this window instead let's just make sure that came up yeah that's good I never did I actually do sir if I did so Hey turnip app is running so we're gonna kill that and you serve we're gonna do a live here because apparently when you do this in vs code it opens the terminal or that opens us server not only on my machine but on Jeremy's machine too which is a really cool way of collaborating I've never seen that before alright Jeremy doesn't trust people that program and are they're always plotting something my very first complaints about vs code and the way it puts in closing braces it's different than what Jerry's getting Jeremy's gonna be at a huge huge disadvantage here today because he is not how to use vs code he is a die-hard webstorm fan yeah all right I'll be back Steven somehow tricked me into using vs code for this well it's it's got the laughing so did we save this you added above the toolbar where does that even put it I don't know it's probably all screened here how about we just go ahead and delete everything delete every another runner hey worked all right we have enough okay I'm gonna do one more thing here in my terminal I'm gonna do ng add at your slash fire and we're gonna actually wire it up to a back end so that we can stream and actually have a live app wouldn't that be kind of cool while that's ng adding in the background I actually have a cool firebase console tab open here and we're gonna say turn it yeah sure do all that stuff I want to know Stephen how are we gonna monetize this I want to get rich from this both in turnips and in money well I think turnips is the way cuz like we can just jump into the queue any queue we watch Oh 600 bells we're gonna be gonna be winning okay well little ad in that back door for ourselves later all right so we have turn up here let's turn on hosting apparently streaming a 1080p video to YouTube is stealing all of my bandwidth computer capabilities hang-ups is probably also not helping that could be I don't have a better way to pipe you in here I'm sure there's some OBS thing that we could figure out in the future yeah you you can Oh PS to me but then I need like a novia server mm-hmm all right I have a lot of apps do we have to turn it come on turn it turn it there it is doesn't have type-ahead fire on us building turnip and then at the same time why don't we create a custom domain it's her nipple in dot IO how's that sound that's fancy how many custom domains do you own I probably own 60 or 70 custom domains that is absurd I wasn't expecting such a ridiculously high number I whenever I have a idea for a business the first thing I do is I buy a domain name for it you're probably spending more on domain names than I do on streaming services uh yeah my feels like 30 bucks a month 40 bucks a month like that I don't know okay so we got turnip that flew and I oh here I'll just show this to why not we're creating a record ip's republic right this isn't given away any secrets every server you hit gets your IP dns is like a directory so okay so theoretically that will work later I'm doing afteron to do all things that take a long time just way up front yeah I only own join a domain and that's for your dog it is it's mal dot dog mal dot do G here should I pull it up here I put it in the chat there you go in case this livestream is too boring for you you can just watch go to Mel that dog way way more entertaining mm-hmm all right so I'm gonna just assume this deployment is gonna work so let's talk about like what this app is going to do so Jeremy and I we've spent at least five or six minutes writing down some thoughts we need to log in I because one of the things I want to do a little bit differently than most the turnip exchanges out there is I want to have reputation where like if the person's they're not there or they're not maintaining their queue properly I want to know that if someone like isn't showing up on time and blocking the whole queue or not updating things like I want those people have bad reputations I want them to disappear so that's gonna require sign-in the other thing that I want is like notifications and things like that I don't necessarily know how we're gonna do that but hey we're gonna figure it out so Jeremy and I talked about kind of how long we want to spend on this project we want to spend upwards of four hours maybe so this is gonna be like a really really low-tech app and if people like it if it's useful for us I think we'll probably spend a little bit more time on it so we got a bunch of screen so I want to build out and then I will say I am bad at firebase when it comes to secured shared data so like I know how to make a firebase collection that is like available to everyone and you can read everything but to making it editable like subsets of keys editable to the right people sounds like a really big pain and so my thought was that we'd make all the api's just write them as functions and then just give everyone read access and the only right axis would come authenticated via function is that crazy Jeremy uh I mean that sounds reasonable for a demo okay if you are able to configure firebase we're like we can have an array of islands and like reputation reports get like aggregated in and only certain people can report reputation reports and they can't remove them like you can do all that I would love that I don't know maybe invite David East next time next time all right whoa web data is that new hey all right so we can actually deploy the app other people can see it and all of our mistakes so Jeremy what do you like to do first I like to actually scaffold out all my paths first to like have a component for the homescreen have a component for the log E and all those sorts things yeah that's reasonable I usually start sketching out the skeleton of the landing page see I want to go straight into the grid of islands so like you know what we could probably do it at the same time do you want to church you I'll try that I tried to start generating components you should just start doing stuff okay I'll jump in once you want to start filling out some some views how do you feel that disabled expects say that again how do you feel about disabling tests for this project oh yeah we're not gonna do tests okay always write tests at home kids oh my god Islands already lost meaning to me as a word was it spec equals false or tests false I you're asking the wrong person we don't use the CLI for a given component get retitle because it predates angular CLI c webstorm it has all of these schematics just built in and you just click a button generate stuff for you you want to start making fun of my component name is an hour later I mean Island View is fine Island new yeah pretty standard stuff alright I think we got a few components now let's fix our route config so I'm gonna do it the way I think it should be done and then we can we can chat about this so there's no reason for there to be a module here whatsoever yeah you don't need what we really want is the routes you just need the routes okay so paths me home component and we'll put it in lazy loaded modules later if we need to I mean I think if you use this happier need all the features but yeah see it's gonna be small enough that I don't think it's gonna matter so we got login let's make a few of these we got login Islands ID I should probably open your dock yeah set it that's fewer routes than I thought what if I'd done oh we fix the module but we haven't actually fixed the module huh they're also missing commas which I won't add I don't know this the shortcut here just all right I'm gonna rename it all caps cuz I feel like Const should be caps yeah kind of disagree on that okay what do you think this isn't a Const this is a like it's not it's not affirmative value I think you should only use caps case for primitive values okay what do you wanna call it uh sprouts okay that's a type do you want to use that type here you want to have slower lower case rats rats does it matter you could call it are you know what you said ours bad it is that's just complaining about oh I I'm an idiot and I disabled control space so I can't autocomplete why'd you disable that because I set up to mute my microphone cuz I forgot that that was for that you also did what's that I got it for you so kind of cool I'm just like fixing all of your mistakes so you got routes what would happen here routes was not found routes export Kant's Jeremy your mistakes okay we might be out of sync then what did you what did you get can't you see my screen I guess you're looking in your yes code not here I mean I have both uh looks right to me okay we got the rudder alright so let's check it out yep oh we're go to login okay so we have some some things should we start let's do you want to start making like a frame like a layout in the app component which UI is that what do you mean what a like what like like the top bar in the footer and all that fun stuff I mean I can throw some stuff in there I mean I have one that's like ready to go if you want to use that trying to use that one yeah don't get in there I want to do it as little as possible Stephen yeah someone asks on chat why do you not need the ng module for offroading module and the answer that is you don't need a module for your route so you can just import your routes in your app module it actually does nothing in angular to have a roadie module like it's a module that gets registered and does nothing yeah do you know the history behind why there's a it generates a module for that I feel like if I thought about it I could probably remember but I don't remember him it seems like something that may have been necessary like years ago and then that was eliminated all right just shamelessly stealing source code from other projects and then we don't need all that fancy content projections so we'll just replace the ng content with the name of the app I'll handle that okay Jeremy thank you and I'll start copying over the sass to make it look a little bit less terrible Shh tests oh maybe it's code froze mine didn't well thank your it's gonna be all you from now on then you're gonna have to did you ever turn up for turnips yeah greater than we donated all the default stuff in the template right so I can just like wipe out the the CSS that comes in by default right to lay off component yeah delete the app come on s CSS entirely outside we don't need any component scope styles global to our app alright I have to reopen vs code we'll see what that does alright yeah my session ended so you're gonna have to invite me again yeah sure I'm the mace all your changes made it through though yeah it's pretty good alright hey look at that we have an app yeah should we make a login screen uh go for it I'm just gonna like fit on with CSS did you see the sass I put into the global one uh style saucy is us yes uh oh I did not see that that's that's why it looks so great okay oh I I think we might be having a breakdown here Jeremy rate might be ESCO just crash again alright well this is this is what you get for trying to do everything experimental technology give it one more shot alright and I think it's it's the fact I'm like right-clicking and deleting files and stuff like that I think if I don't try and change the file structure that would be better ya know I haven't used this collab or edit thing before so I've used it twice oh maybe they just have a vs code bug I'm not in the latest yes code Jeremy how embarrassing alright you do that I can get just tell some jokes while we're waiting there are 26 people watching right now I have to keep them entertained damn what dude generic programmers drink what did you near programmers drink what did they drink Jeremy tea okay well what's the difference between c and c plus plus plus plus zero wait I don't get it the expression c plus plus evaluates to zero because you get the value out before the increment operation happens to tell me the joke you know like I know that she wasn't initialized she's totally invalid just a joke one more time what's the difference between C and C++ got it you're a funny one all right so we're gonna live share oh who did it start with can you see my my lab shirt that I just started no not yet all right this is the last attempt at a sweet live share now I got it let's let's commit let's actually say we've got a good State I'm an NG sir just test to make sure we haven't I feel like 10 to 20 percent of this is gonna be actual programming 50 percent is going to be waiting for things like BS code to crash well it's not gonna crash anymore the rest is gonna be the Jeremy show jokes an improv no I mean if you uh if you think just consistently crashes I'm just gonna go actually play animal crossing that you'd betray me like that in a heartbeat whoa look at this look what I just put in my commit message yes go did co-authored by me Oh lovely I don't actually know what that doesn't like github but sure whatever I think I didn't see the format but uh github does have a system where it recognizes certain formats - after people for Walters hmm okay and I'm missing a tag on our router around our routing module was it page it's usually called page because we're missing some default nice padding main shouldn't really be a class but I didn't write this fast boat to do okay we have an app now let's fake out some data so I'm just gonna do it my app component for now so what do we actually need in our app here so when we list the islands we're gonna need a name I'm gonna I'm gonna scaffold this out and then you're gonna fill in all the witty example data see I'm distracted trying to find a good fault that's app I mean that is the most important job so Google Fonts shows you fonts that are available like from other places but I really just only want to look at fonts that are available on Google phones Oh expected wait time was one of the other features I think we should be able to do right if you know how long it takes the person to get through I would estimate seven minutes per person all right we have an example Island and a broken hip and now I could just see arete eclis start are you editing the index.html are you insane yes touched it a little bit tight here can you save it save the changes you've made because I want to close it did you open it yeah wait does it open for you when I open it I'm already an advice versa I was already in there I didn't open it like when you open index.html does it open for me they must have that's crazy all right never gonna go to our home component and I don't need any scope styles to my home page but I'm not gonna delete that file because that does bad things I compulsively save I hope you don't mind I need the same thing and we put the example island in the wrong file but that's okay I can cut that out of there in no time okay so we've got my own list so let's say no pipe found with named Jason you need a common module why why would I need come-come and module comes with every single and go a wrap I've ever built unless we accidentally deleted it yet browser module includes common module I think that's got to be some weirdness from our setup because even the language services like yeah that looks good Jeremy can you take a look at this it's I think it's the 30 people that are watching that are made me incapable of coding take a look at your JSON pipe know you might home dot component file home doc component all right o component TSR HTML yeah are you sure it looks right and yeah I mean I've done this about a hundred times so yes would be weird that it doesn't work you know imma do I'm gonna kill the server and restart yeah this compiled successfully but it's still not working all right we're gonna kill this hey it now we don't have to follow bug reports a reproduction I can just upload this live stream directly to github and say hey here's an issue I think that would be the worst bug report ever a 30 minute video I've had worse Tucker reports errors are in the template yeah no pipe found with name Jason did I spell Jason wrong like what's going on here I'm gonna ask why using only global styles in this app laziness for the demo what I will also say none of the Styles we've designed yet our scope to a component and they're for our inherently global yeah that's true I set the font for the whole lap good it's not even serving anymore I did write an angular template right now accidentally programming like reactor viewers only know this looks right I spelled the island right as well yeah it is land yep now compiled successfully all successfully you just had some weird glitch but we have no there's something else going on because there's no islands listed what island a violent list let's look at your island list it has one entry its name is that name you see this is why you need two people to build an app did you rid of the padding at the top here what padding Jeremy I didn't get very much beep at any padding probably if you want just don't worry about styles right I'll fix up your styles as you go okay we still we're still rendering failures I didn't need you've gotta set your dev tools to dark mode yeah my ng4 is empty so let's let's try this island with type Jason nope I found with named Jason hold up my components I am loading pipe Jason cannot be found ooh addition beats this feels like an angular but this doesn't feel like me is that crazy Jeremy I've honestly never used the Jason pipe myself what I never need to like render stuff out for debugging because my code is perfect every time the first time hold up but now like it's in common module right it exists it should work my code my code is great we're I'm gonna prove it here yeah like it it's fine right you're clearly having some kind of like environment issue I am I'm honestly suspecting it has maybe something to do with the like collab session because maybe like I don't think I'm doing is like clobbering something you're doing yeah it totally works I'm not crazy mm-hmm I'm gonna blame BS code for lack of upto evidence you can't say otherwise do you want to stop the collapse ession I mean go go ahead and try to stop it and see if it like works for you and if it does and it's probably not the best option for continuing mmm I haven't stopped collaboration kick you to the curb all I can jump to where you are that's kinda cool here I can just leave collaboration session yeah just leave get out of here Jeremy all right I'm gonna close the S code we're gonna start over we're gonna ng surfing over here and we're gonna this is a really fun contrast to the times I've done like live coding on stage at ng-conf and if like practiced it 40 times yeah it's fun yeah does the Jason pipe networking 9-1-1 oh my gosh Jeremy can you double-check that in the background Wow I mean I looked at the docs for it write it like it exists it's ink no no no I know it exists I've proven in stackless like I used to Jason pipe in every single project like I've built hundreds of anywhere apps can you check and see if this is a regression in 9-1-1 check I would be extremely skeptical that it is otherwise like I I would as well all of it something all of our Google Apps would be broken unless it's like a an NG CC problem right let's see usually in building apps like this we don't get to the point where we think is the platform broken I'm pretty sure it's something with your environment no I'm not seeing any issues okay like it's working or you're not singing if you check in the issue tracker I'm looking at the issue tracker I'm pretty sure it's something is just weird with your environment and it's not like picking up the symbol or something but like I've killed the invite like a the IDs and I've been running anymore so I feel like I can't blame the IDE anymore yeah that's too bad I really did want to blame BS code I sure you don't have some other error that's actually like just getting in the way of the rest of the thing working oh that's absolutely possible because I can't see your whole your whole thing okay see ya I don't have the resolution on hangouts to see your like actual text check if I have common module apart yeah we definitely check that I mean for any browser module which imports common module all right we'll have this nice little Jason pipe test up in no time yeah my theory is that you have some other error that is yeah yeah no it's totally likely I that would only make sense and I've no idea how to debug that uh go ahead and add me back to your session since we ruled that out so I can well hold on all right I'm I'm doing experiments with the same version of angular in an in a brand new project that you've never touched you've never ruined Jeremy oh I see I see how this is gonna go well just in case like right we were both deleting ego Jason I was running an G ad or something like that and it just host something I don't even know next time we do this I'm gonna drive and we'll have already like been sellin turnips by now to figure out if something like this exists for webstorm wouldn't it be cool team hub plugin for IntelliJ so okay so angular 911 once perfect so now I'm running ng at angular fire which does a bunch of stuff that I'm worried about so we're gonna see ng at angular fire ruined my app still doubt it and if not then we can just our sink on top of all the work we've just done with this working project because I I can't even develop right now here I will add you back and then you can you know it's also you went down this rabbit hole trying to figure out why Jason pipe isn't working you don't need it at all you were just trying to get okay data rendered out my island is wasn't rendering either yeah so something else was going on and Jason Piper typically it's my technique for figure out what else is going on you are not signed into vs code right now so I can't share with you I have it open join collaboration session here also copy the link without sharing it there you go now we can secretly pass it off mm-hmm okay what is a project I can blow away I can blow away the failboard temporarily sure all right let's see here so can I run it run terminal command than this oh I see so the terminal is read-only for me I can't run stuff it's kind of neat though that it does run the webserver for me I agree all right let's see no so you wanted to check the scroll back to see if there are others no there are no other errors hmm skeptical so if we delete that line save that's a rerun and I would expect to see name row here servers not up yet I'm doing too many pills at once Plus hangouts plus live streaming to the internet compiled successfully you know so let's see yeah so I'm like literally seeing other components not letting because of Jason couldn't be found so but I removed juice did you save after yeah I saved maybe it was operating on testing one see uh so we're not see so even though the length of this list is one but so here's the thing I'm seeing in the console cannot bind to ng4 of because it isn't a known property of div so clearly oh I think I know what you did Steven uh how do I get back to the files home component where's home deponent component declared I'm trying to figure out how this works oh if it wasn't loaded properly in the module mmm there's declaration it's declared there and that enforcement [Music] here I'm gonna commit this and push this to get up somewhere so that other people can tell us why it's broken I have a theory run yarn kill your dev server and run yarn our tip today oh yeah that's one one way to do it what do you do I mean I don't think you'd needed to to kill them I just wanted to see if you were in yarn if it would do anything I mean and GCC like with both of us touching the file system while in GCC ran I totally would believe would ruin things oh that's a decent point right but we could have operational transformed our way into a bad and GCC state could've but get should have told us that we were doing that well or we just did something super dumb and like misspelled ng4 mm-hmm ng fur that's no ng fur or oftentimes I'll use like the like let syntax in ng if which doesn't make sense but I do it sometimes here I'm gonna have look at the repository Alyssa's building and look at my commits and see what I've done well it says seem fluent in jail born in all the commits so you see you're equally culpable for all these mistakes mm-hmm forever written in an indelible record for all time yep I got fired well so far the get history looks perfect all right your yarn install is done try try doing till as you serve I don't know why it warned me about JIT that scares me I think that was just because you killed your web server while that was going okay all right I see it compiling angular common within GCC that's a good sign I feel bad for watching this live stream where like if I could go back in time for you I would be like hey a minute 20 just skip forward like an hour well put in post will fix it yeah sure I mean I did record this so well I look a big welcome back to if you're looking for the repository it is here github.com Stephen flew in / turn it Hey look it compiled successfully okay and it'll work that works so here's here's the theory we're gonna go with somehow our cooperative edit session corrupted the node modules for angular common yeah seems pretty reasonable to me and the moral of the play is next time we'll use webstorm yeah as soon as web stream has a live collaborative editor he does I looked it up okay what's it called I already forgot all right you want me to turn that into a table for you while you do something else I mean really you're offering that's that's sweet of you sure why don't I go start loading the data into a real database yeah you do that I'm gonna just make this a real table because that's something I can do easy-peasy easy-peasy breezy beautiful your Apple do you know we're using the new angularfire six that came out last week why isn't it angularfire nine they're not there yet they stuff a couple of versions to work on the PS code has like a lag between writing an opening tag and when it goes to insert the closing tag and it keeps really throwing me off you just keep coding in the background I'm gonna start watching the data but yes code command a duplicate a line control C control V I don't know really I there's probably one I don't know what it is laughs whoops whoops yes some of the type some of the vs codes just going wonky I guess I just wait long enough and it'll just work hey the we sure had to ask the most important question of all project right two spaces are for you but four is way more legible disagree I you know when I was in my my younger days of programming I did dabble with the for space indent and sure it seemed fine at the time but really I just didn't see how whitespace was destroying my life and it was destroying your life and you didn't even know it mhm can I find magic module firebase slashing app Oh God more bugs they're not my fault time just thrown any on it if you're having trouble typing something any reason the home component s CSS is unsaved let me editing it oh you invite me to edit your projects even and then you're all confused about me editing your project I thought you working on a table looks I am CFS is an important part of the table do I have to import firebase anymore I think I have to import firebase [Music] no it doesn't look like I do all right someday this will pick up my changes and why I've broken that I've broken the build right now mm-hmm because I'm trying to switch to your fire database and import database from firebase app like there's a bug in angler fire allegedly I'm wondering this is an NG cc bug again but um let me take a look cannot five right oh that doesn't look like an NG cc bug that looks like just a bill there right cuz ng CC is only dealing with the metadata and this has nothing to do with the metadata uh I know what I'm doing wrong one of the least one of I know many things I'm doing wrong we need angularfire database here No so they rewrote and your fire six to try and lazy load all the firebase SDKs when they're first used and I think that's what the issue of money into now this is outside my wheelhouse so I don't know how to help you with that I mean ideally like there if you follow the like normal path right you should just get the parts of the code that are in the base module and you shouldn't have build errors referencing stuff that doesn't exist unless you're oh no no but like alright angry angularfire lazy loads fire base now but are you oh I say so are you using maybe something in the type space that you don't actually need in the app I mean yes for now let's we can back that off let's do it this is not anything there are no types but now you can just use the new type script like import type thing so now the problem is back to our app module / why are you doing this import database so I've just removed all references to the database so that shouldn't exist anymore Don't Tell James James do until James Daniels this is the fun world of real-life development so I'm checking the chat you might have loaded incorrect importer provider so we're actually relying any providers yet the target entry point angularfire has missing dependencies firebase slash app how long has it been since you read the documentation for our angular 5 I've got it up right now my friend seems like maybe they changed something in 6 that uh dogs are wrong line up with your expectations or their dogs no doubt it firebase is pretty good about docs in your first six should we just go crazy and go back to five probably not what do you mean I don't know if that's gonna help you I mean it's still it came out like a week ago we're doing it I mean the engineer miss Daniels is a kid like this could be the same thing again but I doubt it because the the kind of error you're singing isn't something that that ng CC would be involved with I agree this is pure typescript that's my computer so slow because you're live streaming and coding and having a hangout yeah that's using four hundred percent of my CPU got it that's a fair amount of live streaming uh it's Rienzi CC'ing mm-hmm maybe that's a good thing so for those of you just joining we are building an animal crossing new horizons turn of exchange and running into the most basic of errors I would things like Jason pipe networking I would say we're more attempting to attempt okay and by we I mean Steven I'm mostly here just watching and taunting him the chat suggested reinstall firebase now you know what it is uh what is it you have actually like firebase installed in this so when I installed when I ng added angularfire it edit fibrous did it I mean it's in my package Jason I just dumb grid it to six are just curtain down grid it to five ICU angularfire I don't do fire me ah to dependence not is it not a peer dependency here okay yarn add ethnic or / fire that latest fire race I illegitimate Lee don't know if it is a peer no no it used to be a pure dependency it absolutely used to it used to be a peer Deven see I thought that he changed it to a dependency but let's just at it what harm could that do just another fun and GCC compiler right listen we will continue adding node modules until this works one of the funniest apps I ever saw was a they were doing a bake-off between angular and react and they built the same app in both and the angular app was way bigger and likewise a new half way bicker and we sort of looked looking in there a newer code they were using a component library that was just a angular component wrapping a react component so the angular app was blowing bringing in all of react yeah there's there's a moral here which is that rappers add a lot of unnecessary payload size costs always have you run into that angular material I mean it's one of those things right where like if you wanted to this is something that I've actually been working on lately of like how can we make custom elements be a better participant in angular right and the like naive thing is just like yeah you just create a wrapper around the custom element but obviously that makes it oh oh it adds a bunch of payload size for mingoes generated code that like you really don't strictly need how much we talking about it's the dynamic depending on how big the API surface is but like every talk from 4 KB per element component it depends on how big the component is and how just like order - how many inputs how many outputs I don't have a number off the top of my head okay well but it's gonna vary wildly based on the component hey our app works again so ng at angular fire should probably add firebase it's what we're learning here yeah if it doesn't that would strike me as odd let's just yell James Daniels and into the void no that'll fix it is it not david east working on it mainly anymore I think they both work on it I think James Daniels has taken over most like he's doing all the releases he's I think he's doing most of it I'm not on that team so it's I'm just guessing all right now we're gonna go back up to our sweet home component and we're gonna add back in that type cuz their app still works right yeah does it I stopped paying attention while ago oh it's it's totally working they look at the table Oh why are those th it's center-aligned by default who came up with these browser platform you've brought other gen styles the browser's okay so now we're gonna say constructor come on and please please somehow change the indent - I did I'm just I'm so oh maybe we have to change it on my end command shift eyes and with it I know it's in the prettier config so should have oh do you have John Pappas and here are essentials installed and literally just involved vs code 15 minutes before we started this thing okay the only thing I added it was actually I literally out of nothing but the collab edit thing you should install the John Pappas and your essentials I'm so worried about breaking the app now that I'm like checking it after every single line item I still don't think this is picked up my CSS changes to the home component yeah I see him do you see a border on the cells let's check see he's home component table should have border collapse like there's no like you don't even see an importer right app home table I don't see a border online your styles are not applying oh I have a question is your home component referring to your SCSS oh did you not set that up I removed it because I didn't expect any why would you do this the only thing like that why you gotta give me dirty I just gotta do dirty go do your data thing I'm doing okay I'm doing it in many things that's so I keep hitting ctrl W as in webstorm like that is the shortcut for highlight the token you're on and envious code it's closed the editor can I use JavaScript on your file first I'll URL or template URL yeah that's my man you know better yes oh it's not the right type I'd say someone in chat says that angularfire 600 works for them out of the box with angular 9-1-1 oh I didn't think about that the current lease is 9 1 1 so I'm gonna do a 9 1 1 I think that's just uh Steven did something weird that I mean can't be accounted for open subsequent alright functional man that's another of our list now what's this what's this any business you're putting in here I'm gonna type later you know type later you promise yeah I promise cuz I need those types to be able to refer to all the properties property Islands must be of type and your if I list any oh I'm an idiot do you ever set the type of something instead of the value no like I mentioned earlier my codes always right the first time every time only reason we keep you on the a your team Hey look we actually got a board a rendering now so let's go ahead and fix the color of that that's a reasonable padding we're gonna want to make or are you are using variables on the island yeah and using variables on the island I don't yeah island named island price you are yes name price date [Music] you know about the call element of a table the what I don't know about that one lousy to style a column wow that sounds pretty cool you broke it mmm I'm not the one hitting the template right now you broke it does it not oh I think we we over at each other's changes I moved Iowa there's Islands became island data live stream don't tell him that I actually broke it I'm I know you broke it cuz I wasn't anything anything that would have broken the build how late were you planning on going Stevens I was planning on stopping at 9:30 p.m. Pacific time okay how about we stop at 10:15 p.m. specific Pacific time ten minutes from now sounds great I'm very sleepy yeah I gotta be up at 6:05 a.m. tomorrow cuz I got her to the grocery store to try and get some food is it really still that crazy it is yeah hey look stuffs coming from the Internet's sure is should we you want to test it get rid of our local data model and then we'll pull up the web app right next to this firebase let's change hey wait tonight rid of the Jason you gonna write bells the unit hears bells Jeremy no this is useless information this is bad you acts right everybody knows unit you want to avoid any repetition of something static in the table right that's the same for every every row earlene can't set text below Donna gonna call have to do it on the pH and the earthy be separately what a disappointment what's the two ISOs victory oh I got to put a real date and time into our database so that our new pipe can handle it we were using the CD k table I can just target one class now Stephen you know why the CD k table will be overkill for this turn up grid because they don't need any of those features hey but what features I don't know sorting not gonna feature it City Hall call and renaming what what are the features of cdk tables Kerala you would want to use cdk table if you wanted re dynamically reorder Abal columns yeah don't don't need that we're gonna we're gonna be opinionated about the order of our columns Urmi we can just get away with static table oh come on firebase we did it look at that data is coming from the database you can add all the other fields we can add the Taipings all right we need a wait list can you add a wait list section to the table or yeah I gotcha and I'm gonna start working on the login screen we have five minutes left X I'm gonna commit you need a place to commit yeah go ahead and commit did you commit no 3000 yet are you done yet it's live actually it's it's I'm gonna run in the background here an energy deploy so that everyone can see our sweet app that's on the livestream I apologize to everyone the livestream that where it's 1:00 a.m. for those for example in Atlanta Georgia but this is the only time I have to do this kind of fun stuff so it's either don't experience this amazing awesome debugging or watch it later that's okay - all right the asymmetric table look here wait let me think what I didn't even know you could do it yeah I mean this is not there's no there's no th element there to have a border on it yeah I mean I'm I'm down some people shy away from the table tag we that's the basis for our whole UX I mean when you are displaying tabular data it's the right thing to do it's questionable whether or not I should be putting a button inside of a TD in this in this context but really why because from an accessibility standpoint the only way you're gonna be able to hit that is by tabbing through it it doesn't like super mesh well with the way assistive technology arrows through a table um okay what's the right way to fix that you could use roll grid but that comes with a whole lot more requirements because you have to implement a whole keyboard interaction system yourself what one authentication providers do we want Twitter or let's do just do Google for now because that one's easy these Google we can add fire I'll leave the method in here for Facebook and we won't use it and you lower fire off module and notes good no it's markdown what you call they'd be like the description field of Island is a just description that sounds like what I would have called it oh good the angularfire 6 API for authentication changed so I can't just copy paste any my code yes we have three minutes Jeremy to get login working you I think I'd like to hit login working Jeremy I can come to you when you're not here I just know that I'm just sitting here adding TD's to a table like I've been doing since freshman year of high school and somehow Google it just pays me for it why Oh Oh weird the example has an auth object just being imported directly from firebase app okay and now we need a button can't resolve angularfire I thought why not just go really quiet listen is it angularfire off off we've got to box in there I already fixed that didn't you watch me fix it or are we thinking oh and there's I thinks I'm just some lack yeah and it's not rebuilding so what's going on here do I have to kill it and restart do you want to disconnect just so we stop having are you still fixing things yeah I'm probably I'm gonna disconnect because I'm done for the evening all right I am very sleepy can you hang out for two minutes while I get this logging man working oh yeah oh wow I would never put a quote there the ng service stop live updating I'm going to kill it you know we're starting about that control see up enter yeah so in case you didn't catch that we're ending in approximately zero minutes as soon as I have this login button working oh and I forgot to turn it on in the firebase console hmm I love how easy firebase makes authentication like it's crazy yeah I'm gonna use it for my side project all right so we have an app and she starts working firebase thoughts set up did you make any cute go anywhere probably not no I didn't even hook it up to anything Oh critical error we might just have to we might have a end on a cliffhanger Google off provider of undefined but that's what the docs say to do do we have always shadowing a name or somewhere we're office not the right thing I closed the session so I can't see the code anymore auth is undefined alright angularfire docks you're failing me again where is Google auth provider I bet it's not fair this app that is fair base off I think no guessing I am get like the docs say it's an app and it was not working the typing say it's good good and exists and not undefined but my console vlog disagrees all right all right so that's it for session 1 of the animal crossing new horizons turn up database we've got some live data coming in from the web we've got some decent styles Jeremy might even be thinking about accessibility at some point and it's it's gonna be I'll live here so let's just run a deploy again I'm always thinking about accessibility and most of the time just kind of struggling to get it right there just turnip that flew in that IO you can check out the app yourself otherwise it's on github at github.com slash Stephen flew in slash turnip and we will continue whenever you wouldn't do it more of this oh well Final Fantasy 7 came out today so my schedule is pretty packed so tomorrow night or Monday night at the same time um maybe Monday ok alright stay tuned we'll tweet it out maybe we can tweet out like an hour before we go live so people actually know about it or even several hours all right can I hear me thank you so much this was awesome good night bye everybody

Channel: Digital Fluency

Views: 4,127

Keywords:

Id: pKQP74qVy3A

Length: 84min 14sec (5054 seconds)

Published: Fri Apr 10 2020