Numenta Building HTM Systems, 25 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: BHTMS - React JS CSS

Description

Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/rhyolight_

A

Hello viewers just got back from lunch.

A

Yeah Pearl Jam so I know.

B

A

A very Hendrix II.

A

Very Hendricks Hendricks plays this chord shape like this.

A

Hendriks does thumb over here, unlike an F shape,.

A

C

A

Yeah left hand, but I can't do that. I can't I I, don't his fingers are a lot longer than mine, so I I bar all the way across, which makes it a little bit more awkward. If I could do it his way, but then but I can, but otherwise I can't do this without I always fudge these.

A

My pinky can't do whatever his pinkies doing unless it's I'm still working on.

B

A

A

Let's do stuff.

A

Let's do stuff so where were we I.

A

Finally, got for that.

A

A

So, let's try I'll need to decide what the stuff is. Gonna be so I have an hour and a half about what can I get done in an hour and a half I'm gonna leave sorry about the noise slot trucks. I'm gonna leave this one in case anybody wants a challenge. I think this would be an interesting challenge because there's a little bug right here.

A

The start of an S I'm not ready for that I'm, so so far, placeholders in text. That's so we can map it out a little bit. While we do that, so you can maybe see to see where we're gonna go. Then so I want a section for the encoders I've just thrown everything together here for the time being, but eventually it will I want to keep this structure of encoders the structure.

A

This is a good structure. I think it's hard. It's a little hard to see. I know, but.

C

A

Section SP section and then obviously this will fill out as we get there and then the anomaly detection prediction section: anomaly: detection of prediction: sections those are going to be the non-biological sections along with the encoders. So it's really the spatial pooling temporal memory sections will be will be implementing biological algorithms, at least that's the idea.

A

But when all up page look like places holders I've been wondering about that, so I'm gonna go back to red blob again and I kind of like. Where was the yeah this is it I'd like to be able to take the whole I? Don't really want a side, menu, I! Guess it's.

A

What I'm trying to say like he's, got a menu that pops up or he'd know the graphics just pop to the side yeah, but his menus are is on the top, so something that says home, encoders spatial pulling temporal memory and then these may be are either landing pages. Well, that's not where I expected it to go. Oh these.

C

Actually go different places.

A

These aren't this isn't the menu. These are actually links that go different places.

A

Like how the table migrates.

A

Like this table found totally lost, I, don't know what kind of which table you're talking about every web dev should rescale the page to see how it flows yeah that type of stuff I'm, not very good at that type of stuff, I'm gonna will try. I'm, probably gonna need some help, so I'm hoping that if I follow some standards we can apply.

A

There are some libraries I know JavaScript libraries that will do this type of stuff for us, there's obviously one in this, and it's probably not even Java. So it's probably CSS at this point. It's just been a while since I've done that so let's move some content and I can maybe the only one that can do this easily, because actually, let's start here on this encoders and compare with this encoders encoder is what is an encoder? What isn't a coder the encoding process, so this style doesn't look too bad.

A

So maybe we should decide on a few basic styles and like the width of the page, it's one thing that I I struggle with, because at some point you want to make your visualizations a certain width. They just don't make sense if they're too small so of like having a set minimum width or something for each diagram makes makes sense, or else I, just don't think they'll display. Well, some.

A

So this image is here and then we've got some styling that came along okay, I, don't know, maybe I don't want to get into the styling I just want to make sure that, like this, for example, I do want to break that out. I want to do whatever it takes to make sure that is styled differently. It's an aside, yeah, it's an aside. So wherever this aside is defined, I'm just going to steal it there's some more sides: I, don't know.

A

If that's I don't know if this is the right thing to do, but I'm gonna take that and I'm gonna make sure this has an aside class.

A

It does so. We just have to go to the cascading style sheet. Where is it I'm, not sure? So this is react.

C

A

So this is going to be on the encoders page and I'm, going to create my style like the react way. So whatever the aside is I can like attach so here is the class name aside.

A

Is that maybe that still what I want to do, or because I've seen how you can just cast in a style as well? Where did we do that? I had someplace that I think it was this one simple, scalar, encoder yeah, so you say style equals style. You just send a style straight in. What's what's wrong with that, that seems from a coding standpoint: I don't have to call it an aside, then I can just tell it here's your style, because the only reason I'm putting it aside on it.

A

So it just needs something like style equals. That's easy.

A

If this is a bad pattern, someone, let me know I forget how to do this already aside style and now I just have to create an aside style, I put a style here. The ones should I put that there I already have one style. That's for the list spelled that wrong and then my style is.

A

This, oh then, I have some extra stuff, so isn't there I mean I almost feel like this would just be easier, putting it in a CSS file, but in my I haven't created.

C

A

Css file, yet so anybody I'm doing react out. There know what the pattern is that I should follow. All I want to do is apply this CSS to a div here. I could just do it by saying class name equals and then put this CSS somewhere that it's loaded but I'm, not sure. If that's the reactive way to do it or not,.

A

C

A

I did that I'm not sure where I would even want to put the CSS, because it seems like react, might not have a place for it and maybe I should just I know: I can just decide doing a side style there. We go if it seems like I'm lazy. It's because I am.

A

How do you CSS modules and react using webpack, so I'm, not so webpack? All that stuff is being done for me by next I believe. So, if you create a component, you can create a component CSS file and.

A

Import styles from CSS.

A

Okay, but I don't but I would only do this if I had existing CSS files. I'm writing this from scratch. So.

A

This is about web pack.

A

I'm just going to try and do it the way I've seen it done and react so far, which is this: it's just send a style and I'm just going to do that so order. Mm-Hmm is.

A

Solid Navy, one picks.

A

Background-Color.

C

A

Least, want to see this work, adding 10 touches, word margin:0.

A

Hopefully this works 0, 0, 20, 0.

A

And I'll forget about the other ones for now just want to see that goldenrod, yellow it's beautiful, color, goldenrod, yellow light gold. Did you.

C

See that they're, like.

A

Holding our yellows not too fine, that's what I was just talking about right, because this needs to be a string. Oh.

A

There it is I, have choices, do a quick scan of that page and see it works for you. Thanks mark five ways to style, react components.

C

This is perfect: okay,.

A

Let's see a great method for styling it with components of a live background, inline CSS, which is what I'm doing that's one. That's what I chose yeah just because it's the simplest way and you don't have to create another file for it and that's I assume that's just going to put like style equals, and then it's going to just parse that object in your string.

A

Css in jas using CSS ng has to extract CSS to the component level itself, using javascript to describe styles on a declare from the table way.

A

See below how far below.

A

Css and J's attaches a style tag on top of the Dom when in line Styles just attaches of properties to the Dom node.

A

So that's and then there's a lot more about this I. Don't I don't feel like that's the right thing to do, or maybe I don't totally understand it. Styled components.

A

Look at some easier using stock components, but.

A

Css modules, this is module CSS found, which all class names and animation names are scoped a local league by default and react. Each react component gets its own CSS file, which is scoped to that file and component for a react component that you'd like to style step. The greatest C is this is what I want that will contain the Styles at Build time. Local class names are mapped, okay hold on next J s, CSS modules.

C

A

A

Import CSS files in the next module. This may be what I want. Okay, the stylesheet is compiled to next static. Css automatically add the CSS file to the HTML. The production of chunk hash so create a next config in the root next to packages, so that I have to require it and then export it create a CSS file.

A

This seam is clean to me. Is that what I? Really? What would be perfect? What it seems like this, the right pragmatic way to do this is to have a simple scalar, encoder, dot, CSS right beside it.

A

That's me, you want to keep the style separate from the logic, and it just doesn't seem like the react way.

A

I'm still struggling with that really.

A

It still doesn't quite make sense to me why you do it this way, but I'm gonna keep at it. Alright, so I'm gonna try this.

A

I'm gonna try this so so the index file can can yeah, so you can just import it from a relative path.

A

Okay, CSS files can now be imported into your document. That means with CSS modules, without CSS modules, Oh what it would wait.

A

With CSS modules, so we're just going to send it modules. True I, don't know what the difference is. Honestly, where was it CSS modules to CSS file, which all last names and animation names are scoped locally by default? Oh.

A

Okay, yeah yeah I know what a CSS module is. So definitely that I think I mean it's just so you can put CSS files by the components you wanna start. One with I think.

A

So you it's the same same way: import.

C

A

From vs. import.

C

A

Okay: let's try this I think I like this post, seems-seems, okay.

A

What is this called next CSS so site next CSS? Is this a good idea to install something this way, I hope so I'm going to try it, whose is that, who is this site, make cloud computing accessible to everyone? Zico.

A

Is there a license.

C

A

Ok, just chicken all right, let's try it and let's give it a shot.

A

Because once we get this set up, I mean we have to make some decisions like this upfront and then once once we have some of these decisions made made. We can make progress across many fronts, but like deciding how we're gonna style, the pages is important. So if.

B

This doesn't feel right.

A

We don't want to force it risk for me.

A

Alright, so I should be able to now do something like this. So I'm gonna create a style and I am gonna, just create a style like right at the bottom of pages. I guess or should I do this, so some so perhaps I've got a folder with components and I've got a folder with pages.

A

When it says diagrams so so, these are my react components and then I have pages. So each react component could have a CSS file. Each page could also have a CSS file. I would think that's the right way to do it, and all of these will so I'm gonna put this right.

A

I'm gonna put the CSS right beside the page or the component that it styles: okay, because I don't honestly I. This is the wild wild west. I, don't know this, isn't the Wild West people, but honestly, this is all this stuff is so new. What is the best pattern to do it in? It takes time to figure that out, I.

C

A

Hd GHD I'm, just complaining about react in general, so I'll make a justice Stiles.

A

So this is like the the main style and let's see if let's make sure that we can do it like a body back ground, color red. So we'll know if this style applies and to copy the page that you were drawing inspiration from yeah I'm I. Definitely I'm going to try and do that. But I, don't know that you mean stylistically, yes, I would I could just take their CSS yeah, although I'm not crazy, about serif fonts for technical writing, I prefer sand, sir, so that might change that.

A

But the colors and he's got alright keep pressing that button and I don't mean to he's, got a link on here about colors or that's really good. Here it is no. This is that maybe.

C

A

It's not the color yellow he, but he has a whole thing that I should I should look into it's all about the but like best practices, for it was along with that interactive tutorial here. Here it is notice. I made no fog, postural numbers work there. One of these was about colors.

A

Here's her one on responsive web design for interactive diagrams. There we go look at this. I was just complaining about this.

A

Okay, so I should keep this open. I should bookmark this. Let.

C

A

This yeah and BHT, ms okay, oh this is good.

A

Oh, this is great all right, so this is exactly the type of stuff I need to. We will need to apply I just accidentally ran into this, and I was looking for something else. Draw drag, handles arrows outside diagrams, responsive web design, notes. Somehow I made the if it's a tool for grafting.

C

A

Of these was about colors and I, really liked it a lot. He basically just picked primary colors and our I don't remember, and- and he picked he muted them and picked sort of the past Le versions of them- hue, color distance anyway I'm getting off getting way off in left field. Now, okay, where were we I'm trying to set up the CSS and I want to use these modules and then I found a plug-in to use the module and now I want to import some CSS from the module and I'm gonna?

A

Do this we'll do it in index? We're.

C

A

Them and it styles I named mine styles, let's not name it styles, let's name it style, let's name it style. Okay, so the index we're going to import CSS from and then we have to UM ah oh and then you, then you apply it.

A

um I, don't know. I know, Java I, don't know cotton, so it doesn't.

C

Matter what language.

A

You learned honestly just learned something learned how to program, and you can learn languages. You can pick up languages easily enough learn how to program doesn't matter what language you learn. I.

A

Got a diet, coke.

A

A

Learned PHP was probably the first language I know.

C

No, it was bit.

A

It was, it was a. It was Q basic. It was Q basic on a computer that my mom bought brought home and had a green screen, I, remember finding Hubei second and read no. That was after the green screen that went actually, but it was a das system, and so you caught, you executed Q basic from the command line, and it brought you into like this weird you ice cream.

A

That was all blue and you wrote your program in that it was actually a little IDE is hard to use and I wrote some trig in it for homework assignment and I thought. Oh that's neat because I checked my answers with it. It was like the Pythagorean theorem or something and so I programmed it in so I could just enter. You know a and B or C or whatever that worked.

A

I was like that's pretty cool and then I didn't show anybody I just turned it off and didn't program for probably 10 years, and the next thing I programmed was PHP and very quickly after that Fortran shell, Java.

A

No see never any see a lot of Java all right, I'm getting off-track. Sorry, it was so so this is applying it by class like this is saying it's applying this CCSS directly to that element. It's almost like that's interesting.

A

Well, I can do that, though. But what about what happens with body like what about the or doesn't body? How do I apply that it does it doesn't? Just maybe it does? Let's I mean I shouldn't assume anything right. Modulo I have to impugn install this stuff.

A

A

C

Didn't build anything today.

A

Okay, so definitely did not apply the the body style that, but that's not really what I want to do so. I'll just cut some slack, and let's just say this is call this red and see if I can apply like right here. Class name. Isn't that what I was doing CSS dot red right?

A

That's what it was doing right, I've got all these things open now.

C

A

Yeah this class named CSS not for CSS from style.

A

So around the layout there should be a red excuse. Me didn't work, though,.

A

Not to lay oh yeah where's, the litt. No, this is the layout. This is the div and it did not apply it. My styling path isn't correction it'd be styled up. Css. Yes,.

C

B

C

A

A

Then quite do it yeah. Let me take this out.

A

Nice I could be doing something else wrong too I'm expecting. Let's do.

A

Let me make sure that I'm looking at the right thing, what, if I do this probably won't work? Maybe it will I, don't know see it. Doesn't it's not even applying that work, maybe I'm not looking in the right place. Actually.

C

A

It's applying a style here, but that's I, think the style I've got several things moving messed up right now.

A

This is side style. Okay, this is different. I! Don't want to look in this one I'm looking specifically here and it's not finding this Styles it should. It looks like it should.

A

It's probably because there's a plugin that's doing it, and so the idea is not like recognizing.

A

Should be able to say CSS stock, no CSS that read, but it's not like certainly doesn't know that I'm. Referring to this, it's not a class. That's what it is. I forgot the dot. Hopefully that's it.

A

Just do import and class name equals, read: I, try.

A

Just import this.

A

Let me find with me if that worked.

A

Something's not right I, don't I, don't think the import is bringing.

C

C

A

Reports dial see if it's so okay, let me change this filename and make sure that it fails. It shouldn't even load. Now it's not even causing an error, so that should cause an error.

A

Oh there's an errand, no, it's just the fabric hunt so now I'm totally confused because I just imported a file that did not exist and it oh I'm in the wrong page. I should be on index yeah.

C

A

Stupid okay, so at least it aired out the way I expected it to okay, let's see, let's this.

C

Is what I want to.

A

Work right now: let's see if that works.

A

B

A

Module parce failed unexpected token. In pages, see it thinks it's trying to parse this like a JavaScript file. This isn't this shouldn't happen. Obviously,.

A

A

Made you need appropriate loader to handle this type of file. I thought that's what this plugin was.

A

Maybe I can't put it in with the pages. Maybe I'll try and put it down a level for now. Just for now, I want to see if that I can get this to work. Maybe I do have to go down, and maybe now next won't try and load it.

A

No, it still tries okay.

C

A

A

Oh I have to add this config file. I almost forgot, so I need a config file.

A

I'm gonna move that style back.

A

And hopefully that still works, it's class bread.

A

Still it's back on plug right, okay, so this config file needs I, don't need options; I, don't think I need options.

C

Just this okay.

A

Let's try and make cross your fingers wait a minute.

C

Okay, compiled.

A

A

Okay, so I think I can do what I want. Then I don't want this to be red. Obviously, but I do want to steal.

A

See how do I want to do this? I could probably apply the class name in the layout.

C

A

Yeah, maybe this should be in the layout, probably I'm gonna take this out and work in the layout yeah. So here's a layout style. This is where I styled things so I'm gonna take this style out, and this is where we're going to say import CSS from not in components now.

A

A

This is that this is the place. I would want the style to be.

A

Okay, I'm gonna do I'm going to do it. This way, I'm gonna put a layout of CSS here beside the layout. Actually I'll just move this over I'll rename. It.

A

So I'll just call that layout and then we'll grab this stuff from here and put it in here no here, and this is going to be content all right, we'll call it body, class body, sure and.

A

I'm gonna make this CSS.

A

Okay and I don't actually want this. What I want I should probably just I'll just go back to his page and take a look at his style sheet. We'll change the colors, but.

C

A

Great I don't know what I'm doing okay where's this style.

C

A

What I could copy that whole thing?

A

That's the nasty part.

A

C

A

That's it I could take the whole thing, but I would certainly have to this. This is the whole thing, but, let's just steal bits the bits we want like, for example, being body class game program.

A

So this is the stuff we'll get into with the responsive. When we get into the responsive stuff, you can got huge okay, I'm not going to worry too much about styling right now. I just want to be able. Then I want to make sure that we can. We have a consistent framework for styling I.

A

Think I broke something I'm gonna go yeah.

C

A

Cool a little like pastel blue, something like that. I.

C

Don't know why I always pick verdana I.

A

C

A

But I should be able to now that I have this layout here, I should be able to say, CSS stop body and then we've got the head and then this is where the content goes, and so this is also wait a minute. This is weird, why is your head and a header header, Oh Oh, a head is the next, that's the actual head matter right for CSS or HTML page. This header is our contains.

B

A

And we've got an inline style here too we'll deal with that. I, don't know their time.

A

But this should work for the layout and as far I'm gonna I'm gonna go find his this color thing because it was interesting. Was it about.

C

A

Color understand the car yellow that wasn't it, though there's something else, there's something about the site: styling.

A

Translator experiments.

A

Let me see if it was in here because finishing touches something I thought I read it when I was looking through this.

A

Color color, these are choosing colors, that's a it just sell colors, not our GB.

A

Is there such cold with things.

A

Iswe heard it was that here there's something else.

A

This stuff is so well put together. It's.

A

Okay, I, don't know where to go so what I'll do is I'll go to an HTML color.

C

A

That's that's a pretty good, color, honestly think about making.

A

That's not a bad color.

A

What did he say, use HSL if we can. Is that see why I need to do that? At this point, though,.

A

um Okay, um let me get back to something.

A

A

I mean I've no idea. If these this is my work, explode I doubt that the.

A

I didn't think it was gonna work.

A

We're still looking at index can't find pages. Uh-Oh yeah I've moved everything now, so this shouldn't be layout.

C

A

Resolve layout.

A

That stout prop expect some mapping style properties to values.

A

B

Layout, seven layout.

A

It expects a mapping so.

C

A

Like my body doesn't like body, so it's not oh it's probably this.

A

Let's see if this works, no, no, it's not that.

A

Well, that's what this is doing. It's saying: import CSS from styles and the CSS dot, whatever.

A

And that's what I'm doing I should be saying: dot body CSS, dot Bobby. This was this was working I'm, pretty sure. Let's sum.

A

Let's simplify this.

A

That's this shouldn't matter, so this is not a mapping. That's what it's trying to tell me. This is not a mapping the CSS dot. What happens when I put a debugger like this right in side of a react component? It stops and it says, I'll expect a token.

A

All right, it's wandering.

A

C

Doesn't want you to add a debugger.

A

So this says 404 layout not found hold on that, doesn't make any sense.

A

Coding numbers, not job, nothing is being found. The error says the style prop expects a mapping from style properties to values, not a string. So it's getting a string.

A

Yeah I get it, but what this is something that that plug-in is supposed to be doing for us.

C

C

A

It's frustrating.

A

Not sure what to do I did. Let me clear my head.

A

I haven't even gotten to redux, yet at all.

A

Again, maybe it's because it's knowledge doesn't seem right, but maybe it doesn't want the CSS in the same place is the react component.

A

Let me just let me just try this: let's just put it in the CSS folder and see what happens. I.

A

Don't like this any more than you so now we're going to go down to CSS layout I, don't think it's gonna help really in variant violation. That's a new error rendered HTML name, and it's not I, don't even know what this is. Invariant language, the Stein. It's the same thing, the style prob expects over.

A

So that wasn't even the problem.

C

A

The hell is, connect, console.log, I, don't even know.

A

What is this? What is this then I get a witness.

A

Is that gonna give me 20 buggers allowed to debug this somehow.

A

And variant violation for the style promised all I want is to load CSS I was almost there I swear. I was this was working alone, didn't know what did I do? Okay, baby, send it back up.

A

There was a place where this worked and I swear. It was here.

A

It was here it was here when the layout was in the same folder, and we just called it.

C

Like that I swear that worked.

A

At some point that worked.

A

Can't resolve layout dot, CSS and components.

A

Oh, that's, okay, so that's dense means I, just have to say.

A

C

A

Still the same thing.

A

This should be easier than this I'm missing something. This should be easier than this. Let me try it without modules. Okay, so let's say without modules: just with CSS I, don't know, I'm grasping straws, but I'm also trying to simplify this.

A

It's maybe I've got it over complicated I, don't know. So, let's do this without modules can I still do the same thing and I still.

A

What's that example, that says they're putting a style and then there's in pages index. It goes down one, so in that case the style would be somewhere else and moving somewhere else, but I should be able to refer to that down and into CSS and and there it is sees the layout and it's upper case layout.

A

Okay, all right and it has a body- and it has a body and we're applying the body to that style.

B

A

It worked, it works, unsupported style, property, background color, oh yeah. Okay, that's nothing! I can deal with that numbers categories. Okay, so I think that work. Let me just make sure. Oh there's no blue background. Colors Oh.

A

So where's the way out, I suspect, maybe.

B

It didn't work.

A

This should be the layout in my layout, I'm gonna say: oh no, it's not style its class. Its class come on guys forswear. That would be it.

A

Oh, maybe there's something wrong: fella property class yeah! That's right! It's fascinating class nation!

A

Isn't that the way they did it here, classname? No, oh! Oh! They did it with a string here. That's what they mean by with modules are without modules. So all I have to do is say body because doesn't it doesn't matter right? It doesn't matter import in port that okay, okay, I've, got good feeling.

B

A

Yes, good feeling all right.

C

A

C

A

Good good, finally, it seemed way more complicated No, so all I all I was trying to do okay. So let me check, because I really rather have this layout right here by I'd, rather have the CSS right by it. So let me see if I can make that work should be easy, should just be just this yep.

A

Okay, we certainly don't want blue. That wasn't the point. The point was just to be able to.

B

A

And I don't want this to be I haven't figured out the font situation.

A

We're just gonna help out of here. For now everybody.

B

Loves Helvetica right.

B

A

So home coders coding numbers, so I'm gonna set up a few styles or at least some style sheets like Arial, better than Helvetica.

A

Right this bullet right yeah. It's.

B

Neither ones I'm here with me.

A

You can take a both I, don't wanna watch this. My border.

A

Last body, so all this stuff is being overridden by oh it's because I.

B

A

A

One pick solid.

A

Black I don't know, oh, where did what is wrong with that.

A

Because it's a string.

A

It's solid ddd, oh it's because it's the string, yeah I, don't know why this border I don't want a border like that.

A

Alright, okay, so this will just be the lay out the body. Let's do one for the header new file.

A

A

A

See if this works.

A

Components going to be header, got CSS and you will import.

A

A

Sorry, Falco I, look when you when you watch it on YouTube. Let me know because if it streams decent on YouTube, that means it's something on your end because as far as I can tell I, don't I don't know, but thanks for watching I'm only on for another 20 minutes or so anyway, and try and get this working styles anyway. So we're gonna call this header and this is what's got all the links in it. So our header should not sure if that background, color works, probably not I've, never done it done.

A

Hsl, so yeah so didn't like I could put blue.

C

A

Css color HS.

A

Hue saturation lightness that stands for.

A

So it's probably just.

A

Jealous a it's, probably just I, probably just need to remove the symbols about about its.

A

C

Didn't like that either did it.

C

A

A

Invalid property value is SHSM, fine I'll go to w3schools, fine, oh, they do want the percents on the other. One.

C

A

That's okay, so picky don't want units on one that you want units on the other okay, so we have a header and it has its own style. How about that? All of these also should inherit the style from the layout. Let's make sure the components does yeah.

A

Okay- and this.

B

Actually works.

A

For the most part, oh, it doesn't doesn't it what happened? What happened did I leave it like this? I must have changed.

B

A

B

A

My mouse interaction just got totally screwed up because I added CSS that doesn't seem right at all, or is it because we are could see that could be right because I if I removed some CSS, maybe that's where those magic values were coming from know where they're coming from, because I removed the some hand coated stuff right here, right margin, 20, padding, 20, that's the 40.

A

Now, with that, okay, so that means- hopefully all I have to do- is remove that 40 about the gutter. But this one does this 40 come from how about now this? Well, it worked on the bottom one. So there's another place that there's a 40 right, so I can remove this where's, the other 40. There is the other 40. Oh man, that makes me happy find stuff like that. I knew I knew I knew it was bad whatever that was was not a good thing now the 40 is accounted for awesome.

A

Only three of you are here to see that that's that's magic.

A

Okay, on that note, maybe I should maybe we should check some of this stuff in okay, so I've got a layout CSS I've got a header. Css I will create a simple scalar, coder CSS where's, the show you I forgot the cheer button and the cow.

A

A

So I'm happy to get some CSS in place. We also want I will create a CSS for the simple scalar encoder.

A

Maybe not maybe I don't need it at all. Let's not! Let's not. Let's say we might want CSS specific to a page so for like the numbers encoder I might, but.

C

A

I might just add it right here in line if it's not much. I'll just add it in line if it starts becoming a hassle, pull it out, but I want the page level stuff. You know the header and the layout I want that to be easy to get in there and mess with I. Don't want it to be hidden inside a react component somewhere. So that's sort of why I pulled it out.

A

Honestly, I, don't really want it in components: I should put it back in CSS, but I, don't know it's I'm still getting used to react and the the framework was not yeah. This was I've, never found CSS to be very easy or intuitive at all. But then UI is hard. You guys always hard, there's, no, there's no simple way to do it. I learned swing in Java.

A

First four, that was my first UI system that I really dug into was Java swing and no not intuitive and then, and that was like everything's an object, everything's an object that was Hopi overkill for sure Java swing, whoo such big class hierarchies and in those Java UI components.

A

Okay, we're gonna commit this. You.

C

Know what we should do, because.

A

We just did work that wasn't on.

C

A

So I'm gonna create a create another card. Oh simple, page styling that was on the list, UI framework and it's gonna be me and that's what I'm working on and now I'm gonna commit it. Okay first thing you do when you write a to-do list. This is right finish the to-do list. That's item number one, then, as soon as you're done with the to-do list, you cross an item off the list.

A

Okay, I have got component modified. Let's do a quick tip, there's a lot of stuff in here right. The header now has CSS it's my class name. We remove the inline style from the layout and apply it. The class from CSS fix to fix me fix to fix me.

A

This is package lock, I, really don't like committing package lock, it doesn't seem like I should be committed, I'm gonna, remove it excuse me. Package lock seems like something that you should share. If you need to you.

C

A

Like it worked in my environment, but it appears my environment, that's what seems like packers auction fee I'm, not a big fan of committing it into the codebase unless there's some reason for it to have it like as a to deploy to production or something I don't feel like it should be in the codebase, it's just too much craft. Every time you commit, you commit this big blob of whatever.

C

A

Yeah I need to clean this up. This isn't encoders I got to clean up in coders, so I'm glad I did that.

A

Okay, yeah everything that the coders real quick, this aside, bit mostly worked, but actually, if maybe I'll, just leave it.

A

What we, what okay, what what this should do, where is the aside ago, so.

B

I'm not going to do.

C

B

A

Gonna do class name beside them, do it like it was, and we're just gonna take this aside, the where we had it. This is what I wanted to do in the first place.

A

This is what what what got me going all the CSS was this aside bit that I didn't like having there I'm gonna, have it in the layout, so I can put asides anywhere so now it should still work when I go to coders and there's an aside of the bottom, make sure all right, so that bit is then cleaned up, and the encoders still has this lip list-style-type:none that doesn't need to be there.

A

So what I should do here is instead of this list style type, none. What that does is.

A

We broke I'll have a list style.

A

Instead of having this, what I should really do is have aside.

A

Unordered lists so in the aside in the.

B

A

And aside, ul Li list style.

B

C

I right am I good.

A

C

That's right because.

A

These are, these are actually unordered lists, all right, so cleaned cleaned up, much better, very have them very, very much happy with this cleaner.

A

Give remove force package lock. Sorry! Well, if you're watching that, just can't do it don't like having the package lock.

A

Okay, everything in components pages, so I got two new CSS files and components which may or may not be moved at some point modified a lot of JavaScript I.

A

Just make sure this is.

A

Why did that change borders, doesn't matter I, guess and package and then next, okay, CSS styling standards, one more thing I might as well put well.

A

This is sort of so sort of obvious. Isn't it I mean you want to know? There's the header and you just look right there and there it is that's pretty obvious, so I, don't think I need to really explain this. I was thinking about maybe updating the readme to explain how the CSS is working, but the way it's set up now is pretty clear here. You just import your CSS with your react component, which is perfect.

A

C

A

Upstream, faster and we'll know it's deployed once we see that there's a color right here.

A

I colored, a header.

A

Alright, this is good timing. Cuz I gotta go yeah, but doesn't matter it'll deploy there soon, thanks for the help with the lookup mark and then others next pixel, if anybody's still watching, we only got a few people on line so I'm, just going to sign off, everything is committed. I will be back streaming again tomorrow and I'm gonna be working with the nupoc community fork, we're going to start work on a hot gym.

A

We're gonna do let's build hot gym, basically the algorithms API and do a hot jet example using the pi bindings that exist for new big dot cpp. So this is going to be python on top of the c++ core in the community, Fork of nuclear core, so thought that might be a good place to start doing some Python 3. That seems to be the easiest place right now to program HTM and Python 3. So we're gonna take a stab at it tomorrow at 9 o'clock, so see you then bye.

A

Everybody take care, I, gotta press this button and everything stops. You.