Draggable Kanban App with Svelte ft. Brittney Postma - Colbyashi Maru

hey team welcome to kobayashi meru the show where web devs all around the world boldly face off against the most logical tools on the web i'm colby fayak your space jelly commander and host of today's challenge today we have britney postma she is a front-end designer and developer at coding cat dev where she helps with the codingcat.dev website as well as co-hosting on the podcast so let's bring her in hey brittany do you want to give a real quick intro about yourself yeah sure hi everybody i'm brittany postmont as colby said i work at coding cat dev um we're doing a site redesign right now um we're moving from wordpress over to next.js so we're doing a complete site redesign and moving all of our front end and back end over so that's pretty exciting i co-host the perfect.dev podcast also with my partner alex who is a part of coding cat dev and i write blog posts and on dev topics and create course content on zero to mastery and um for coding cad dev as well usually centered around the jam stack and uh css good topic cool well uh if you're new to kobayashi maru our guest will have one hour to complete their projects to that time britney will talk out loud as she's kind of walking through the challenge and also i'll be asking questions along the way so if you do have a question don't hesitate to ask in the chat and i'll make sure to field it over to brittany so today britney will be facing off with building a draggable kanban app in svelt if you're familiar with jira or trello you might have been able to drag around those nice cards around in true kanban style and if britney doesn't finish the challenge all's not lost we'll see how much time we have at the end to finish up or we'll just chat about what the next steps would be so brittany before we actually dive in do you want to just touch real quick on the tools that you'll be using yeah so we're going to be using svelte.js um we're going to be using the older one and hopefully at the end we might have some time to dive into spelt kit but it's still a little buggy unfortunately so i couldn't do the whole app in it um but we'll be going to stealth.dev and we'll be starting there just from a scratch app we will be taking some things out and then building out our components and we'll be using spelt stores and then we'll be using a package called spelt dnd action nice add the draggable aspect awesome that sounds great cool well uh if you're ready to go i think we can get started sounds good i'm all set cool okay well i'm gonna switch to presentation and then let's do a nice little three two one let's go all right so here we are on spelt.dev this is the main home page and we are going to just run this command that we have we see right here it's npx digit spelt js slash template and i am just in an empty folder right now just wherever i want to create an empty folder on your hard drive you can do that and then after the space it's whatever you want to name your project so i'm just going to name this kanban and hit enter and that is going to start cloning everything down and i'm going to cd into that folder we created which was kanban and then i will run npm i to install everything so while that's installing i haven't actually used the git before what is dkit it just clones everything from get down um it's just i think it's really just another form of like how mpx runs i don't really know what is different between digit and just mpx is it kind of like the uh create next app or create react app but just for any package yeah but i've seen it with other things other than spelt too so i'm i would have to look up and see what the difference is all right so that is installed now and i'm just going to type code period to go ahead and open that up in a new visual studio code window and i can close this other one out so in our just plain spelt package in our package.json we have our dev dependencies it uses rollup as a bundler and we have svelt and in our dependencies all we have is this serve cli which serves up our is that hot reloading i actually don't know what serve does but that's what um spell is a compiler so it will compile all of our code for us and run it instead of just pushing out like react pushes out all of the javascript to the client side spell actually compiles most of it away except for what you need so that's right because they don't actually ship like a framework and run time right yeah there's no framework at runtime you only ship the javascript that you actually write inside of your component so it's really nice and really lightweight so in our source folder we just have app.spelt and that has some basic code we're actually just going to rip all of this out for now and then they have a public folder that has our global css file and a favicon that comes with it this scripts folder i'm not familiar with i think they just put just basic scripts in there that you can run for server side stuff we will not be using that today so this is your entry point to your app so you can create props that you need for your app through here but we will not be using that so i'm going to take that out and this is just like uh app.js in react yeah that looks like as if you're rendering what is it mounting on the for the react app yes and i'm going to move this back to the bottom sorry about that and push that down so we're going to do npm run dev and bring up localhost 5000 oops zoom got in the way and here is because i removed that props it's actually got undefined there and we're just going to put hi in there for now so the first thing that we need to work with to create this is to build out our store so we're going to do that by creating a folder inside of the source folder called stores and then inside that stores folder create a new file called store.js and another file called persistor in this context is store kind of like a redux store where it's your data store it is very much like redux yes it's actually built into spelt so it's kind of just the trying to it's like an observa uh observability observable so um okay it creates like one source of truth for your items that you need to use in multiple components so you don't have to have like top-down data props drilling all the way through you can actually pull in wherever you need so that is we are going to import uh from svelt we're going to import the writable and this is how you write to a store in stilt i forgot all right and so initially we need to create this felt store but we also want to use local storage to persist the store so we are going to take this and create a function that is going to allow us to set it to local storage so we're going to do export const persist store and we're going to give it some parameters of a key and then an initial value i'm just going to call that initial and then we're going to create a couple of constants here called persist and this is how we're going to set to local storage we're in local storage and check to see if we have an item in there already we're gonna say i typed that wrong local storage dot get item and check to see if we have that key in there already that's to be our persist variable and then another constant called data and we're going to check to see if persist exists so we're going to say does persist exist question mark and then if it does we're going to parse it so we're going to do json.parse our persist variable if it doesn't exist so that's that ternary there we're saying if persist exists we're going to do this first thing if not that's the colon we're going to do this other thing so then we're going to set it to this initial value so the only other requirement of a spelt store besides setting it is to actually return an unsubscribe function from it so that's what we're going to do here we're going to set our store up to the writable and to that data that's going to check to see if we already have it in local storage and if not set it to our initial value and then um i can't see for the little vs code pop-up then we're going to use this callback function after writable to do our unsubscribe function so what unsubscribe is going to do is if anything ever breaks it's going to set our subscription for our store item to whatever's in local storage so it's actually going to break it and then just set it so it doesn't change its value anymore if that makes sense yeah i think so this seems more like a straightforward way to work with the local storage because i'm never sure with my react apps where to put that kind of thing yes i feel like it's very straightforward and there's not really much setup like redux has a lot of boilerplate code you have to go through and this i mean is just a few lines and yeah so we've got our unsubscribe now and we're going to do the stored up subscribe subscribes us to that value and we're just gonna set it with that value callback if anything ever breaks down and that's that unsubscribe and then outside of that we're just gonna return the unsubscribe function and then outside of that we're going to return our store and that is it for the persisting to local storage so this is the whole code that you need to set up a store in spelt and persist it to local storage now we don't have any data for our store yet so that's actually the next part that we need to do is we need to go over to store.js and we need to create some things to go in there so we're going to import our persist store that we just created and we need a few things here so we're going to create a default set of columns that we're going to use so basically just some default data that we're going to show so we need default columns and that's going to be an array of objects so we're going to do an array and we're going to do some objects inside of these this default columns we want to create an id and we're not going to put anything in here now i'm going to come back to this i'm going to put a title and i'm just going to put to do these are just basic ones that we're going to start our app with and i'm not going to put anything in the cards but i'm just going to create an empty array there and i'm actually going to duplicate this so i'm going to copy this three times and this one is going to be called in progress and this one is going to be called complete so when you say default columns that's not like a database column it sounds like that's the the different columns of the actual application right of the actual application this is just a variable for us to use to pull in some default data so um if we don't have anything stored in local storage this is what it's going to use so we've got three empty cards we've got to do in progress and complete for our columns and i said i was going to come back to this id because what we want to do is instead of pulling in a package or something to handle ids i'm just going to create this little function called uid and this isn't a perfect way to do unique ids but it's going to work for today so math.random and string and substring is it sub or str two nine that's just going to create a unique id on every single one of these when we go back i'm going to hold alt i think it's option on mac so does the substring just take away the decimal in the beginning of it um so we're going to math.random to get a random number we're going to stringify it basically and then substring is going to um i think it's something i've i found this online honestly so it's just uh doesn't it it takes it takes the second and the ninth character so it just makes it more random yeah and so i held alt i think it's option on mac to select each of these three and i just added in that function so each time we run that it's actually going to create a unique id so that is our default data that we need and now we need to [Music] um let's see we need to persist our source so we need to run our function from the persist store that we created so we're going to export this function called store this can be called anything you want i could call it boards or whatever it just i just chose to call it store so persist store and we're going to run that function with the key that we're going to use and then the initial value so our key that we're going to create it under is store and then our initial value is actually going to be these default columns and that is running this function that we have over here in persist store with that key and the initial value so we're actually putting in store as the key and that's going to store that in local storage for us and if we don't have that key it's going to send in this initial which is our default columns so that is that part and the only other thing that we need to add in here is we need to be able to add and we need to be able to delete so we are going to create a couple of functions to process those so we're going to do an add column here and to do that we need to grab our store that we just created and we need to run an update function on it so spell stores go over here and see if we can search belt stores i could type custom stores let's see they have a subscribe set and update that you can pull off of them so each object has you can either subscribe update or set so we're going to use the update part of that and we are going to update our value we're going to take the previous value and create a new version of it so we're going to say get new column oh i forgot to create a function so before we do that we need to come back up here and we need to create a function called get new column because we need to be able to run and get that new column so this one does not need to be exported because it's just going to be a local function and we're just going to return from this our blank column okay so this is if i'm in the application and the original columns aren't enough and i want to add a new one this is going to just generate a new i guess so we created some default columns but then if we ever need to add a new column so we're going to create a button that's going to allow us to add columns to it so this is just going to return a new column so it's just a basic one single column with it's an object with an id a title and cards so that we can add that to our application so then we're going to throw that in here we're going to say get new column and then we're going to spread across the previous value so that we're not actually changing our store we're spreading in plus getting the new column so we're creating a whole new array and that is all we need to add a column and then to delete a column we need to kind of do a similar thing where we delete the column but this time we need to take in the id so we need to add the id in as a parameter and we need to run the stor.update function again and take in our previous columns and we need to filter those columns so we're going to say filter and we're going to filter each individual column inside of that for the id and if it is not equal to that id it's going to pull it out so that is kind of a shortened version of just saying if you find this id take it out so we want to remove that column that matches that id and in this instance the argument to update is it's still the same as previous but now it's just a little bit easier to read as the columns right yes so just kind of maps kind of maps into the store so we're going into the columns and then into the each individual column finding the idea of that column and pulling it out essentially okay our stores are completely set up now so we can actually go back into our app and we can start building out our functionality so in here we are going to import we need to import from our store why it's not giving me the intellisense oh because i'm not in a script to use to react components yeah that is definitely true i am so fill looks a lot like just html you use the script tag at the top to write your javascript anything between the script tag and a style tag is just like html it uses a temp it uses a templating language that has some sugary syntax in there but most of it is just html so um we can create a style tag right now and i actually have prettier setup so it is going to format mine to be at the bottom so i will i have it set up to do scripts on top then the markup and then the styles so uh by default i believe it's script style and then your markup so does uh when it actually compiles it does it pull the scripts will the styles be at the bottom of the page or does it kind of rearrange things as it compiles all the code that depends on how you have your vs code set up i think because i have prettier installed and i actually have a i don't have a config file in here but i have it set up globally to save um format on save so it will just automatically do that and it for some reason format has been a little buggy for me so when i formatted that it just moved that over a little bit but i have forma on save turned on but it has not been working for me lately for some reason prettier is a little buggy sometimes so in here we're just going to write some html and we're going to get something on our app so we're going to do a section first with a class section class how do you do that oh trying to remember my emmet key settings so section with a class of board and that is just going to be our whole app and in here we need a button to be able to add our columns so let's just get some stuff on here button and in spelt we have this special syntax to run a for loop so if we want to loop over something we can do these brackets pound sign and then each and it's actually going to run each thing in an array and it also has the special dollar syntax to make a variable reactive so if you want to change every time a variable updates we use this dollar syntax and we can grab our store variable and it will be reactive so every time the store updates it will change that store and we're going to loop over that as a column with an index and just a quick cuts up we're just under 40 minutes left okay and i that's supposed to be parentheses so parentheses we've got each store as column index and then grab the column id off of it and that you can just put in parentheses and spell it and i feel like i still have one too many brackets there i do and then to close a loop we just type backslash and then each just like that so now it's going to loop over our store whatever is inside of that so in our columns we need to create a div with class equal to is that how you do that nope trying to remember that em at things but it is not working class equal to column yeah i still have yet to get on the admit wagon though you're not the i don't think you're the first person on here but um it comes automatically with vs code though so i don't know if you use vs code so i think it's baked in now okay yeah i use it but i guess i don't know i'll have to look more into that then i'm just gonna set the id of our column to that column that id that we created column.id and set the index to actually install we can do idx so it allows the shorthand syntax where we don't have to say idx equals idx we can actually just shorthand it okay and then inside of our columns we want to create a header and in that header i want to give an h2 with an input inside of that and i want to give this input the value of the title of our columns so in spelt we have a bind so bind colon and it will allow us to bind a value to that input so anytime the input is changed it will change the value of that with it if that makes sense bind value equals column.title and we need to close our input and that closes the h2 already and then inside of our header i also want to add a button to um i'm going to give it a class of delete to delete our column we're going to go over to hero icons i'm going to use um a garbage can icons yes it's awesome so we're not in jsx so i'm just going to copy the svg and put that in here as our delete just get a little trash can in there and that is our header for our column and now after the header i want to add a button and this button is going to um add our cards so we're going to just going to do um the html syntax and plus friend colon semicolon thank you so we got a question from the audience james wants to know how the project's going the projects which project i'm guessing this project this project oh good i hope we don't have anything on the screen yet so we'll see i think it's going well so far though hopefully we will see something on the screen in just a second once i save this i keep forgetting where i'm at okay add card let's actually save that and see if we get anything it's mad at me why are you mad at me cannot resolve store store oh because i have two dots there that might be why okay now we have something we have something to look at now that's better let's move that over just a little bit okay so we have our add card button and then next we need to um create our section for our card so we're going to put that in an article and we're going to do another each so pound each that gives us our each block and we're going to create a column which we created inside this each block so we're actually it's almost like looping through a for loop twice so we went through the store and now we're inside the store and now we're going to loop through our columns to get to that card so we're going to get the column.cards as card card oh what did you just change to card card index see that's the kind of thing that my autocomplete always does and frustrates me that does drive me crazy it happens infrequently thankfully but i i don't see it did it again it just doesn't it's always random things yeah it's like where did you even think about getting that i don't know so we closed our each block we have our column our cards each block so this is going to loop over our cards and display them for us inside that we had the article we're going to give each card its own section and i'm going to name that class of card and inside of this section we need to have another i'm going to put it in a header just so i can do the styles later together so we're gonna put a header and we're gonna have an h3 and then inside this h3 we're gonna do a similar thing where we did this i don't think i put the type on that other one type equals text let's see input i did not type equals text on that input the browser probably identifies it as text it probably does by default but i wonder if there's any like wonkiness in that like if it would like if if there would ever be a bug because of that yeah there might be so we're going to bind that value again so that it will change with our cards so we need to grab our um column dot cards and we need to give it the index the correct index so we're going to grab that card index right there and we want this to have the title so we are grabbing the column oh i didn't close the input tag i'm like why are you mad at me we're grabbing the column going into the cards grabbing the index of the card and then grabbing the title and we're putting that bound to the value of the input that makes sense so now we have some card titles in there and the reason you're making an input is so that we can make it editable as you're working through the app that way we can change it later on when we get to that part okay so we've got header h3 button um we closed our header we closed our section we closed our each now we need to add some functionality to this because right now we're not really doing much except looping over everything and showing it so we need this button to be able to add cards and we need our columns rather and this button to be able to add cards so svelt has another special syntax is on colon and that is going to create any um window event that you can create is going to allow you to do that inside of svelte so on colon click we are going to run one of our functions we're going to run our add column function so we need to import that and that's coming from the same location so we're just going to go up here to our import and add column we're actually going to do the same thing on this button except we need delete column and it automatically added that that's when auto right auto complete is good when it does things like that but it can mess you up so should that delete column button then say delete card then did i name that column oh wait yeah this is this is the wrong one i'm sorry okay no you're right this one should be delete um right and oh i didn't i don't have anything on it i see i see what i did so our ad column is actually this button way up here at the top there we go okay and this one should just have that and plus on it so now we've got this button and if you saw that it's not styled very well right now so we can add these columns and i don't know why oh remember we need to put the id into that so we need actually we need delete column to have our column dot id and that's also not showing the delete because you did it it's not showing the delete svg either is it i wonder if that's because of the color so i wonder if we should go into global css and add a few styles real quick let me see here just going to add minimum height of 100 vh on the body and trying to think of i want to add before and after box order box and i'm actually going to set all the margins and paddings to zero here too [Music] and so that did something let's see what else we can do we can make our board class um spell styles are actually scoped by default so we could just use i mean we do have multiple sections in here so you could use section but then it's going to affect this too so that's nice then that it uh scopes it it's almost like the css modules approach kind of right yeah yeah so i'm trying to decide if we should add this here or start trying to break out some of it i'm gonna start creating some components real quick components folder [Music] and i'm going to create some files that we're going to throw some of this into because we have our functionality i don't know why that delete class is not showing up though let's see let's give it a background of red and just give it a width of like 20 pixels for now and see oh there it is yeah oh okay so we have our functionality we can delete the columns and then we can add new columns and if we go into our inspector tool here oh i think that's going to be really huge because i was using it on my 4k monitor so we're going to minimize that i think that looks pretty great as is i don't know about the audience was it okay so this is our store now in local storage so it's actually it has four columns here we can see zero one two three because it starts at a zero index we've got one it's kind of hard to see where our columns are let's give that what did i name it call border pixel solid black there we go so now we can see one two three four columns and we can delete those columns we can add more columns back and each time it's going to change our local storage for us i don't this is not the right one there it is now we have three and that's correct one two three okay that's the one thing with working with local storage between apps right yes another app was saved in there and i was like what is that but that was not yet we are doing a hackathon on ztm and they're creating a similar app and that was that app so our ad card is not working because we have not set that up yet so let's move some of this out and then so i need to create columns column.spout cards.spelt card whoops not a new folder okay now i'm going to start moving some of this just so we can read it a little bit better so i want my app to actually just have a board component a columns component and that be it so basically i want this to work so what i need to do to get that to work i'm going to uncomment all this because i should have done it separately is to import board [Music] components and get our board and you actually have to type one of the unfortunate things about spell is you actually have to type the dots felt in there it does not automatically do that it's one of the just little crazy i wonder if that's because of how like does it use webpack to compile i wonder if that's just because it doesn't resolve that file type it uses rollup right now and they're actually going to be using snow pack and roll up in a combination in spelt kit so um it's you still have to type that out in that too so i don't know if it has something i'm sure it has something to do with the way it's bundled so we're going to pull some of this functionality out to our board so on the board i want to be able to have like an empty section that we can reuse so we're going to pull in that script tag again and import because we still have to have our ad column here we're going to import the add column i can't type very well from our stores and from the store and here i'm gonna take that section i wonder if i split these is that too small um i think it's okay since you're not doing anything super wide right now but if anybody's having trouble uh seeing that definitely let us know in the chat okay so essentially what we're doing is we're taking this section class board and this button i'm just going to grab those and copy those over here and then we're going to close that section off and installed we have this empty section that we can create called a slot and what this slot does is any children of this component will go into that slot location okay so that's like a default way of like so i'm comparing it to react where we pass in the children prop and dump it that's it would be like putting children there in react yes exactly so that is saved i'm just gonna say it's really nice how easy it is to grab the store globally from all the different files like that it is yeah so it allows you to just pull it in wherever you need it instead of having to like worry about it being at the top drilling it down through wherever you need it i mean it's just available to you which is really nice so in our columns component we are going to [Music] um we need to have this each block we're not going to be able to grab all of it because it's got some more stuff in there i think i missed this svg grab that svg in the button and then close the header and the div okay so we have here you need to close that each as well oh yep okay and i think my div should be outside i don't know why okay i do need to close the each you are correct there so close each let's see what we need now i'm struggling to see so i'm going to go ahead and save and it's going to break our app but that's fine for a second i'm going to format this because i can't read it let's place the formatter work this time yes i it doesn't work on save for some reason and i don't know so we've got our div so just see now we're about 20 minutes left okay let's see we got a section [Music] oh is that what i'm missing i need a section in here okay we need to get some functionality in here so let's import our um we're going to use the column so we're actually going to import from the column component that we haven't created yet we're going to import our store again from we need to go up to whoops store store.js and we need to grab set it still not using this correctly okay i put a section here and this needs to move down here there we go so we've got our header around a oh i see what i'm doing i was grabbing the column and this is actually the column so this is just supposed to be our list of columns and i'm like why is that not working but this is just going to be our column here oh my god i'm going to paste that over to the column file right unless you already lost it uh i did not lose it so i could probably just paste it over there yes and we need to pass in some props so to do that we need to pass in the column we need to pass in the index and we need to close our column and then [Music] that is all we need in that for now we need to get in our column it needs to have we need to import so we need a script tag again we need to import our store and our delete column from our stores store and we're gonna use the cards component [Music] here typing that's felt so now we've got our header and we don't need this section here because we used it on the other page we've got a header we've got a title our button and then after the header we need to have our other button that we used on app here this button to add our card um and we need to get our cards component and pass in column get mad at me because i didn't put a space there i'll do that in a second column and index to our cards component that we have not created yet so that syntax the bracket column bracket does that mean that it's going to be available as column inside of the cards yes okay and um i'm actually going to show you right now because if you notice we actually don't have this column.title here because in spelt to get a prop to actually pass through you need to export it from the component that you're using it in so we're going to export let our column and export let our index so that we're actually passing those into this component and allowing them to be accessed back in the columns component and then we need to go over to cards and create our cards i probably should have left all this in the other file at this point script we need to import um our store again that and in this one we needed that column and we needed the column index is call i'm calling it different okay so on this let's go back to apps app and grab this article put that in there we've got the article and we're actually going to give that article this column index set it like this column index and then we've got each column.cards as card card index card id and we're getting another header with the h3 and the input and inside that's actually our card so we're actually going to take that right there and make it our x control x to get that out of there and do our card component and pass some of this into our card component i can't type today my goodness card card index card index and close that it's mad because i need to import that hard dot spelt it would be nice if when you clicked on it or hit tab if it would just instead of changing it if it would just use the correct one i don't know why it doesn't do that or add on the dots felt for you so we need to get our store here again and we need to get the header oh let's grab i copied that and then we need to create those export let column index let card and export let card index okay so now we need to add some functionality why is it still mad at me i don't think colin's available columns doesn't exist so what do what should i have here enter h3 button something is not right so for that index in the store is that i should actually say card.title so when we moved it we are actually shortening some of these because we're pulling in card instead of the columns so that's what happened so when we move that and this actually needs to have that same delete button so i'm going to go over and copy this it just needs to be a little bit different so put that after that h3 and instead of we're going to create a delete card function here and this has to live inside of the because it's nested it's a little different with the store so this actually has to live here so we're going to create that function to delete our card we're going to pass in the column index and the id to this and we're going to use that special dollar sign syntax and give it our store we're going to grab the column index that's passed in drill into the cards and we're going to set that equal to the store the column index cards and the filter because it's an observable with that dollar sign that's why you're able to just mutate it in there right yes and we're gonna do that filter function again to get rid of that one that's equal to that id and so here we need to pass in to delete card the column index and the the card.id here and i don't have card index yet so we've got a header h3 button okay so let's go back we've got columns column okay board and columns trying to keep these in order here so then we go into columns and we're looping over each of our column so each column is getting this we're going into column we've got each store as column we're getting the index and the column id and we're passing that to column and we actually need to give this because it needs to have oh i didn't mean to do that a um an index on the first thing of an each block we need to have the id equal to the column.id and we need to have the index pass through okay and we've got a column so on our column we need this get new card to work so we need to add this add card button so we've got the input with the column.title we've got a button that deletes the column and we've got a button down here that's going to add our card so we need to on click and just you know you about nine minutes left i haven't added drag ability yet so we need to create that and we need to use that special syntax we need to get the index and the cards and run that um we need to do a similar thing where we get a new card like we did the column so we need to get a new card an id and i'm actually just going to go over and copy that from our store that uid function so i don't have to type all this out just need to grab this part right there and the comma and the title card title okay and here we need to run that get new card function and pass in our spread in our store with the index and the cards so this is drilling into the cards why is this not working store oh [Music] that's why okay now this ad card down here is passing in the index and still doesn't work what is going on button on click add card are we not passing our index correctly okay we actually don't need our store here so we can delete that out we can delete all this out and that's our app our columns where's my board it's my board what's missing board has our ad column from stores we're adding our column is this working this little plus yes that's working and then into columns we've got div and okay do we have about five minutes left yes six minutes okay i don't know what i'm passing in wrong so i did the add card is still not working so we did store delete column we've got our cards um get new card add a card header it's not working because when i click here nothing is coming up so it should be creating this new card sorry and we could should be able to see over here that it's not actually creating it in our store either the button is it saying anything down here yes it's column could not resolve column from columns oh my goodness what is going on nervous oh there we go now they're working oh my goodness but the delete buttons went away because i deleted that so let's get that delete back in let's just throw it in global for now i kind of wanted to show the uh scoping stuff but um width so 20 pixels okay now we can delete and we can add cards nice it still doesn't look pretty but it is functional um let's add in actually i don't know that we have time to add in the dragging i can just talk about that for a minute i can um since we only have um it'd probably take a good 15-20 minutes so yeah um what i can do is i have a working version of it so i can throw that up and we can just talk through it if that's okay okay yeah that sounds good so i'm just gonna close this server out and close this and just open up let's see that's awesome though i love to you know i haven't actually dug into spelt yet and it was awesome to see how much you were able to do with that so on this one i've done a lot more styling and stuff so we have some oh i'm going to have to let's just go to the big one so on this like i have some like crazy css variables and stuff in here i'm going to run npm run dev to run our server and get that pulled up and we're going to go to localhost 5000 again if i can get my chrome back up why go away too many tabs oh my goodness there we go that looks like my chrome browser and move this to the bottom move panel to the bottom there we go okay now we are kind of back to where we were so this was our old app we're going to refresh that and it's going to bring up what we had in local storage and we're going to delete a bunch of these i'm actually going to go into local storage and see if we can delete out our old stuff i'm just going to delete that store so we can start from scratch and we see our to do our in progress and our complete it's still not big enough for me like i have to i don't know it's just weird and then we could add some cards to these i can go in i can change change the titles and for all intents and purposes we were really we were really close to that so we were closed except for the styling so we had the functionality there and we're able to add more columns we're able to delete um the only thing that we did not get a chance to add is this and i'm sad because i wanted to talk about spell kit but it's felt kit i'm very excited about once it stops being so buggy so um with this we added in this package and it is it can just be a dev dependency i don't know i must have installed it incorrectly but um spelt dnd action allows all of this drag ability because there are people way smarter than me that did um it just uses a spell action which um allows you to access the node and the params and create actions on each of the things in the window explaining what a what an action is is that just like a almost like a function first felt so let me pull up what they actually are spelt actions does it not have just the docks maybe the docks don't deep link are the docs just one page okay actions are functions that are called when an element is created so each time the um like in react when a component is mounted and it renders um that is called each time so that's what a spell action is and so this uh library has used a spell action and created these functions so we're handling our um columns and we're handling the zones that they should be in when you drop them and we're just adding uh using these use directives and the use directive is what this action gets used by with that special colon syntax that spell provides us so we're saying use this zone and when we use that zone we want to be able to drop it into that div so it's giving us that whole div that we're able to drop it into and then it automatically reads each of those columns as a different piece of that zone yes so it's reading each of those columns as a zone and allows you to drop it only within that zone so you wouldn't be able to like drop it off the screen somewhere or outside of where you tell it to so you're setting it to that and then inside of each of the columns we are um where's the cards cards we're doing the same thing we're telling it where um each of these cards is and where it should be so we can delete a bunch of these off and then we can still go over here you do have to set a minimum height on that i ran into a bug with this where it needs a minimum height to be able to set it into that we set that article right here as the zone and if you don't set a minimum height on that article it will not allow you to drop that in there so that was like flexbox to push the container to stretch the container or something uh yeah maybe actually i might have been able to do that i was just trying to figure out a fix and i put it in height on it and that's that minimum height right there so you can see some of like the we have this article here that's not touching any other article on the page and it's all scoped it's really awesome yeah that's cool so that is the app unfortunately we didn't get to like build out hours but i do have one that's functional so i'll i can provide the github link for that too yeah definitely send that over i can include in the description on youtube and everything and yeah this is awesome though i think you know within an hour i think you got a ton of functionality you know i just felt so that was pretty awesome yeah i got a little lost when i went into trying to make the components i should have just left it into the app so there is i believe that's the right one awesome and dave says that it looks great i agree thank you yeah i i added a bunch more uh styles and stuff i got kind of in-depth i get i do that i am really obsessed with css and so i get this crazy like css is so great so if you go into my global css file i've got like h uh the hue the saturation and the lightness are all separated out into different variables and then i calculate like which way it goes and that's kind of crazy yeah jay would be proud of that yeah i still haven't played too much with css variables but i know that's on my definitely on my to-do list to figure out but yeah i mean it's really cool

Channel: Colby Fayock

Views: 820

Rating: 4.7241378 out of 5

Keywords: svelte tutorial, svelte js, svelte js tutorial, svelte js vs react, svelte js 2021, svelte js reviews, svelte js performance, svelte js projects, svelte js getting started to the point guide, javascript svelte, svelte actions, svelte dnd, svelte drag and drop, svelte drag, svelte drag and drop example, svelte app, svelte app tutorial, svelte app structure, svelte application, svelte web app, svelte tutorial for beginners, svelte tut, svelte tutorial youtube

Id: mcaYol_XFk4

Length: 65min 50sec (3950 seconds)

Published: Wed Mar 03 2021