Hello. It's Todd again. Today I'm going to talk about Dtrace, which is a very interesting tool for tracing what is happening on your system. But before I talk about Dtrace, I'd like to make a public service announcement. In addition to talking, I am also volunteering to help with the network that we have here for the conference. The network is managed. It's basically split over four different DSL lines, and it's very, very busy with all these people here. And because it's very, very busy, it occasionally gets slow. And when it occasionally gets slow, it might be very tempting for you to pull out your phone and make a temporary hotspot. And I'm here to ask you, please do not do that. Because while that might help you for a few minutes, the more people who do that, the worse it is for everyone else. And the more temporary hotspots there are at the conference venue, the more clogged up the airwaves get. And the harder and harder it is to recover from a small network outage. So while it may be very tempting, I'm here to beg you, please do not turn on your phone's hotspot. And if you have one on now, just turn it off and all will be forgiven. But if you leave it on, maybe not. OK, so Dtrace. So first I'll talk a bit about me. I've been doing this for a long time. I'll just leave it at that. I come from Japan. Well, I don't really come from Japan, but I came here from Japan. I've been there about 20 years. And I worked in the industry for a very long time. And I quit my job last year to do interesting things. And here I am doing interesting things. So what about you guys? Has anyone here heard of Dtrace before? It's a little bit more obscure than some tools. OK, maybe about 15%. Has anyone used it? Almost nobody, OK. So I'm here to maybe help increase those numbers a little bit. So I'm going to talk about the history of Dtrace, how Dtrace works, and how it's built, and a couple of use cases. And even if we're lucky, a live demo. So what is Dtrace? So Dtrace is a debugging and system analysis tool. It differs from other tools in that, like a lot of tools you might have on your system, you've probably heard of Strace or Top. Strace, for example, traces every system call that a program runs on a unique system. It focuses on one process at a time. Dtrace looks at the entire system. It's a little different from those other tools. OK, don't, oh, there we go. Dtrace traces the software as it's running. So it's similar to Strace, but it's basically looking at the entire system. And you can trace the kernel as well as user land. So you can actually say, OK, I want to look at every time this piece of the kernel is run, and Dtrace will collect that data and tell you about it. It's open source code. It's released by Sun Microsystems for Solaris first. And it's under the CDDL license, which by some definitions qualifies as open source. And it's now spread far beyond Solaris into several other open source operating systems, most notably, perhaps, Mac OS, where it is quite from the entrance to find out. And I'm assuming most of you guys are Linux users. Sadly for Dtrace, it's not quite as mature in the Linux world, but there are actually two separate Linux ports in progress right now. And I'll talk about those a bit more on the next few slides. So Dtrace has been around for a while. It's already 11 years old. And it came out. It was one of the big killer features of Solaris 10, 10 years ago. It's really, really solid on Solaris. It's production-ready. In fact, Sun, at the time, it was Sun Microsystems, really encouraged you to just use it on your production systems in a live scenario, like, if your production system is having a problem, it's not working, it's not performing the way you want it to, Dtrace, just go in, use Dtrace, and look at the running system and find out why. You can actually use it to debug a problem that's happening as it's happening. And it's designed to be stable enough that it will not, well, in theory, it won't crash your system. So Apple saw this, and they said, yes, we want this. So they took it, and it was only two years later. It was released in macOS Leopard to 10.5. And since then, they've completely adopted it. They use it as the basis of a lot of instrumentation in the Xcode development platform. There's an app called Instruments that you might have seen if you're an Xcode user. It's all built on top of Dtrace. And the Dtrace implementation on macOS is actually quite mature these days. FreeBSD said, yes, we want this. And so very shortly after that, after it was released for Solaris, it started to be added to FreeBSD. And by now, it's quite mature in FreeBSD as well. It's been the default since FreeBSD 9.2, which was what, three years ago, two and a half, three years ago. And FreeBSD is my preferred operating system, and that's where I use it. And it's also available for Linux, although it's not quite as stable as the other platforms, and it's not quite as widespread. So there's a very serious implementation for Oracle Linux. So Oracle, when they bought Sun Microsystems, they got the intellectual property of Dtrace, and they also have their own Linux distribution. So they said, OK, we'll mix these two things together and make something great. And they put a lot of effort into it. They've tested it, they have a test suite, and they're pretty serious about doing it well. And while the kernel bits of it are open source, the userland bits are not. So you can't just take this and run it on any Linux. You have to use Oracle Linux. So sorry about that. But if you want the most solid Dtrace for Linux, there it is. There's also a completely free implementation that's available on GitHub. And I haven't used this Dtrace for Linux myself, so I can't really speak to how mature it is, but I've heard that it's usable. But it's still young. It's not quite as production-ready as the Solaris implementation, for example, but it's there. There are also alternatives for Linux that do similar things to what Dtrace does. You might have heard of SystemTap, which I have looked at, Ftrace, which I have not. They are the same as Dtrace, and they're not compatible. Dtrace has, well, I'll get into it a bit, but Dtrace has its own programming language, and SystemTap doesn't use that. But anyway. So what is this thing? Dtrace takes your code, your running code, that you have on your system, which normally runs invisibly, and it makes it visible to you. Basically, it lets you have X-ray vision into what the computer is doing at any given time, and you can ask Dtrace to tell you whenever a certain piece of code is run, and you can ask questions about the circumstances of what happened to lead to that happening. So it basically allows you to ask questions. When is this happening? How many times is it happening? When it happened, what else was happening? What caused it to happen? This kind of thing. So it allows you to, if you're seeing a problem and you want to know what's causing it, Dtrace allows you to drill down and say, hey, what's going on here? And it allows you to do this while it's happening, which is what makes it really useful. So you have a system that's behaving strangely. You don't understand. Use Dtrace to kind of find out. As I mentioned before, it's not just one process at a time, it looks at your entire system. So if you want to know every time anything, anywhere opens a network socket or opens a file or calls a particular system call, Dtrace will tell you. So if your system has a lot of locks, the kernel is locking a certain file or a certain resource a lot, just ask Dtrace, well, what process is running when that lock is acquired? What process is running when it's released? Dtrace tells you. It's very efficient. So unlike some other tracing tools, I don't know if you use Strace. Strace is great, but Strace slows down the program that it's tracing. So if you use Strace to tell you, oh, hey, that program's just sitting there spinning doing something, but we don't know what, let's use Strace. Well, if you use Strace, it tells you, but it also slows that program down, sometimes significantly, because Strace works by basically stopping the program and starting it again, stopping it and starting it and catching each time it calls a system call. Dtrace doesn't do that, and in fact, when you're not using it, it consumes zero CPU time. When you do use it, it consumes a very little CPU time, just enough to kind of grab some information. And crucially, and differently from other tracing tools, it traces in the kernel and in user-land, so you can actually trace any part of the kernel and any part of user-land code. So how does it do this magical thing? So Dtrace actually, when you use Dtrace, it takes the code that's actually running on your system, whether that's in the kernel or whether it's your user program in user-land that's running, and it basically patches that code, the executable image of that code in memory, basically makes a modification to the memory image of the code that's running, whether that's the kernel or whether it's your user-land program, swaps around a few instructions, patches it, and says, you know what?  So it actually patches the code in memory while it's running and makes it do something else. And then when you're done using Dtrace, it puts it back the way it was, which if you're a systems programmer, this might sound horrifying to you, but it actually works quite well. So what does it do? So the change that it actually makes, the way that it patches the code, is it adds some instrumentation, and by instrumentation, I basically mean it collects data about that execution. So it can collect how many times a given piece of code ran, it can collect the contents of variables that were in effect when the code ran, it can, yeah, you can basically just collect any piece of information about the state of the system every time a given probe is encountered. And because of the way that it works, because it actually leaves the code alone when it's not in use, it has zero effect when it's not enabled. And when it is enabled, it just basically, just pulls the code apart and sticks a little piece in, and then, yeah, grabs a piece of data, and that gets undone when it finishes. So once the data is generated by this patch, it gets filtered, summarized, and displayed. So basically you can have any number of detrace probes active at any given time, and all of them are feeding the data that they collect in through a central filter, collector. And then that gets either filtered, summarized, or any kind of query can be done on the data that's provided by the detrace probes. And the way that you do that is using the detrace command and the deprogramming language, which are part of detrace. And I'm going to give lots and lots of details about the detrace command and the deprogramming language, but not today because I only have another five or 10 minutes. So I'm here to tell you about the detrace workshop that I will be doing on Sunday, just up the road for about four hours, and it will basically be the extension of this talk. We'll be going into lots of details about detrace. It will cover the D language in excruciating detail, and there'll be lots of exercises and examples and a chance to do workshops, say exercises, and all this great stuff. And if that sounds exciting to you, talk to Hasgeek, you will need to have your own laptop with you that either has an operating system running that supports detrace or you can run an operating system like that in a VM and that works fine too. So if you're interested in that, come along on Sunday. But for now, I'm just gonna give you a little bit more information about detrace and then I'll stop for questions. So there's basically three components. I mentioned probes, probes are where the data is collected. Providers, providers are groups of probes, and then consumers is the part of detrace. It's actually reading all that data and summarizing it. So probes are basically like, what does detrace know how to instrument? Because it's not really safe to just randomly modify pieces of code anywhere in memory. It's actually a little bit risky. So the way that detrace does this safely is that it has certain kinds of code that it knows how to modify safely. For example, the C compiler generally compiles the entry points to functions the same way every time. There's a like in a given CPU instruction set when you enter a C function, there's a compiler outputs a certain preamble that looks the same for every function call entry. And detrace knows what that looks like on the architecture it's running on. So if you wanna put a probe for a C function, detrace is like, yes, okay, I know how to patch this to do that, and so there is a provider that knows how to patch C functions. So every time you put a probe on a C function, that's called the function boundary trace, that's a probe, and the provider that knows how to do that is called the FBT provider. And so every time, so basically you can, as a developer, as a system developer, you can add your own detrace probes, you can make new probes for different kinds of things, and the provider allows that to happen. Basically you make a provider that knows how to put a probe on a certain type of thing, and then you can have probes within that provider. And then consumers, basically that's an abstraction, and then all of those providers feed the data that they collect in the same funnel, and then the consumers read from that funnel so that no matter what the provider was or what kind of probe it is, it's all summarized and filtered through the same abstraction. So basically every probe has a name, you name it by the provider, the module, the function and the name, and that's probably too much detail for now. Is that the five minute warning? Okay. So I'll just show you what that looks like. I don't know if you guys can see my screen, but if I run detrace minus L, this will just show me all the probes that are available on my system. So every probe has an ID number, it shows the provider, it shows the module. The module is basically like the name of a piece of code where the probe was installed. And then in this particular case, the FBT provider is that C function boundary trace provider that I mentioned before. So these are all C functions, and then the function is the name, and you can add a probe at the entry point or the return of that C function. And so this goes on and on and on. If I go to the end of the list, it's about 49,000 different probes that are available on this particular system, which is a previous D10 machine. You might see even more if you have a Mac. Yeah, I can also basically use a command like this one here to show the number of probes per provider. I'm not gonna actually do that. And I'll just show you one example. So let's say we wanna know every time a particular system call is made. In this case, we'll use the open system call, and I'm just gonna run this command. So I'm saying, I wanna know every time the open system call is entered, Dtraces tells me, okay, matched to probes. I'm running right now, I'm probing them. And you notice nothing's happening. That's because my system's idle. It's not actually opening anything. But if I, for example, open a new terminal screen, bam, there's a million of them that just happened. Now, it's not giving me any information other than that it happened, but you can tell Dtrace, oh, well, when this happens, tell me which process it was or which file was opened or what time it was or any kind of information. And that's what I'll be showing you how to do on Sunday. So this is just a toy example. And you can get a lot more complicated. So the D language allows you to do conditional probes, speculative tracing on it and on them, super useful. But yeah, that's basically Dtrace and I will wrap up there and pause for questions.  I do, but I don't have them in that I can find and show you in the next 30 seconds. So I think I will repeat that it's a great opportunity to come on Sunday and see. Well played. I will say that if you Google it and look you will have no trouble finding. You can do, for example, you can do things like, I know what you're talking about, you can do things like say you notice that opening files is taking a long time on such and such file system or connecting to a network socket is taking a long time. You can ask Dtrace to calculate the amount of time that each one takes and basically summarize and give you an aggregate and say well, 90% of the time it only took 10 milliseconds but 10% of the time it was over 200 milliseconds and it gives you these nice histograms and graphs and it's, yeah. And I could show you that but I haven't prepared those, I'm sorry. Yeah, thank you, Todd. Okay. Please take all your other questions to him offline. There's a car blocking the movement of other cars. The number of the car is AP 10 AP 6652. We request the owner to move the car. The number is AP 10 AP 6652. And if you like, Todd's talk.


In order to thrive and survive, entrepreneurs are always on the toes. To crack a deal, they might succumb to falsehood and lies. But the body language doesn't lie. Hi guys, this is Asha Singhal and here are four body language cues entrepreneurs must take care of. If someone is avoiding making eye contact, it is indicative of a person not wanting you to see something or to avoid embarrassment. They may be looking at paperwork, the wall behind you or the floor. Basically, everywhere but you. Hence, it's important to pay attention when they avoid eye contact. Often leaning in means the person is engaged, excited and wants to learn more. And while at times leaning back is considered standoffish, it can also be a sign that the person feels safe, relaxed and is coming from a place of authority. Standing up straight exudes confidence and respect. So when you see someone slouching in a meeting, it tends to mean a person has lack of strength and is deeply insecure. Hand motions are great. They live on up a conversation and drive home important points. However, fiddling is not. It can have a variety of meanings including nervousness, boredom and anxiety. Have a great day ahead.


We're gonna get started. Welcome to Creating Advanced Gutenberg Blocks. Whoops. My name is Eric Debelak. I'm a senior developer and co-founder at 11 Online, and this year we started Block Party, which is for Gutenberg Blocks. I've been around WordPress for a long time. I tried it way back in 2004, and then started using it more in 2006. All right, is this good? Okay. These days I'm mostly a React developer. I do a lot of React, and then on the back end we use things like Lumen, PHP, or Flask, which is a Python API framework. Then I also do Android development, and I still do WordPress. Before we get started, have people tried Gutenberg yet? Have people tried making Gutenberg Blocks yet? Does anybody know React? Okay, I saw one, one of these. It's okay. What is Gutenberg? I'll just do a big overview, and there's gonna be a lot of things in here that might be super unfamiliar because Gutenberg development is unlike WordPress development as it is today. So if everything is unfamiliar and weird, that's okay. Just kinda go with it. I'll try to introduce you to some concepts that really, okay, that's okay. That will help you kinda get started and conceptualize what you're doing, but if all the code looks crazy and scary, don't worry, that's, you just have to learn the syntax. Okay, I don't, don't do that. That's, we have a meme of my CEO. There we go. That's one of these. All right. All right, there you go. Excellent, thank you. So, you always wanna have a meme of your CEO. So Gutenberg, it's, what is it here? Who knows? Soon, hopefully. What you see is what you get. I mean, kind of TinyMCE is what you see is what you get, but we'll kinda go over that this is a lot more like that. The content paradigm is blocks. Everything is a block.  And it comes with a lot of simple blocks, but you can build your own, which is what we're here to talk about. And it's written in React.js. You don't need to use React.js, but you should. So it's just one of the things you're gonna have to learn if you wanna make Gutenberg blocks. All right, so let's have a demo. See if this works. Just, this is a set. Set expectations, okay? Okay, so, okay, so this is a Gutenberg editor if you haven't seen it.  Who I love, but this is very similar to what we're used to, right? Like, it kind of feels like TinyMCE, no big deal. There's some things that are nice, like you can rearrange things. They're working on some drag and drop stuff. There's all the extra settings are on the right hand side. But I think where Gutenberg gets really interesting is not in just how it replaces TinyMCE, but it's the additional possibilities that it opens up for us. Because it is a, what you see is what you get editor that you interact with. You're not using short codes. You're able to do something way more interesting and I'll give you an example of a pie chart. So I'm from New Mexico. So we're gonna talk, we'll make a pie chart on Chile. If you ever visit Albuquerque, you're gonna get a question at every restaurant, which is red, green or Christmas, okay? Red Chile, green Chile, or both of them. So we'll just do a little pie chart with Chile. We'll assume that there's some voting going on. We'll add another slice. We'll say, I don't know, 35 people on green Chile. Orange, okay. So, I mean that's pretty different. And then we can come over here and suggest a size a little bit and you can say, oh, I wanna change the labels. I wanna make it 3D. How about spin it around? Give it a donut hole, right? This is what Gutenberg opens up for us and this is where I think Gutenberg gets exciting. All right, did I convince you that it's exciting? Are you excited? I'm excited. Okay, so some basics. Gutenberg puts everything in the content. It's the content box or block or you use it in templates with the content. So you can say, with some caveats, goodbye to post meta. If you're used to developing sites using a lot of post meta, you don't need that anymore. Well, with some caveats. You still might want it for searching or for some other things, but for the most part, you don't need to use post meta for all these different fields. Gutenberg uses attributes as settings on each block and then there's a lot of good resources and we'll kind of go over all this stuff in more detail. When you register a block, the block is basically two things. It's an edit method and a save method. And what the save method does is it takes all your attributes, which are all those settings and it saves it as HTML. And so it might look like this. So this is what gets saved in the content, of in the page content. And then if you have attributes, there's two ways of dealing with attributes. Attributes can either be attached to an HTML element or they're saved as JSON in HTML comments, which is a kind of weird way of doing it, but it works really well. So like if we have like a pricing table block here and then all this is our data associated with that block, just as an HTML comment. You don't see it on the front end. This gets pulled out, I assume using some filter. And all you get is the HTML. On the editor side, Gutenberg takes those attributes, parses them and then it creates that editor method, that editor component using those attributes. And then what the editor method does is that's what allows you to interact and make all those changes like I was doing. And like I said, the front end of the site just shows the saved content. So we'll just do a really simple example to conceptualize this and then we'll get into more interesting things. So this is the register block function. This is JavaScript. You set some default attributes, which attributes again, that's your settings. And Gutenberg does validation, where it says based on your attributes, does your save methods HTML match what I think it should be. So you always need to declare these, otherwise it will break the validation. Here's our edit method, okay. Pretty simple. Again, this is react. You have some built-in stuff that you get that are passed in as parameters. And then we have this very simple method, which all we're just doing is we're saying, is this selected? If it is, we're gonna show one of the built-in plain text inputs. If it's not selected, we'll just show a p-tag with the text. The plain text method has an on change, which uses the built-in set attributes to change the attribute, okay. And then the save method. Remember, this is what saves your HTML. Very simple. Save a p-tag with your text. Okay. So a lot of react kind of tooling around react is complicated because you have to compile everything and use webpack or babble. But their create-gootin block is a really useful tool because it does all that for you. Once you install it, is everybody familiar with NPM? Okay, some people are shaking their heads. All right, NPM, if you don't know that, you'll need to get used to that. That is the new world of WordPress. So NPM, once you have installed create-gootin block, you name it, cd into it, and then you run start and it will run a watcher. So as you make changes, it will recompile your code as you go. So what's built-in? Gutenberg, one really nice thing about Gutenberg is there's tons of stuff that's built-in just ready to go for you. Set attributes, again, that's what deals with changing your settings, and it also is what tells the editor that you can save the page. Until you run set attributes, you can't save the page because it doesn't think anything has changed. So that comes with it, is selected, tells you, is the user selected this block to interact with it or not? There's tons of built-in editor components. In our example, we had plain text, there's rich text, media upload, color palette, drop-down, interblocks, the list goes on and on. So there's, if you go to the GitHub repo of Gutenberg, they have two different types of components. One is just components and the other is blocks. So if you kind of look in there, those are all things that you can import into your project and just use right out of the box. Let's say you want more. If you're not familiar with NPM, it's Node Package Manager. Because we're writing in JavaScript, you can use NPM to install any package you want. One thing for example that we've done is there's some weirdness with the color palette. If you put the color palette in a drop-down, they have a custom color palette, that's another drop-down and you can't put a drop-down in their drop-down. So all we did is we looked at, okay, what NPM package are they using for their custom color picker? We imported that and did our own implementation of it and it was, it took maybe 20 minutes, right? 650,000 packages, you can probably find whatever you need on NPM, okay? So now we're gonna get into some simple, I shouldn't call them, they're maybe not that simple. They're as simple as I could make them to cover a lot of the concepts that really show what can we do to make some really exciting blocks. So we're gonna start with simple statistics. So our goals are is we wanna make a simple statistic block that allows users to input as many statistics as they want, okay, and then just have it count up when it appears on the page, okay? Not too complicated. So what are some strategies that we wanna use, okay? We need to have attributes, but since we don't know how many statistics people are gonna use, we won't need to have an array of attributes, right? So we can have some flexibility in the number of statistics people put in. And since Gutenberg only saves HTML in the content, we don't get any of the JavaScript interactivity on the front end. So we need to do something to overcome that and what we're gonna do is we're gonna use data attributes and then we'll write a jQuery script to parse those attributes and start the count up animation. Does that make sense? Okay, all right, so we start when we get the file structure of create Gutenblock, we get a directory called SRC, which is where we do all of our editing and we have an init PHP file. And this will look like if you're used to plugin development, this is gonna be everything that you've always been used to, okay? What do we do? We're gonna just enqueue some styles and scripts. In this one, you get some basic, the create Gutenberg block stuff comes with some styles that are editor specific and front end specific. And there's one function that will load things on both the front end and the back end and another one that will just do the dashboard. So we have a count up library, right? That we just pulled from GitHub. And a peer library that just is looking to see, okay, when does this element appear on the page? And then we have our custom count up JavaScript that parses and starts the count up animation. And then for the editor side, we have our the block JS, which that's the react stuff, right? That's the only place on the site by default that you'll load react is in the dashboard. And that's where you get all that interaction. And then we have just some editor CSS. So that's our PHP file or main PHP file just in queuing some stuff. And then we move to our SRC block block JS. This is where all the react stuff happens. At the top of the file, what we're just importing some of these styles, right? We're importing I189, which is the internationalization stuff. And then we start importing stuff from the WP global. So the WP global, if you're not familiar with it, you might have used it for the API. If you just go in your console in your browser on a WordPress site and do W, console log WP or just type in WP, you can see tons and tons of stuff that's associated with that. With Gutenberg, it adds all the blocks and components and everything to this WP global. So we're just gonna import some things, register block type, that's what we need to start. And we'll import our plain text. Am I going too fast? Everybody, thumbs up, thumbs down. No, okay, so I want thumbs up. All right, we're gonna register our block. Okay, again, everything here out of this from the create Gutenblock, I only added this last line here. So when you do this, it builds a working project for you and you can just start playing with it from there. We're gonna give it a title and that's how you find it when you press that little plus button. Actually, I should show you guys what this looks like before I go into all the code. Oh, and by the way, it does look the same on the front end as it does on the back end. Okay, so simple statistics. It's gonna be really simple. We're, what do we want? Here's something, a lot of sites put on. I never know what to do. We'll say it takes a lot of time, a lot of cups of coffee to make some websites. Okay? All right, and then the front end, same deal. Okay. That all makes sense. So all we need to kind of get started is we just, all the stuff up through keywords is to help people find it. So there's a few ways in Gutenberg that you can find your blocks. You can actually do, I think it's forward slash and then you can start typing and so you don't have to go and press that little plus button to add blocks. There's little shortcuts on the right-hand side. There's three or four ways to get it and depending on how you do it, you either would use the keywords like statistics or the title and then you can have an icon and there's different categories like embeds and I always seem to use common. And then we set up our default attributes. Again, we don't want to break the validation. We need to let Gutenberg know what kind of attributes we're expecting. So we have our stats array, simple. You can't, you cannot define like attributes within an array, like if you have an array of objects, you can't do that. So you just have to go with just an array and you can put whatever you want in there. And then a random key, which all we're using the random key for is so that we have unique IDs on the front end when we're starting our animations. Okay. Now we'll kind of go through the edit method. Again, you know, all these parameters, these are just things we get for free with Gutenberg. When we do the edit method, we're just gonna check to see if the random key is what we said as a default, otherwise we're gonna make a new random key. When you're writing React, if you haven't written React, everything that you do is a component and you tend to organize your code in these little chunks that do one thing. So you'll see as we go through these, that's what we're gonna be doing. We're gonna be making these little tiny blocks of code that do one thing. And they're just defined as constants again. I don't wanna get into like ES6 and React too much. Hopefully it will at least be readable if you're not used to it. There's a lot of conveniences in shorthand. So we're gonna make an add row button. Basically all this is, is a button. Does this have a pointer too? Which button? Red line? Oh okay, nice. Fancy. Basically all this button does is it has an on click method that it puts a new stat at the end of our stats and then it sets an attribute to our new stats. So we're using set attributes saying, let's just add an empty object at the end. One gotcha if you're not used to JavaScript development. JavaScript is passed by reference. So you need to make new variables instead of just modifying the variables, the attributes that you already have. Because how JavaScript works is it says, oh the reference to this variable is the same, it didn't change. So you need to make a new variable. So that's all we have, right? It's a button, on click. We add some new stats to the stats array and then we set it. Delete stat works much the same way. It's just a button, on click, whoops, wrong button. On click, we're gonna use slice and we're gonna take out the attribute or the stat that we don't want anymore. And again, using set attributes. And then we're gonna make some just convenience methods which is render plain text to, we're just making a more flexible function that can take in what type of field it is and what the index is and make an input for us that will save to the right piece of data in the stats array, right? Again, on change we're just, you'll see a lot of things use the on change method. So we'll kind of go over that more in the other example. And then we have another method just to start the count up animation in the dashboard. One thing you'll notice with a lot of react stuff in general in Gutenberg is no exception is there is some duplication of effort. We have kind of our editor side or editor animation but we also have to make another set of that for the front end experience. So this just uses a library, it's nothing too fancy. And then the main part is always the return. So in react, whatever you return is the HTML that's being shown. So what we're gonna do is we're just going to, we're going to take our stats that are again part of that attribute global or the attribute object that gets passed in. We're gonna map through them which just goes through each item in the array. If it's not selected, we'll start the count up. If it is selected or and then we'll do the different pieces of it. So if it's selected, we're going to use our helper method to make a plain text input. Otherwise, we're just gonna show some HTML and the same thing for the label. And then if it is selected again, we're gonna show delete stats so that you can delete the stats that you want. Is this all conceptually making sense? Yeah, good, okay. And then at the bottom again, we'll just say, are we selected if so, we'll add a row. Okay, we'll do the add a row button. So it's really not that much code, right? I don't think it's a lot of code. If you can imagine writing that in jQuery, you'd probably write 10 times the amount of code. Save function is very similar, all we do. Have some HTML, map through the stats, put them on the page. Okay. So I didn't show you some of the code, like I have the thing that parses out. Oh, actually that's one thing we should talk about quickly. Is, again, since we don't have that interaction, we don't have JavaScript on the front end. All we're doing is we're passing in the stat value as a data attribute, right? Because otherwise we don't know what the countup value is. And then if you look on GitHub, you can see I have that countup.js. All it does is it goes through each element with a class name of simple statistic countup, gets that value and starts the countup animation, okay? So what are our goals, right? We wanted users to put in as many statistics as they wanted and have a simple countup animation. So our strategy is we use an array to allow flexibility and then we use data attributes to save that countup data so that we can parse it on the front end with a jQuery script. All right, how are we doing?  Is it okay? All right, so now let's look at something that's gonna feel more familiar, I think for a lot of people, which is a weather block, simple weather block. So let's kind of take a look at what this is. We'll do weather here. So we have a few things in this weather block. We have some unit settings, right? We can change it to see if we want. We have an API key, this is for open weather API. And then we have a city input that allows us to say what city do we want the weather for and we have some methods to save the API key and then on the front end we'll see the same thing, okay? So this, nothing too complicated, but this will feel more familiar hopefully if you're developing plugins. Again, all the code's available here. So what are our goals for this one? We want to save our open weather API globally. We don't need them, we don't need a user to put in their API key every time they want a weather widget, okay? But then we do want users to set their temperature and weather units, or their temperature units and city per block, okay? All right, system strategies here. We're gonna use server side rendering. Gutenberg allows server side rendering, right? Which opens up a lot more possibilities for us. So why do we want server side rendering? I don't want people using my open weather API key, okay? We're gonna save the API key on the WP options table all through Gutenberg so that all blocks, all weather blocks, have access to it. We're gonna use those right hand side controls like I showed you for the temperature unit, and then we're gonna use a full react component for the edit method so we have access to the react life cycle. The react life cycle has a bunch of different methods that get called depending on what happens. Like did the component mount, did it update? If you're familiar with, there's a bunch of, like Android development does the same thing, iOS development does the same thing. If you're familiar with any of those things. So we're gonna look, start again with SRC slash init. And we have similar things, right? We're gonna enqueue some styles, okay? Include for the dashboard only. We're gonna do our block JS again. We're gonna enqueue that and enqueue our editor CSS. Hopefully this stuff is familiar for you guys. We're gonna register our setting so that we can save the setting on the options table. Okay, this is all just standard WordPress stuff. And now we're going to get to the service at rendering stuff. So Gutenberg has this other, has this method register block type that also exists in PHP. So you can register a block in JavaScript, PHP or both. And so on this instance, we're gonna use the PHP version because it gives us this render callback method to say what function do we wanna call when we want to render our block. Otherwise it's very similar. You don't do the names and stuff and the icons in PHP, but you do have to define your attributes. And so then let's look at our render block. This is just a very basic API request. We say, okay, let's get our API key from the database. If the attributes, we get the parameter of attributes, which is an associative array. If the attributes has a city and we have an API key, we're gonna make an API request to open weather. We build our URL, use WP remote get, decode the stuff we get back, and then we're just gonna make a little convenience thing for if people don't wanna see a metric imperial that show them CF or Kelvin. And then once we have our weather, we just return some HTML. That's all we have. So hopefully this, if you guys are used to developing plugins or things like that for WordPress, this shouldn't feel unfamiliar. You guys good with that? Okay. All right, so the JavaScript side will be probably less familiar, but we're gonna just do the same thing that we've been doing, right? We're at the top, we're gonna use the built-in stuff, we're gonna import it. In this case, we're using a simple debounce. If you're not used to debouncing, do you guys know what debouncing is? No, I guess? No? Okay, so debouncing is a way to delay when a function is called. So what it will do is it's kind of like, in a sense, you're kind of like listening to say, has this changed a lot of times? And if it has, I'm not going to call this function until it stops changing. So people commonly will use this for like scrolling or if you're doing scroll events and stuff like that, so you don't call too many events in the browser. We're gonna do it so we don't make too many API requests when we're typing in the name of the city and run out of our rate limit for the day. So again, we have to register our block type just like we did before. We don't need to say what our attributes are, we already did that. This is all similar, but in this case, instead of having an edit method, we're going to use a react component. React components technically are a function. So Gutenberg will be able to use a react component in edit instead of having a function. And it will go over that last. And since we're doing server-side rendering, this will be the easiest part, return null. We don't want anything to be saved because we're gonna deal with that on the server in PHP. Okay, so if you've done any react, this will look really familiar. If you haven't, I'm sorry that this is, it might be overwhelming, but we have our editor, we have our component, which we've imported at the top. This is WordPress, or Gutenberg has a wrapper around the typical react component as an abstraction so that if react changes their component API, WordPress will deal with that, or Gutenberg, I should say, soon to be WordPress will deal with that for us so that it won't break whatever we've been building in Gutenberg. So they can provide that, they provide that layer of abstraction to prevent any kind of breaking issues. When you have a react component, you have something called state. React is basically a state machine if you're familiar with that concept. If you're not, what that means is instead of manipulating each little thing on the screen, you just change your state and then from that everything else responds. So you're only changing the state and then whatever you have just changes. So we have some state, why do we want state? This state is local to the component, why do we want that and not saving attributes? Well, the big reason is that the weather is gonna change, right? So we don't want to save the weather as an attribute because it's gonna change every, I don't know, how often does it change here every five minutes? So we want this to be saved locally but not be available on the next page refresh, okay? For the dashboard. And then we set our weather API just to an empty string and then is saving to false which will be for a button animation. All right, now we start to get into the life cycle. Component did mount. When the component mounts, what do we want to do? We're gonna use the WP global and we're gonna use the WP API to get our API key, okay? If you've done stuff with using WP API in JavaScript this should look really familiar. These are all methods just built into WordPress ever since the API became a part of core. So what we're gonna do, we're gonna get our setting and then we're gonna save it to our state so that our component now as it mounts gets the key, saves it to the state so now we have access to this API key. And then when the component did update this will run many times. Whenever anything changes, this will run. So we're just gonna do some simple checks so that we don't get the weather constantly. We're gonna say, okay, do the city change? If the city didn't change or the units didn't change or if we don't already have weather or we don't already have an API key, we're just not gonna. So component did mount, just like a lot of other React life cycle methods has a lot of parameters that get passed in automatically like what were the previous props which that's an inheritance thing, what's the previous state? That's again the state that is local to that component. We're gonna make save API key. This again is using all the stuff that's been in core since the REST API. This is all documented really well on the handbook so just take a look at how some of this stuff works. One difference is that we're going to use this set state. So set state, kind of like set attributes is that's a React, set state is a React thing and that will just allow us, that's the method that's given to each component to save the state and all we're doing there is saying okay, we're saving, now we're done saving. And then now here's again remember what I said is you can't save something until the attributes change. So we have to do this really dumb thing which is if we're just changing the state, we still wanna allow the user to save the post.  Hey Gutenberg, there's been a change here. Okay, get weather. Here we have more duplication of effort unfortunately but we wanna repeat our method of getting the weather in PHP and do it in JavaScript so that the people who are interacting with the dashboard can see the weather, can see that it's working, see that their API key is valid. This basically works the same way. I wrote the API request in jQuery because I thought that might be more familiar. Otherwise it's all the same. Again this, we're debouncing this function so we don't call it more than until it stops being called for one second. So that's what the thousand milliseconds is at the end. Okay, and then we have our render method again. Render is what gets shown, that's the HTML that we see. And this is all pretty basic, same thing as what we did in PHP, right? But we're doing it again in JavaScript. But we do have this other thing, which is our controls. So React, when it returns, you'll see two different ways that React will do this. It'll be parentheses, which is when you're returning a single element or you need to have an array because you can return an array of elements. React does not like it if there's two adjacent elements that it's returning in a component. So you either have to use an array or just use a single HTML element where everything else is the child. Inspector controls is again a built-in thing. That's what's on the right-hand side. That gives us everything that we need when you select a block. That's our right-hand side controls. So again, we're gonna use isSelected. What's unfortunate about Gutenberg is that the Inspector controls are global to all blocks on the page. So if you don't use isSelected, your controls are gonna show no matter what's selected. I don't know why that's the case, but that's how it is. So Inspector controls are global to the page. We're gonna just use some built-in things, which we'll go over in more detail, right? Select Control, again. Gutenberg provides all this for us. It's really nice. You have a Select Control, you pass in your options. On change, use set attributes. We have our text control, which this is what's going to set the state for our API key so that we can save it locally. And then when you click on the button, that saves the API key to the database. And then it provides this helpfulIsBusy, which is just pulled from the state. Okay, so that makes sense. Feeling good? Everybody's good? 10 minutes? All right, okay. And then when we are, this is further down in the render, this is that second item in the array. Again, we'll say, is it selected? If it is, we'll show a text control where they can set the city, right? Starting to see some patterns, use on change, set attributes. And then we just down below, is we say if we have weather, let's show it. Otherwise we'll show no weather. And then this is just in detail, so you can see. I forgot that I put this in. But this is just bigger, basically. So again, what are our goals, right? We wanted to allow users to globally save the open weather API key, but then set their other controls based on the block. We use server-side rendering, so we don't expose our API key. And we saved our API key on the options table, use inspector controls, and we use the react life cycle. Okay, so there are a lot of gotchas with Gutenberg. Gutenberg's a moving target. I found out yesterday morning in the airport that they released a breaking change, and I had to update my slides and code examples. Luckily it wasn't big. It's getting better, though. Every release is getting better. Validation is one that trips up a lot of people in the beginning because, like I said, Gutenberg revalidates every block. It wants to know that your HTML matches your attributes. And if you're doing things that are more complex, like some of these examples, and you're saving those attributes as JSON in the HTML comments, it's going to say, do these two things match. If it doesn't think it matches, it says, whoa, this is wrong, and this is bad, we're not gonna let you re-render this block, or this code as your block. You'll have to change it with some custom HTML. But the best way to get around this is you use those default attributes. And in the future, when you make changes to your blocks, there's also a deprecated block method that's optional when you register the block, and that's an array where you can put in all your deprecated blocks so that what it will do is say, hey, this doesn't match. What I think it should be, then it will start running through the deprecated blocks until it finds one that matches. Arrays don't allow for declaration of sub-attributes, which is good and bad. If you're used to maybe like MySQL or strongly type languages, you might think it's bad if you use JavaScript as kind of like anything goes anyway, or like Mongo, just throw anything you want in there. That's kind of how arrays work. Set attributes is another gotcha. It has no callback. Unlike setState for React, which has a callback, setAttributes doesn't have a callback, which means, if you're not familiar with that term, is you can't, a callback is usually an anonymous function that gets passed in as soon as the first function is completed. So Gutenberg doesn't let us know when setAttributes is done, unfortunately. So that's kind of a hassle. You have to play around with how you wanna do that. Using out-of-the-box components don't really look like the front end, unfortunately. But that's one reason why I like to use isSelected and show either the edit component when they're selecting it, and otherwise just show HTML, so that users will have a better sense of what will the HTML actually look like when they are building their page. And there's inner blocks. Inner blocks are nested, so you can make a block that has basically total freedom for other blocks to be thrown in there. The one downside to inner blocks is the inner blocks are global per block. So if you can't use three inner blocks, right? Because then all that content will be in all three places. You can only use one per component, one per block. The other great thing that has me excited about Gutenberg is templating. Templating, like if you're used to using custom post types, this should look familiar, but there's some extra things in there like template, which is an array of Gutenberg blocks. So now when you're building client sites and you have something like you're building locations or whatever it is or team members, when they open up that page, if you're using this templating, there will be a Gutenberg page filled out with all the blocks and some default content if you want, and all they need to do is click into them and change the content. And there's even controls like template lock where you can allow them to not add or move anything. So that was a lot of information, right? Five minutes, what questions do you guys have? Yes. So that's with the templating. So in here you can, this is just an associative array and you can add extra things to it. So, and on all the attributes for your blocks, you can put in defaults. So if you wanted to, for any block, you can put in some default content. So for those of you who had never seen ES6 or React, was it conceptually, did it make sense the things we were doing? Yeah, okay. I encourage you to look at the repos, right? Those are there. Fork them, do whatever you want. I tried to choose the simple examples that covered a lot of different areas of Gutenberg development so that you can kind of see, building off of those two things, you can, like there's a lot of permutations of other cool things that you can do. So, yes, I think so. Yeah, yeah. So it depends, right?  But I do think that if you, so I would say there's, it's kind of a double-edged sword, right? Because like that pie chart block I showed you, you can kind of go nuts and do whatever you want. You can choose all the colors and you can, you know, that might not be what you want for a client site. What you might want for a client site is no options or maybe a few options, right?  So I think that there's kind of maybe two different approaches. One will be infinite customization, right? Change the border radius, change all the colors. The fonts are gonna be pulled in from the theme. And the other approach is I'm gonna build blocks for the branding guidelines of my clients. And I might say like, let's say I have a call-to-action block. Maybe I'll let them choose from three background colors or maybe I'd let them choose from, you know, have an image to the right or an image to the left, but I'm not gonna give them infinite customization. So I think in some ways there will always be people who if they have to strict branding guidelines, you'll always be developing custom blocks because, and I can show you quick, how the default blocks are really customizable. So let's take a look at the paragraph one and I'll just put in some warm-ups. Okay, so what can I do? I can change all this stuff, right? Make it as big as I want. I can do this.  So this is, you don't want your clients doing this, right? So I think there will always be, there's gonna be a big need for custom Gutenberg block development to match those branding guidelines. This is the default paragraph one. Yeah. Yes. Yes, I agree. But thankfully, I mean, hopefully I've shown you that simple, that first simple example, that wasn't that complicated. And what you can do then, you don't need to give them any of this. You can, I forget how you do it, but you can deregister some blocks. So what I anticipate doing is we're going to definitely either deregister all this stuff or just have our own, right? And so, but thankfully it's not that hard because everything is there. This is, the P tag is basically the rich text component wrapped in a P tag. Yeah, I don't believe it does in Gutenberg. So yeah, the one thing with Gutenberg is it's really, it's not geared for people that make client sites in a lot of ways, the defaults. The defaults are built for people who might want this, right? It's built for just users that it's more of a square space type of experience. So I think that, yeah, I think there's always going to be a lot of work in making blocks that meet branding guidelines. So hopefully, you know, my talk was a lot about more of the advanced stuff, but hopefully in the beginning, you kind of saw that. That side doesn't need to be scary. You could just throw in a rich text block and have your own CSS. And if you don't put this stuff in, it's not there. So at least that's encouraging. Yes. Yeah, so there's a column. Yeah, there's a column block that's, it's still, I think it's still officially experimental.  I always forget how this thing works. Oh, okay, yeah, just like that. So you can put in columns and then there's, I forget how you change the settings. Some of this stuff is still, still needs some work. Yeah, yeah, yeah, exactly. We're gonna do every once 5.0 comes out, every new site is in Gutenberg. I think that, you know, our clients use a lot of custom fields and post meta is, you know, why do we use post meta? It's because it's the only thing available to us. It's not a great solution. It's excluded from search. It's, you know, it has a lot of performance concerns. So I think that that switch away from post meta and a better experience of not like some, here's a list of all the fields and you just, you don't really know what it's gonna look like. We can just make a template. They put their content in. I think it's gonna be a much, much better client experience. It depends, I think it depends on what the previous experience is with WordPress. I think that Gutenberg is going to be, the templates are gonna be great. I think that for people who use WordPress a lot, let's say they're in their site three times a week, they're gonna be able to use Gutenberg well. I don't, I think that the people who maybe log in once a month, Gutenberg is gonna be more confusing until maybe some things change. There's a lot of, what does this stuff mean? What does that plus mean? And until they kind of get, I think you have to use it. Even see you saw I got confused with it. I mean, we use CMB2, but I just talked with the CMB2 guy. I'm interested in working with him on some things because I think there still is a place for post meta. Maybe it's a, maybe there's gonna be a wrapper that allows you to save data into a Gutenberg field and into post meta because it's useful sometimes to have that data to get all the doctors at this location or maybe it's a wrapper around taxonomies instead. But I think there's gonna be definitely some use cases to do some of that stuff. Well, there are Gutenberg enabled themes and you can do.


Daniel is missing and supposedly he's in the hospital as someone said they work in the Las Vegas Strip and saw an ambulance take a man who looks like Daniel. I wonder what will be the end of this whole thing. Okay, hello everyone. I am okay. I was in another attack. I will try to keep everyone updated, stay tuned. Hello everyone. So I have made it to Tucson and now I am about to get ready to head to El Paso, Texas. And apparently he's trying to take a trip all the way to New York City and he's gonna make it there by hook or by group, by begging for it, or by speaking on to the wrong bus. This is a shout out to Joshua World for his t-shirts. I'm still waiting for the boxing match. We'll have that in 2023. I can make it anywhere unlike Daniel. He made it 10 hours and then he got punched in the nose here. I'm the captain of the ship. I run to York. I run into the police department that you guys are not cooperating.


Hi everyone and thank you so much for tuning in again and today's vlog is all about looking after your skin whilst wearing face masks and this is because I keep seeing lots of posts on social media about people saying SOS I've got spots I'm getting rashes and stuff from face masks so I just wanted to give some little tips that I've used personally to help your skin and hopefully it helps fingers crossed but if you've got any tips that I haven't mentioned in this video feel free to put a comment below and help others so first tip is if you wear foundation stop stop right now and I know you're probably screaming at me saying I can't do this I need my foundation I've worn foundation since I was born stop it I stopped wearing foundation and noticed a massive difference in my skin um I have got this little bit here but that bit's always there and I've got this little spot here but that's nothing to do with my mask but yeah my skin has been much better since I stopped wearing foundation you don't get the friction on the mask and rubbing the foundation into the pores and that's probably what's causing the spots on your face so yeah make sure clear the foundation your face is going to be covered with mask anyway so people can't even see your foundation so don't worry about it just stop my next tip is regularly washing your face um so if you've got a chance during the day as well like if you're out on placement or on the wards or at work whatever um just giving your face that little bit of a wash dry it off make sure it's dry thoroughly and putting your mask back on that might help as well just clear anything that might be under your mask irritating it as well my next tip is finding good skincare products now I have always been the sort of person that I try and avoid stuff on my face to be honest because I've got quite sensitive skin and even I used to use Lizelle before Lizelle's amazing I really really love it it's very pricey but there's one thing of Lizelle that even I get a reaction to it and that was supposed to be for sensitive skin types so yeah I avoided um all skin products and stuff like that just because it's not good for my skin I end up breaking out in spots and my pores get clogged and stuff and sometimes my face goes greasy and I can never find the right product for my face so it's about balancing and finding what works for your skin because again everyone is different and what works for you might not work for somebody else what works for me might not work for you so yeah find what works for you for a start however I have this past week I had a little pamper kit through my post which was a little freebie like a trial thing just to test it um and this was from someone called Upcycle Beauty who I'd never heard of before they recycle things like coffee beans and things like that to put into their products vegan friendly and animal cruelty free so they're an amazing brand amazing company I don't get sponsored for saying this I promise you I'm just literally plugging it in because it's amazing the stuff is amazing um but yeah I thought I'd give it a try it's a bit wary because as I said I've had reactions and stuff to things before so yes I tried the clean cleansing face scrub stuff that they've got and this was like an orangey sort of apricot seeds or apricot stone sorry that they use and they grind it down and they put all these things in it these natural products into it anyway um and your skin like today they used the last bit last night my skin feels amazing it's so soft it's so like it feels like it's really shining and glowing I don't know if it is it probably looks no different to be honest but it feels amazing and I wake up feeling actually I've got a really fresh face um and I also use they've got an eye cream which contains the coffee beans that I was talking about just around my eyes so you end up smelling like some sort of apricot latte when you go to bed or in the day um but if you like that smell it's okay if you don't like that smell you might be a bit put off but it feels so nice on your eyes and it's really cooling and I wake up feeling actually my eyes feel fresh as well I had no reactions my spots are bare minimal it's just been incredible so yeah so because I ran out of my little testicle I went online this morning to have a look at buying some because I'm obsessed with it now um I can't get enough of it and is a bit pricey another tip as always keep nourished eat good food that will give you less spots if you're eating a lot of takeaway and junk food you're gonna get those spots you're also gonna bring down your immune system and everything and yeah so yeah eat well and also drink plenty of fluids because the more fluid you pump into your body you know it's gonna help clear your skin it's good to lubricate your spine as well so fluids is always up there with nutrition on my list and I am guilty of not doing it sometimes so yeah we all need a bit of fluid and nutrition in our lives and last but not least the use of cold water so if you wash your face and really actually using like um muslim cloths with hot water just to cleanse your face with in the mornings or nights whenever you're washing your face use some hot water and afterwards using cold water because that's just going to close the pores because if you put hot water on your face or steam your face whatever you're doing to your face it's going to open those pores so what you want to do is close them afterwards so apparently cold water is really helpful I wash with cold water all of the time actually it was the only thing I used to use because I never used to use soap I never used to use any products on my face even to get my makeup off it was coconut oil that I would use so it was all natural and then I would just wash with cold water and that's how I've always sort of managed my skin so the use of cold water really really does help as well just close them pores and hopefully prevent any spots and reactions my next one is more of a simpler sort of solution maybe but if you find yourself having reactions to these masks I had a reaction to one of the masks here and that was because the material underneath was really sort of rough and it really rubbed against my skin and it was causing this irritation and I had these little red patches on my cheeks um just change the mask get a different brand if you're at work and it's it's one of the work ones see if they can change the branding or something like that to a better mask maybe that really helps because we've had two lots of masks comes in at where I work and one of them does cause that irritation but actually the other one's fine so sometimes it's down to branding and the people that are making it as well so have a look at that and last but not least if nothing is working you're having hell and you're getting these reactions still what about trying a barrier cream I don't know if there's any evidence on this but it's just come to me as I was doing this vlog I thought well we use barrier cream on other people for like moisture related skin reactions and things like that surely that must form some sort of barrier on your skin for when you put the masks on because things like the cavalon spray that we use we use lbf little sticks that we use and that's just a stop as well people getting reactions from the dressings that's what I've always done and that's worked really really wonders in the past for people but again putting something like that on your face I'm not a hundred percent sure how that's going to go down because your face is quite a sensitive place to put things like that so yeah but you could give it a go let me know if you've tried this put the comments below again because we have to wear these masks it's going to be ongoing for a very long time now it's this isn't going away anytime soon I think mask wearing is going to be pretty much part of our future so yeah we've got to get it right guys anyway that is all my tips that's all I've got guys I'm sorry if none of that works for you these are this is stuff that I've literally just tried myself and it really really helps me so I really hope that it helps you out there if I've hopefully I've given you something to think about and to try out yourself and let me know again if there's anything that you've tried that I haven't spoke about put it in the comments and let's help each other out have a great day


In this discussion, we will discuss the discussion question of compare and contrast the methods commonly used to calculate bad debt and allowance for doubtful accounts. When looking at bad debt and the allowance for doubtful accounts, the first question we're going to have to ask is what are these things and what does this relate to? What problem are we trying to solve? Why would we want to calculate bad debt expense and the allowance for doubtful accounts? And those two things have to do with accounts receivable. So the accounts receivable is going to be something that represents something owed to us from customers, typically from past sales. It's an asset. It's a current asset and typically it's going to be, it could be overstated. That's the problem with it because it could be a fact that we got people owe us money and we're never going to get paid on it. That's always a risk we have of doing business. What we want to be able to do is tell the readers of the financial statements, one, how much people owe us, and then two, if we can tell them how much of that is owed to us we believe is uncollectable, that would be a fair way to report the financial statements. And that's what we call the allowance for doubtful accounts. That's what we use the allowance for doubtful accounts for. So if we see something that says allowance for doubtful accounts, that means that we're using the allowance method and not the direct write off method, which is a method that doesn't really do that estimate. It waits until the time period that we're not going to collect to record the bad debt. So here we're going to assume that we're talking about the allowance for doubtful accounts when calculate both bad debt and the allowance for doubtful accounts. So then how do we calculate the allowance for doubtful accounts? There's two methods we could use to calculate that. The way I see it, and the way it makes intuitive sense to me, and I think a lot of people that I've talked to on it, usually I think of the accounts receivable and the problem with the accounts receivable more than I think of the income statement and the problem with revenue on the income statement, meaning I typically think of, well, accounts receivable could be overstated. How could we fix that problem? And if you think of that, you're thinking about the balance sheet side of things and you're probably going to take a balance sheet approach to the problem. But as you fix the balance sheet, the income statement also becomes fixed because the other side of the journal entry you will make will be to the income statement. So if you better match up or if you better make the more accurate the balance sheet, typically you could be making the income statement more accurate. So for example, the percentage of accounts receivable method would be in some way to look at the accounts receivable, possibly by looking at an aging account, by listing the accounts out by how old they are, and then determining by industry standards in past experience how much you think is it going to be uncollectible, meaning you might take some percentage of the accounts that are past due by 30 days, some percentage of the accounts that are past due by 30 to 60 days, some percentage of the accounts probably a higher percent as they become more past due from 60 to 90 in over 90. And that would be one way to try to estimate you say, well, the older something is, the more likely we're not going to get collected on it at all because we've tried to collect it for 90 days. So if we've been trying to collect on it for 90 days and we haven't got it yet, then it could be very more likely that we're not going to get paid on that. And then we can see, OK, well, then how much of the receivables do we think are going to be uncollectible? And then we'll make the allowance for doubtful accounts match what we believe is uncollectible based on that estimate. When we do that, however, we won't be reducing accounts receivable because we don't know who exactly is not going to pay us. We can't write down any individual account. Say this customer is not going to pay us. All we have is an estimate that we believe based on this timing estimate, not based on who the customers are of how much we think is not going to be collectible. Therefore, we will make this other account, this current asset account, but a contra account, an asset account that has a credit balance rather than a normal debit balance, which will then have this amount that we believe is uncollectible. So then we'll have the accounts receivable, what we believe people owe us, what people owe us is not really an estimate, minus the allowance for doubtful accounts, which is what we believe is uncollectible, giving us the net receivables. Now that makes the balance sheet pretty good there. Now we show the reader how much is owed to us and how much we think is uncollectible and the net. But the income statement also gets worked out too because the journal entry is going to be a credit to allowance for doubtful accounts and a credit to and a debit to what we call bad debt expense, the income statement side, reducing net income, which solves in some ways, if done well, if the income statement side, meaning the revenue we recorded is too high because if we recorded revenue for something that we're not going to collect on, then it's overstated. And so if we record an expense related to it, bad debt expense, that will reduce it. Now the other method focuses on the income statement more. We can use a percentage of sales method, which focuses more on the income statement, and then the balance sheet will kind of fix itself if we use that method. So if we're more concerned, if our focus is more on the income statement and solving the matching problem on the income statement, the revenue and the related expenses, then the percentage of sales method makes more sense, meaning if we frame the problem more of a problem on the income statement side, which is that the revenue is overstated because we recorded revenue for sales for which we may not get paid on in the future and therefore should be reducing net income in some way with bad debt during this time period, then we can use the sales method instead of the percentage of receivables method, meaning we can look at the sales we made on account this time period, the sales we made for accounts receivable, look at past history or industry standards to see how much of those sales typically become uncollectible and then make a journal entry, the same journal entry, debiting bad debt expense, which would reduce net income, expenses reducing the net income, this time period. So we're recording bad debt expense related to this period's sales, not related to sales that happened in the prior periods as would happen under the direct write-off method, a non-generally accepted accounting principle method. We, in this case, matching the amount we think is uncollectible with the revenue earned in the same time period. And then the credit's going to, once again, allowance for doubtful accounts, which will make the balance sheet side more accurate, hopefully, but by focusing on the income statement side. Now, these two methods typically won't end up with the same exact answers and one will focus more on making the balance sheet correct and one will focus more on making the income statement correct. So it kind of depends on where our focus is as to which method will be preferable. Typically, well, they're both estimates and they're typically not going to come out with the same number and there could be distortions from period to period depending on the method we use. What we typically do want, however, is to use some consistency with the methods over time. If we choose one method, in other words, we should probably be fairly consistent with that method and conform to the consistency standard.