Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-locale.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-locale.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-embed.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-embed.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/html-api/class-wp-html-open-elements.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/html-api/class-wp-html-open-elements.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-block.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-block.php on line 1
#107: Building Michael’s First Ruby Application – The Drunken UX Podcast
The Drunken UX Podcast

#107: Building Michael’s First Ruby Application

In this special episode, Aaron takes the driver seat to teach Michael a new skill: creating an application using Ruby on Rails. They start from scratch, and walk through the basic steps and scaffolding to produce a simple, interactive version of an Eisenhower Box. Aaron explains the basic parts of a Ruby application, while Michael learns and modifies the code.

Followup Resources

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

He’s already laughing. Ladies and gentlemen, you’re listening to the drunken UX Podcast. I’m really glad you joined us this evening. I am your host, Michael Fienen.

Better other other host, Aaron. Hey, Don Michael,

doing very well. I get to be the schoolboy tonight. Please don’t hit me with a ruler, sir. Unless that’s your thing? In which case, no judgment.

It’s I mean, all right. I’ll get the ruler out then. I guess.

This is episode number 107. We are going to be talking about well, not talking about I guess that’s not the right way to put it. Um, Aaron is going to be teaching me a new skill and craft.

Yeah. Yeah. We’re gonna do some some railing. We’re gonna we’re gonna do some

pair programming, if you will. I have talked about Ruby a few times with Aaron. And we finally decided, You know what, it’s time for Michael to learn how to actually write some Ruby. I have never done this. Legitimately. I’m not putting on a face. I’m not doing a show for anything here. I literally have never written Ruby. I have read a couple Ruby files in the past.

Like, I’ve seen what Ruby code kind of looks like but never learned it never written anything in it. And so over the next hour, we’re gonna try something kind of weird and new. Aaron’s gonna teach me and I’m going to build a little hello world. Yeah, I could do that in an hour, right? Yeah, this should

I, that should be enough time. So a couple things that we did beforehand that we’re going to take as a given. Although if you’ve ever done rails before, you know that this isn’t a small thing. The setup is always a pain in the ass. So Michael has already loaded a VirtualBox instance of Ubuntu. And he has installed Postgres as a database. He’s installed a Ruby binary through the RVM tool.

That’s the one that I like other people like RBN, or ASDF, or some other ones. RVM is Ruby versioning. Manager, it’s similar to nvm. If you do node, it’s just a way to have an easy way to have Ruby binaries, and have the be different kinds of Ruby binaries on your system. So those things are already all done. And so we can just start with just doing the real stuff itself.

We can just get get in there. And we are we’re gonna jump right in here. Normally, we talk about our drinks and everything. I have a watermelon soda.

I have a Diet Coke from McDonald’s with Kraken and cinnamon fireball in it.

Okay, so you are drinking. Alright, teach. If you’re interested in this, though, and you have you want to follow along? Because I know so one thing that’s gonna be hard is how do we demonstrate learning Ruby over a podcast, and I’m going to be painting word pictures as we’re going here talking about the code, asking questions, all of this as we build this out.

But if you really want the visual component of this, we will be releasing the full length screencast of this process, to our Patreon backers. And so if you go to drunken ux.com/support, at any backer level $1 Whatever. This video will be uploaded shortly after this episode, airs. Just give me a second cuz I may have to edit.

Yeah, I think that we’ll probably put the code up on GitHub too, I would assume yes,

the code will also be released in full on our GitHub, we’ll have a link to that in the shownotes. It will be available as of right now when you’re listening to it. So you can go look at this code. And who knows, we may actually make this into a thing where we follow this up and start you know, having episodes where we do some more advanced features or something along those lines.

So that may be something that following that repo, you may get, you know, lessons, so to speak, go along with that and you can you can follow that repo. Okay, teach what’s first I’ve got up in front of me, I’ve got my VS code, I’ve got a terminal and I have literally an empty folder.

Awesome. So the first thing we’re going to do is we have to create the Rails app. And you’re going to do that by using the rails command. We’re gonna use that command a bunch, it has a bunch of different options and switches and stuff. I already gave you the full command in our Discord. Right?

Right. If I had been a good boy, I would have copied that ahead of time.

So I had to write out this command because the rails new command uses a lot of command line flags. And there’s a specific configuration that I like. I like to skip any test because I prefer our spec. And we’re going to skip boot snap. Because I find bootstrap to be a pain in the ass. I don’t want to get into it. And then we’re going to tell it to use Postgres as the databases that have SQL Lite. So, yep, you’ve named the app, dux-ruby, and

Ruby. Oh, we should talk about what we are actually building though.

Oh, it’s a Hello World, right. That’s what we’re doing.

It’s Hello world, right? Yeah. So I am using a new methodology of sort of organizing my decision making and my work called what’s what’s called an Eisenhower box. An Eisenhower box is just a form

of a grid, you sit in a box? And then if you hit a button, someone throws a cheerio in for you?

No, no, you turn into the only president that Kansas ever created. Okay.

Congrats, Kansas,

we, what we do is we use this to basically prioritize stuff by determining if something is urgent or not urgent, or important or not important. And okay, by spreading your tasks out, you figure out what you need to do now, or what you could delegate or put off to later. And okay, what you just won’t do, you know, the tasks that are neither urgent nor important go in the bottom corner, and basically don’t get done, but you have on the list.

So my suggestion for this was there’s there isn’t a really good version of this online already@eisenhower.me. And I thought, What if I just built my own version of that, so that I could have like my own Eisenhower box, little web app that will store all my tasks for me. And then I don’t have to, like send my data to a third party so that they have access to all of my to do items and know that I don’t clean my toilet nearly regularly enough, or something like that.

Gross. So I thought I, if I can build one of those, I can just have it on my computer, and it can just be there and run. And when I need it, turn it on. And when I don’t need it, turn it off. So that’s what we’re gonna look at building. It’s a relatively simple, we call an SP, a, a single page app.

So some one thing wrong. Something I really like about this is that a lot of times when people are learning a new language, they have the experience of like, okay, I know a couple things. Now, what do I do? And I like this kind of app, because it’s very, like small and contained, but still has enough complexity that you can sort of play around. And, you know, explore the things you’ve just learned.

It has what I call crud, right? Yeah. That acronym crud, create, reuse, update, and delete. Are would be read. But read, I’m sorry, you’re, I’m you’re right, that I am tired. Yes. create, read, update and delete. It’s like the four basic pillars of application development.

Yeah, yeah. And actually, a CRUD is something that rails like, is exceeds that, like, if you’re doing a CRUD app. Rails is is a great, like possible solution for you. Like, there’s certain things that Rails is good at certain things, it’s not good at a lot of stuff that like react really shines out like heavy, single page UI interactivity stuff.

Rails is like so so like, I wouldn’t build like a Google Maps kind of clone in Rails? Probably. Probably not. But something like, like, oh, like what to do items I have to do, or like a blogging service, or whatever, like Rails is great at that kind of stuff. So you got the rails new command, go ahead and hit enter. And hit enter. And stuff. Yeah, so

what it’s doing right now is it’s running through a forest script. Thor is a Ruby like sub language thing for scripting. And oh, so

I got some errors, though.

Yeah, our first snag. So the first thing you need the postgres development package, this is a Ubuntu thing. I’m getting you the URL right now. So it’s sudo apt install PostgreSQL which you already have PostgreSQL dash drag, which I think I saw you install and then lib PQ dash Dev is the one you’re missing. That’s the like development library stuff for it, which it needs because when it’s installing a gem, it needs to have access and right

Okay, so now I want to I need to rerun my new command

just to LS real quick. I think it created it already.

Yeah, directories here on the left.

Oh, yeah, go ahead and rm rf it just just kill it and start over again. I want to, I think the the script might do some other stuff after it installs the gems. We might hit one more snag with one of the dependencies for the JavaScript file. Very cool. So, um, so Ruby gems are like libraries similar to like Node packages or whatever. And what it’s doing right now it’s running through a script, it’s creating a bunch of seed files for you for the app.

And it’s installing the any gems that you need by default. And it looks like it’s done. Go ahead and type bin slash rails space S. There you go. Okay, and then go back to a browser, and go to localhost colon 3000. No database error. Oh.

Okay, so do so it’s giving you an error page. Right now, Russell’s error pages are actually pretty good overall, they show you like a useful error message. And then it shows you the relevant part of the code that’s airing an issue a stack trace. So it’s telling you to run bin slash rails DB create. So go ahead and copy that out, and then run it. Copy that out and run it.

created that two databases for me. That’s where we development and that’s where we test.

So the development database is the one we’re going to use locally for like development and like manual testing. And then the test database is what’s going to be used by the automated test suite. Rail, we’re not going to do a whole lot of test writing, because it’s time consuming, and we only have an hour. But we will write a couple tests.

And just refresh my page, and I have a Rails logo.

Yep, your hello world. So cross that one off the list. Okay. That’s cool that it’s different. It used to look different than that.

So the one thing that jumps out at me too here is when we, when we in initialize the new repo, a new project. It’s clearly very opinionated in its sights, configuration, I have a lot of generate a lot of folders here app in config dB, that very clearly, you know, our special purpose. So it definitely wants you to build something in a very structured way here.

Yeah, so the the mantra in Rails is convention over configuration. And what I always tell people new to Rails is always do things the rails way, like go with the least resistance possible, until you’re comfortable. And sometimes you have to go off the rails, sometimes you have to do things a little bit differently.

And you do have to configure stuff. That’s okay. But you should know when it’s correct to do that. And you should know what the impact will be when you do that. Um, do you want to run through the directories really quick, and I can walk you through the app.

So I’ve got an app directory that’s full of stuff. So they see some words I recognize, though I see the word models, I see the reviews, I see the word controllers, those make sense to me. Yeah, so

the app directory is what’s going to store the bulk of your business logic. And like, basically, this is like the core of the app with a couple exceptions, but like the bulk of your app is going to be here. Assets is stuff like your JavaScript and style sheets. And I guess, your images, anything that gets like, compiled up and like served.

Like that’s kind of supplementing the app channels, we’re not going to worry about that’s for action cable, we’re not doing that tonight. Controllers is. So you mentioned models, views and controllers, that’s the MVC pattern. Rails is like 100% built off of that, like paradigm. So controllers is what sits in between the user and the database. Helpers is like, try to describe them.

If you if you want to write like little methods and things that will help out your Ruby code, like, maybe you’re just constantly writing the same method for calculating sales tax or something, you throw a helper in there to do that for you. And that’s where they that code live. JavaScript is if you were doing regular like, like Webpack style stuff, it would go in that folder. Jobs is for background jobs.

Like if you wanted to have something run with like sidekick, or Redis. Or you would do it in there, like sending mails or whatever mailers is, where you are sending emails out. models is like where your domain concepts live. So if you have like a user, you’d have a user model, it’s like your user class will live in there. And that like the the thing about Rails is that any of the things in models, map, excuse me, maps directly to a database table.

And then views is stuff that it’s the HTML that’s going to render you can think of us as like templates. So that’s the app folder. The other ones are bin which is going to store like binaries like commands such as rails or a bundle, which For your migraine management, config is like general application config, there’s a lot of stuff in here, we may have to visit that later.

Um, the DB folder has the seeds file that you’re looking at, which is like you can put in for development, especially this is really handy, you can say, This script will create all of the objects, you need to just start manually testing. Yeah. So frequently, what people will do is they’ll put a couple like generic user accounts in there, maybe like a couple sample items, so that all you have to do is run the seed script.

And then you can start the rails server and then just start testing. It’s also where the migrations will be stored. And we’ll come back to what that means later. lib is like, there’s different schools of thought and what goes in lib. Generally, that’s where you’re going to put stuff that is like kind of meta code. Like it’s, you’re writing some Ruby scripts that are meant to work with the app itself, but not like the user facing part of the app.

It’s like the the, it’s like the DevOps of the rails scat real stack. The log folder holds the just the logs, it’s when your development log in the test log, any of the output that gets outputted, while you’re doing stuff gets dumped into those files. Public is static files that are rendered to the user in certain cases, such as a 404, or 500.

If you want to file that’s just straight HTML and doesn’t involve the database, or rails objects at all, you can stick it in that folder. Storage, we’re not worrying about that. Temp is just a temp folder, we’re not going to worry about that either. vendor, we probably won’t use, we were going to use a third party SAS library to start. That might be where you put that eventually.

But I think for the purposes of Expedition, we’ll just probably stick it in this folder. And then the last one that’s important is in that root folder, the gem file. The gem file is like the, what is it called in, in node? The package dot Jason? Yes. gem file is the package dot JSON of Ruby. So it has all each line is like a gem space a name.

So gem rails gem Kuma gem, eg like it’s all these different, like libraries, and then you install them with the command bundle install. So that’s that’s like a very, like 10,000 foot view survey of the app. I think the first thing is what is what’s like the central domain concept here. Like I think you were describing me before the show, it’s like a task. Right?

Right. Right. So like the the entire crux of the grid is each quadrant of the grid is basically just a to do list. Okay, the standard make an item, delete an item mark, an item is done.

So what would you like to call a single item? Let’s let’s come up with a name for this first, can we call it a task? Task is great. Okay, so go to a terminal. So all the commands to interact with this, this, the Rails app itself, are done through the command line. And we’re going to use the rails command again. So type bin slash rails, or just rails, either one is fine.

And then you can either type G or you can type generate, it’s the same thing. I do G because I’m lazy, you can type out generate. And we’re going to use scaffold, because this is going to be the most the fastest way to do this. So type the word scaffold, the Generate scaffold, and then type task, all lowercase. Don’t hit enter yet. Um, what are a couple like fields, you know, a task is going to like think of the most basic possible task

that we know about. A task would have a description, okay, it’ll have a status and it would have a location. Let’s call it that in the grid, right?

Okay. So do so after task do space, and then type description colon string. And then you said location. So, it’s also a string, I’m assuming we could

call that like integer we could we could number the quadrants 12340.

Don’t worry about that. We’re gonna come back to that. Okay. So it’s a great location. You don’t need that.

But status status could be an integer as well. Complete, not complete, basically.

If it’s going to be if it’s complete or not complete dude as a Boolean.

So cool. Well,

complete them. Yes. I

say why don’t we just call it complete? And is it Boolean spool, I believe in Yeah, the full word. Um, and then

go ahead and do what’s called important and urgent, right? Those are the two things.

important and urgent. Yes. Okay. Go ahead and

do those as Boolean also, okay? Okay, so you’re what you’ve typed is, in Rails generate scaffold task description, colon, string, complete colon, Boolean, important colon, Boolean, Virgin colon, Boolean.

Okay, so what scaffold does is, scaffold is going to create the the model that like the initial class for it, it’s going to create the controller with all of the crud actions already flushed out, it’s going to create the views that you need for all of those different controller actions, it’s going to create the database migration to actually add the table with the columns that you’re specifying here.

And it’s going to add the route, which is to Rails runs its own server, like how you have a patchy or whatever. Rails will take the requests in, it’ll consult the routing table and say, based on the URL you gave me, it matches this route, which maps to this controller action. And I’ll show you what those mean in just a moment. Go ahead and hit Enter, Enter,

boom, it created a bunch of stuff. I got some new files. Awesome.

Okay, so the first thing, let’s go through each of these files you have the first one I see in the West is dB, migrate a whole bunch of numbers, and then it says create tasks. Time. So yeah, go ahead. And you can find that in your editor under the DB migrate folder, put it open that Okay, so this what am I Gration is this is one of the things I really liked about Rails.

When your database, the like the progress of your database over time is done through migrations. And what a migration is, is like, it’s a bit of database modifying code that has a timestamp on it.

And the timestamps kind of show like the evolution of the database over time, so I’ve worked on apps that have migrations that go back like five, six years, you can really see like the history of the app over time, you will create these generally not ever delete them, you can, but there’s really no reason to, when you clone the app down, and you set it up initially, it will run through each of these migrations, one after another,

and then like modify the database sequentially. So the end result should be item potent, and you should end up with the database in exactly the state it needs to be for the app. So this one that we created the the migrations called create tasks. And as you can see, there, it says, Create Table tasks. And then the do with the pipe and the T that’s called a block. Don’t overthink it, a block is just like a Ruby thing you could think of it it’s sort of like a closure.

Like it’s lazily evaluated. Generally, like conceptually, what you might want to think about it as is like, a block is like, given this stuff at the beginning of the line, do this stuff within it. So you have the CREATE TABLE task, or you have the CREATE TABLE like command, and then you’re saying like, okay, take this CREATE TABLE stuff, and then we’re going to run this additional code on that stuff. And then finish the task.

It’s like a subroutine. And you can see it’s creating each of the fields, therefore, does that make sense? What you’re seeing, like,

yeah, oh, yeah, no, this is very straightforward. As far as like, clearly it’s creating a table, I can see all of the fields that I want and the field types that they will be, yeah,

oh, you’ll notice there’s T dot timestamps, that is on that it’s just a given that’s on any, like rails model always have timestamps. And that gives you a column called created at, which is when the record was created, and updated at which is when the record was last touched. And then the there will also be a column, if it is a surrogate key called ID, and that is on every table, you don’t see it, because it’s just a given.

And like, there’s a lot of like rails magic that expects there to be an ID column. That is a primary key. And that is also like unique. So the next thing you see there is it says app slash models task. So go ahead and open that file up.

Okay, so this is very basic. And you can see he says, class task. And then the less than it says less than application record, less than is Ruby for like, inherits from world like subclass of. So it’s like task as a sub classing application, right?

It’s like yeah, it’s the next extension then basic. Yeah, yes. Yeah.

Um, so application record is a generic ORM like object relational mapping, that represents like it, what it means is like this, this class is going to map directly to the database table. So the fields that are available or the attributes that are available to this class will map one to one with fields that are available in the database column itself. And then we have oh, so there’s routes.

That’s for the routing table, a resource is like, it’s a, like a domain concept that is exposed to the user via the web. Do the next line is up controllers tasks controller, go ahead and open that one up. The naming scheme is really important. The rails magic will expect a model called task to have a controller called tasks controller, there are ways to change that. But generally speaking, you shouldn’t.

So in this controller you’ve got so in Ruby, the word to make a function is called def, or presumably define. So if you have like def space new, that’s a function called New. Each one of these corresponds to a different controller action or like a given a request, it will route to one of these methods, and then do stuff. But you can see like there’s index and show, new, edit, create, update, delete, that’s all your crud actions. And each of these is

restful. So it’s the rest is representational, Representational State Transfer. And what that means is like, given an HTTP verb, such as get put, patch, post, delete, given one of those verbs, and a URL, the verb will affect how the URL is perceived by the server itself. So if you see there for delete, it says Delete space slash tasks slash one, right. And then you see where it says, For show, it says get slash tasks slash one.

So that’s the same URL. But the difference is that one of them is using the verb get, and one of them’s using the verb Delete. And depending on what verb is used, that will affect which action is used. Sometimes, when you’re when you’re doing an app, you’ll have a like a link or something, and you’re thinking it’s going to be like, a delete action.

But if it’s not actually passing the right HTTP verb in, it’ll get perceived as a show action is that, and then you can get errors and weird behaviors and like, Oh, why is it doing this? And that’s why. And then you can see the views. So there’s like app views, tasks, index, edit, show new form tasks, those correspond to the controller actions you just saw. So I think that’s that’s it.

So the first thing to do is go back to your browser, and then check out what error message you get when you refresh. Okay, so what’s it telling you

says that I’m pending a migration? Cuz I made a new task? Migration, right, that needs to run? Yeah. So

So, go back to the terminal. And the way we run migrations is type rails space. Yep, you got it, dB for database, colon, migrate. And then hit enter. And there you go.

So it runs the migration.

And I’m presuming that like in the postgres table, then it’s keeping track of like that timestamp. And so if I were to run rails, DB migrate again, it would be like, Well, we already ran all do it.

Okay, you’re ready to go?

Yeah. And so it knows that it ran those migrations, its feature flag that and now, it won’t run that again.

So run, run that command, but this time append, so no space, just append his current status to the end there. So what that does is that shows you a list of all the migrations, and it shows you whether or not they’ve been run. And yeah, the app looks the same. Because we’re just looking at the root of the app. Go ahead and put slash tasks on the end.

There you go. Okay, so you’re seeing a page now that says tasks and it says new task with a link. And if you click on that link, it shows you a page it says new task. There’s a field that says description. And then there’s looks like three checkboxes

I net, I didn’t build this form, though. I didn’t write the code form.

Yeah, so that’s, that’s the scaffold at work. Um, I personally, I generally don’t use scaffolding On the apps I write because I usually just, I have a way I like to do it. And I just write my stuff manually. But I think that it’s important, like, at least in the beginning, because it handles a lot of stuff that might be overwhelming otherwise. So you already have, go ahead and just throw it out, like, go ahead and write one, create a task.

There you go. You just created it, it shows you a little status message at the top there. You’re seeing so check out the URL, what URL you’re seeing there.

I see slash tasks slash one.

Okay, so let’s, let’s say that we just, we just were coming into the app. And this is the first page we’re seeing ever we don’t know what else we’re seeing. We don’t know anything else about the app. So go to your terminal, and type rails to space routes. This is the show you the routing table. You can basically see what it’s how they line up, right? Yeah, yeah, yeah, yeah. Okay. So like, let’s look at the first line.

The thing on the far left is the, the route helper prefix. So like, it says, tasks, and you’ll also see like, new underscore, task, edit underscore task, and then just saying your task. Each of those things can be appended with our underscore path or underscore URL. And then rails internals will know to map that, it’ll consult the routing table, and it will give you the URL or the path that goes along.

The the thing right after that the next column is the HTTP verb, you have get POST, PUT patch, put Delete. The next column is the URL like template, I guess you would call it. Like, so you see, like there slash tasks for index. The one you’re highlighting now is for edit, and that says, slash tasks slash colon ID slash edit. Yeah, go ahead and type. So check it out. So that’s showing you the edit page now.

And if you look back in the routing table, back to the routing table real quick. So you see that at the end of that line, it says tasks colon tasks, hash edit. That’s telling you it’s the tasks controller, and it’s the Edit action, the Edit method. So that though now, you know that if you’re looking at, for example, in your browser, it’s the slash tasks slash one. If you look at the list there, which action do you think you’re viewing right now?

I am viewing the

task get this? How do you know it’s not task update? It’s the same URL. Right? It?

I know it because I am. I’ve completed the thing that I did. And so I’m viewing the page with just a normal GET request here.

Right, exactly. So you see the get like the get action there. And that’s telling you that using show and update, right? Congratulations.

You’re now a Rails engineer. Excellent. So yeah, so there you go like this is I mean, I would say we’re like halfway there, right. But this is like this is you now have a functional, like input output basis that you can start with,

right? The the data side of this is now basically all there I can take the grid that I’ve already built elsewhere has like 30 items in it, I could, I could already put all 30 of those things into my database here and have them stored and at least be able to look at them interact with them and do all my stuff with them.

And you can see both tasks in the list their

games, I was curious what that would look like. Yeah, it’s basically spitting out all for everybody else who is not watching the the video part. It all of those properties we created description, complete, important, urgent, it’s spitting out just all of that, basically, with each one with each iteration. So I’ve got two of them in there now. And it just has given me a basic, you know, exposition of that record.

What do you want to do next with this? What do you what do you think is the next incremental feature? Okay, so,

right now I’m seeing like a Tasks list that has full information. Yeah, how do we say I don’t need the the slash tasks to give me the full record view like this. I just need it to say you want to sharpen

and and you want to see it in the grid form.

Let’s let’s start simpler. Let’s just Okay, make it be a list of the items of a plain old list.

Okay, so go into your app slash views folder. And go with the tasks. Yep, you got it, and then go to index. Yep. Alright, so this should look familiar to you. Yes. Okay, so a couple of rails or Ruby slash rails things, a Ruby thing is you see that at tasks there? Yeah. Whoops. Sorry. Back there you Yes,

yeah. So on line six, it says add tasks to the, the, the at symbol at the beginning of, like a string like that indicates that it’s an instance variable. Um, this would be like in PHP, like $1 sign. So at tasks being this is a variable that is like, local to this scope, and the name is tasks.

This then you have dot each, Ruby, like many like a C++ or, or sorry, not C++, Java is like this with a dot notation, right? dot indicates that you are going to send the the app tasks, you’re going to send it the message called each and each is, as you might imagine, like an enumerator, like it’s going to iterate through this collection, then you have do the word do that is implying you’re starting a block.

So you’re going to take the tasks, you’re going to iterate through each task. And then on each of those tasks, you’re going to perform this, the commands that are within this block. And then after that, you have pipe task pipe, that indicates that in this block, you have a local scoped to justice block a variable called task that represents the current task item that you are viewing.

The value you put in between the pipes is completely arbitrary. You can call it whatever you want. But it represents symbolically it represents the item you’re currently on.

And I see on line seven and nine, we’re referring to render task and then link to task. Is that task, the same task that’s referred to on line six, then that is

correct. Okay. Yeah. So the pipes just indicate it’s like demarcating, like, this is the name for the for the enumerated, like, current thing. After that, you just refer to it by the name of Yeah, like, for each

post in posts? Kinda, exactly. Yeah. Yes,

there’s the copyright. So then you see also the less than percent looks like ASP style syntax. Yeah. And then you have less or less than percent equals on line seven. Yes. So the difference there, and this is really important, less than percent by itself does not Echo to the, to the extreme output to the server, less than percent equals does Echo to the stream output. Gotcha.

So less than percent is when you want things to just you’re saying like, Hey, this is Ruby code straight logic. Yeah. And then if I say percent equals means, this is Ruby code, but whatever the output is, of this block of this string, or command should be emitted to the server. What are you having seen the page for this index? What do you think link to does

link to is going to clearly generate a link based on some thing. I don’t know if that’s internal Ruby logic or not, but it’s going to generate a link called show this task. And it’s going to link it to the route for that particular task, which would be tasks slash ID.

Yeah, so this is something that can be difficult at first for people beginning out, there’s a lot of what my coworker what’s called PFM, which is pure magic. And Rails has a ton of it. So in this case, you’re exactly right. Link to is a method. In Ruby, you don’t have to use parentheses for argument lists. But you can if you want, if it makes it clearer, you can just do a space. So it’s linked to the first argument is show this task as a string.

The second argument is an object or it could be other things. There’s other commands you can get for it. In this case, though, we’re giving it a task object. And rails will identify oh, what kind of model is this object? And then it will, it will see that this is a task class. And then it knows that task classes are the task model. And it knows that the task model uses the task resource.

So it like it infers all of this for you. And then it like it, figures it all out, and then just makes it happen. Yeah, I see you’re typing out the manual Psalm.

Yeah, I’m doing something here while you’re talking just to kind of ask the question of is what I just did the same thing, basically. And would it work?

Yes, yeah. Go ahead. Save, save it and then reload the page.

So yeah, and so what I just did for everybody else. So instead of using this link to function, I just wrote out an A tag and I just manually typed in slash tasks, slash and then I did the brackets percent signs within equals to echo it out and I just put in task.id.

Yes. That is that is exactly correct. And it will show up. I should be identical.

And yep, tasks slash one tasks slash one. So yeah, so, so I can reference that object’s properties just using Normal dot notation, and like I would in other languages.

Exactly, right. Okay. And there’s additional arguments you could do with link to, but we don’t need to do that right now. Sure, sure. Yeah. Okay, so, uh,

oh. So let me Can I Can I try this? A little bit? Yeah, I was gonna ask if you do that. This is some idioms stuff here. So I’m seeing some code that looks like I understand kind of what’s happening, I see something that says render task, and a low that is show this task. So I know that render tasks must be the chunk of code that is creating the visible output on the page, because that’s correct. After that, I know show this task shows up the link for that. Alright. So

where do you think what do you think render task is doing? Like, what do you think it’s referring to? I guess so. So

based on what I’m looking at here, I see an underscore task.html.rb file, which is some kind of partial, clearly, it’s correct. And so I’m assuming that there is a naming convention going on here that when you say render task, it knows to reference that underscore task partial.

Yes. So that’s the thing that’s, you’re correct. Except that it’s the the name task here is referring to the object. And then what Rails is going to do is it’s going to look at the object and look at what type it is. And then from that type, it’s going to infer, oh, it’s a task resource. Where do I start Task resources? Oh, there are the tasks folder of views. And then it’s going to look for the partial that is named as the singular inflection of that resource. So

for instance, if I come in here on line six instead of tasks each do task, if I say, do but, and I said, Render, but but it will still work. It still works, because it doesn’t care that I’ve called it but that’s just a variable name at this point. Yeah, when it grabs the button, with consent. It knows a button is a task and task is the thing, I go render them.

But our tasks were RWR.

I get to get there eventually. So now, so I’m going to save this. I’m going to go look at my task. ARB partial. Yeah. I don’t know what the right word is.

But this should also actually partial is exactly right. That’s, that’s the word that rails uses for these things. Um, partials are always prefixed with an underscore. And there’s a whole lot of shit you can do with partials as far as passing in arguments and like localized variables and stuff. We may or may not get to that today. But this I mean, this is just an HTML.

ERB is embedded Ruby, which is like that. This is files underscore task dot HTML dot E. RB dot ARB just indicates it’s like how, in PHP, you have the dot php extension. It tells Ruby, it tells rails, this is a has file has Ruby in it, and you should parse the Ruby out before you render the HTML, right. So you’re just took the the div.

So what I’ve done yeah, I went into this partial, it had a div wrapper, and some p tags and some strong tags. And I just said, this is a to do list. So I changed my div to a UL, I changed my p tag to an li, I got rid of all of the stuff like important and urgent are important qualities for the task that we’ll use to divide them up. But I don’t want to show it. It’s not something I don’t do visibly do. So I basically just cut it down to say, just show me the description.

Right? It’s a good and rerender Okay, so only halfway there. What happened here?

i Yeah, so I made a mistake, right? So I, I’ve got it rendering out each item as a self contained list. So every every item rather than being just a list item is generating a whole list, which is not what we would want in this case.

Right? So, so what do you think you’d have to do to change this? So I think

I’m gonna just take my UL off of here. I’m gonna do bad there, okay, boom, then I’m gonna go back to my index file, and instead my tasks, I’ve got a div wrapped around my tasks, that’s going to be my UL, okay. And instead of this p tag that says Show this task, I’m going to take that out. Go back to my task render, and I’m going to like it that Oh, no, I can’t, I could do this.

I could do I could take this, right? And put that here. Yeah. So so what I’ve done is, I took this link to the example. And I said link to and instead of show this task, I just said task description. So that right, the description of my task will link to the individual instance of that task. That’s precisely correct. Yes. And now I refresh.

And now I have in my browser, a task list with two items that are properly linked to their individual instance.

Boom. Yeah, nice. Well done.

Okay, so now I’m going to step the difficulty up here, as we’re going up on the hour, I have one more goal, I have one more thing to do here. To like, feel like I have something usable, and I have already been thinking about okay, now we’re gonna do another episode of this. We’re gonna add the styling in, we’re going to do some other stuff. Yeah. Okay.

But to wrap this up, the whole point of the Einstein box, Einstein, Eisenhower box is I should have four lists, not one. And I have two qualities on these items. That let me decide where they show up. Right. So I need to know, I’m assuming on my index file here, right? I need a way to query specific tasks and show Yes.

Okay. So there are a bunch of different ways that we can do this, I’m going to give you the one that’s going to be the fastest to execute fastest in terms of us doing it on the show, not in terms of performance.

And so we’re going to do that. So the first thing I want you to do is in that index file, I want you to create, like, I created like a table tag, right? That’s what we’re going to do here. That probably be easiest.

So let’s see. So we need just so we basically need two columns, two rows, so yeah. Okay, I have a table with two rows and two columns.

Okay, so, go ahead and take that URL block, and then go ahead and just grab the whole thing. It’s sticking inside of the first TD. Let’s let’s start with that. And go ahead and like save that, and then load it up in the browser. Let’s make sure that it works. Oh, cool. Okay. All right. So

what we have on the tasks model, I want you to open up a terminal, we’re going to go into the console. So type a Rails space C for console. This is like a repple, like a, what is it read execute something or other? I forget references, where it’s just it’s a terminal. It’s like this console that you’re in right now. You have access to any rails command. Or like any plain Ruby, it’s like a Python console or whatever. It’s a JavaScript console. Type uppercase t task.

And then type dot first. Yep, that’s it, and enter. So, task dot first says, given a task, which is the task model that we created, give me the first record. Alright, so remember how we created those complete, important and urgent as Boolean fields? Yes. Okay. So type, do task dot. Where space parentheses complete colon true. Let’s think complete give you a Boolean gave you a default scope.

Oh, sorry, no space after the where? The parentheses an argument of where? To go. Okay, so see the SQL query there? Yes. So what’s that doing?

It’s pretty straightforward. Post grace, select tasks from tasks where tasks complete is one. Yep. Yeah. So

what about if you did what you wanted to do what was urgent? How would you do that?

So I would just do the tasks task. Where? Urgent colon true.

Yep. And there you go. And you’re seeing the two tasks that you had marked as urgent previously. What about if you wanted to do both urgent and important? How do you think you would do that?

Urgent, colon true, comma, important. Try?

True. Look around and find out. Boom, there you go. Got one. Okay. So let’s, let’s add really quickly, let’s go into the task model. And let’s add some helpers. Some like assisting code here. Within the class, we’re going to use the keyword scope. And scope is kind of think of it like a filter. So scope, space, colon Complete. And then comma.

And then this is, I call it stabby. Syntax, it looks like a little dagger, do dash greater than. And then space. Really prends. And then complete colon true. Or sorry, were complete colon true, just like you had in the, in the console. Yes. Okay. And then do the same thing for important and urgent. Okay, save that. Go back to your console.

And type reload, bang, reload, exclamation point. Yeah, that’s the one. Okay, and now do task complete. Cool. So you can see it’s doing the same thing as it did before we typed out with the where clause. So

yeah, just a shorthand to SQL query. Basically, what’s really

cool, though, is that you can chain them together. And then active record, which is like the ORM that sits underneath all this, it will evaluate all the things you’re asking to do. And then it will craft the SQL query as efficiently as reasons you can. So try doing task dot important, not urgent.

Yep, I see important equals one and urgent equals one art,

right. So let’s get it. it infers that you want to do like a huge amount in Union, but like, and have both of them. If you were doing joins and stuff with associations, which maybe we can do on a future episode, it would figure out which kind of join is best. And it would do that for you. It’s, it’s pretty incredible, like, what they can do with that.

Okay, so given this, we are going to go performance inefficient, but show performance efficient. Um, take a guess at what you would do for each of this.

I figure if I can get one of these, I can get all four of them. So I’ve got a reference here, this app tasks. Hmm. Can I just do a tasks? Dot? Urgent, not important. I think that work? Yeah.

Cool. All right. So that I think you know what to do for the rest, so

I can be my own teacher. Now. I don’t need you anymore. And I can already think of how this fails. i Yeah, I know what

I already I already realized. That’s here. Yeah, yep. So yeah. So we made a bunch of these helpers, right? Where we said, you know, complete true, important, true, urgent, true. But we didn’t do the false side of that. And with this Eisenhower box, each task only exists in one place.

And so by querying this Mike grid right now, as you get to like the lower quadrant, where it should be neither urgent nor important, it’s actually showing everything because it’s the we didn’t search falsy, we just said, Give me all the tasks, not all the tasks also aren’t to those things.

The top right and bottom left ones also show more tasks than they should be as well, for the same reason that, yeah, so what we’re going to do is we’re going to try using the NOT operator. So go into the entry for the top right one. And I think this is important, but not urgent. Any index file, yeah. Okay. Yeah.

So right after dot important, on line 19, type dot knots, and O T. And then do parentheses. And we’re gonna have to expand with the syntax here. Try colon, urgent. Let’s see if that works.

Because we have a scope called urgent, and there’s also a field a Boolean field called urgent, it might just know what to do. Let’s see if that works. Oh, it didn’t. It did not. Okay. Hold on, hold on. So look down to the bottom there. See the black box at the bottom? That’s actually a live console. Keep going down the mouse. Oh, here. Gotcha. Yeah, click right there. So type tasks.

So you see you have like a console right there. And what it’s doing is it’s giving you a debugging console, right at the point of execution. So let’s experiment with a couple things here. Try at tasks dot important. And then try after the important do dot where. Or you could just you know, this is a Boolean field. Instead of dot not just do where urgent colon false. That’s easier.

There’s frequently with the the pure magic that Rails has. I’ll frequently just be like, does this work? And I’ll just try something. And sometimes it just works. Like sometimes the the magic just happens. And sometimes it doesn’t. And it’s kind of a crapshoot. And that is one of the things that makes rails be kind of annoying to learn initially.

There we go, it

looks a little better. Is that each one? Exactly the way it should be? I have Yeah. So

far limited. Make a new task, one item in each list. And I can go through here, and that’s a make that urgent? Boom, there it is. I have created my list.

I have a functioning app. I have an application, ladies and gentlemen. Yeah, so

yeah, at this point, this is a like this is I think, the MVP, we are going

this is this is it, this is where we got. So that was super cool. Pretty straightforward. The code will all be in the GitHub repo. We’ll be sharing kind of this progress. I do want to come back to this later and figure out now Okay, so how do I add in some CSS?

How do I get this so that I can just operate it all in place, you know, like an actual single page application, as opposed to going from page to page to page. So that will be some stuff we explore here down the road with this and will will grow it so better.

Since this is built in REL seven, REL seven actually has this really cool stuff called stimulus J S. And let’s say it’s reflex, um, and turbolinks, or the sorry, it’s just called turbo now. And that is like, prime stuff for doing single page apps. I’m gonna have to play around with that, before we do this next episode, because I haven’t even worked in the shit yet.

Because Bell seven just came out recently. But I’ve been meaning to learn it. So this would be a cool thing that I can learn. And then we can kind of go through it together. But like, it’s the demos that I’ve seen, it’s, it’s really amazing. They do a lot of like prefetching. And a lot of like, predictive requests and stuff. And it’s very fast. And this is sort of their answer to everyone using react to the front end and rails as an API back end.

But all in the same app. The Basecamp folks, we’re like, we’re gonna go ahead and make our own in house JavaScript library that we’re going to use. And so that’s what they did. And it’s like, the the stream demos that I’ve seen have been like, really incredible. So Michael, was adding a class to the link to new task.

I’m playing around here. I don’t I haven’t it doesn’t look like a button yet, obviously. But yeah, cool. Well, awesome. Sit back. Give us just one second. And we are out of here.

Where have you been? It’s like three hours. I

know. I know. I’m I’m trying to learn this stuff and debug it and you sent me down a rabbit hole. Folks, I hope that this was interesting and helpful.

This is sort of a new thing we were thinking about that we just wanted to kind of try and see as we said there is a screen capture of this whole thing as well that you can follow along with if you are a Patreon supporter just go to drop in ux.com/support backers at any amount at all and you will get access to that video it will be out if not right when this episode drops very shortly thereafter. Please give me time to edit things.

That is all I asked. If you want to see more of this, let us know I do want to follow up and we’ll we’ll do at least one more episode of this and kind of fluff this now this little project out a little bit so you can see how it works. But if you want to see more of this in anything we can bring on other experts in other languages and teach us to do the same. Let us know you can find us on Twitter or Facebook.

It’s less drunk and UX or Instagram at slash drunken UX podcast. You can always chat with us on our Discord it’s at Dragon ux.com/discord also Patreon backers get a special role on our Discord to show off the fact that you are a backer of the channel. Oh small the little things because this is all about the different ways we can build things create things share what we know and keep our personas close. Dramatic Pause and our users

have a cool I don’t know a cool discord.

You’re the host you’re literally a host

Exit mobile version