Transcript

00:06 [Music]
00:13 So, just comment. She be from a '90s rock band or something. Yeah, I got, you know, Dave Rollair. Um,
00:22 uh, this is just for Milla if she's still here.
00:28 Um, the first magazine I ever subscribed to was Vogue. I have maybe 10 pair of coture shoes.
00:38 Um, there are lots of guys out there that like fashion, that follow fashion, that uh appreciate looking nice. I just
00:47 want to say um not it's not all for wives. In fact, I pick out my wife's clothes when we go out. Um, sometimes it
00:56 just works out that way, you know. Um, anyway, uh, yeah. Wow. Connoisseur. I learn
01:04 something new every day, man. I have I have two boys and me, and all three of
01:12 us, the boys, have longer hair than my wife. So, you know, the gender thing
01:19 isn't always, you know, cut and dry. Um anyway, so uh yeah, we're going to talk
01:27 about um themes today. Um and this is a pretty technical talk. Uh so
01:35 um if you're really technical, uh follow along. Uh uh yeah, and if you're not so
01:45 technical, um just sit back and kind of let it flow over you and appreciate uh you know,
01:53 some of the things that we're working on.
01:56 Um all right. Uh I have some slides, not many today. It's mostly we're going to stick straight to uh yeah, straight to the the good stuff.
02:09 All right. Um, share my screen. Let's see. I did this wrong
02:16 yesterday. I want my whole desktop, but I want the other one. No, I want this
02:23 one. All right, you guys. That looks like it. Yeah. Nice. All right. And put this out of the way over here.
02:34 And then uh let's see.
02:40 [Music]
02:41 We're going to zip over to Keynote. All right. So, uh,
02:50 today is all about code. Um, and yeah, we're going to start out, uh,
02:57 we're going to go through just the basics. We're going to check out how themes work inside the app. Um, which that's not it's not rocket science.
03:08 It's kind of like you think probably. Um but uh yeah, if you're interested how stacks does those things then it might
03:16 be interesting. Um and then uh we're going to dive inside the bundle of a
03:22 stack. Um then uh we're going to talk about what stacks gives to theme
03:29 designers to kind of make their job easier. Um, so we're going to talk about inheritance and the base theme. So the
03:38 base theme kind of gives you something to work with, but you don't have to take all of it or you can take none of it.
03:46 And um, anytime the base theme comes up with an update, you get those new updates uh,
03:54 automatically in your in your theme if you inherit uh, the base theme stuff.
03:59 But you can also take some out and uh yeah, do whatever you need to do on
04:07 your own. Okay. Um then we're going to actually go in and look at some code. Um so I'm going to jump into an example
04:16 theme uh that I've been working on. This is a theme that Nick Kates, if you are
04:25 friends of the older community, um might recognize. Uh Nick was a great theme designer. Um
04:34 and he has a couple themes that were in like in a basic form in uh Rapid Weaver.
04:43 Um, and then he had a whole load of pro themes um, sort of upgraded from the ones that
04:52 come free. And then th those pro themes uh, Joe owns now. So, uh, Joe lent me one of his themes. I did a conversion on
05:01 it and we're going to take a look at that. Um, I actually, to be honest, uh, I really wanted to like actually do the
05:08 whole conversion, but there's just only so much you can fit in an hour. um even if I went to two hours it would be
05:16 really jam-packed. So um to try to uh
05:24 yeah maintain the patience of those who are not so technical and and um yeah
05:30 keep it to about an hour. Um I'm going to basically work like a kitchen cooking
05:38 show. So I I have everything uh all done and we're going to look at pieces of it and see how you do those pieces and what
05:46 happens when you change them and whatnot. Okay. So um in in this one we're going to talk specifically about
05:52 whether you want to uh write some of your own basic when when you're converting a theme. um whether you want
06:01 to write some of your own stuff just for stacks, whether you want to rewrite the stuff that's there and how that might
06:09 you might go about that. Um or if you can just reuse what you already have and
06:16 uh we've designed the STAX API specifically for this reuse purpose. So, um, there are a lot of theme APIs out
06:25 there from all sorts of different web development apps and platforms. Um, and
06:33 each one's a little bit different, but a lot of them have some commonalities. And so I built the theme API so that we can
06:42 kind of uh be flexible in incorporating um their CSS uh or or even JavaScript or
06:52 whatever. Um and then some basic tips for working with this API. And uh if we have time, we won't uh we can talk some more about the language features.
07:03 Um, lastly, uh, I've actually been working on this talk since last year.
07:11 Um, and I keep putting it on pause to fix another bug and fix another bug and fix another bug. So, uh, first off,
07:19 there will probably be a few bugs uh along the way. So, um, don't be s too surprised to see a crash. We're working with a really beta version um that
07:28 hasn't even been released. And uh yeah, when we're dealing with more complex stuff, we're more likely to hit
07:38 uh more complex bugs. Um but I'm also doing this same talk in a series of
07:47 these four uh agenda items. Um so four little sort of 45minute
07:55 um uh videos. And if you're familiar with one part, you can skip ahead and and maybe go back. So,
08:03 um if this video, this talk is is too superficial, wait a couple weeks. I think I'll have the the uh the full
08:11 thing done. So, um yeah, look for that uh later on this month and maybe early May. All right. Um so, who is this for?
08:22 Uh primarily this talk is aimed at stack developers. So we are going to skip over
08:29 one of the most difficult most timeconuming not difficult um parts uh which is
08:38 building controls uh for your theme um because it's exactly the same as tax. I haven't added
08:46 or taken away anything. Um, so the theme API has access to every single control
08:53 that you would build using the stacks API and uh vice versa. So they're they're one to one all of the controls
09:01 and mechanisms and um yeah, all the stack developers are really familiar with that part. So yeah,
09:09 I'm just going to leave it out save some time.
09:12 Um, if you're a web developer, you can probably get most of this. Uh there's a few things about how a bundle is is
09:21 structured inside of Mac OS. Um and we're kind of going to skip over that too. So uh just wait till we get to the
09:29 template part. That' be more um and anybody else who's just, you know, comfortable in CSS and HTML even though
09:36 maybe they're not a professional web developer. Um what tools do you need? Uh if you want to develop your own stuff, you're going to need stacks obviously.
09:44 Um, you're going to need a text editor, not Microsoft Word, like a real text editor for writing code. Um, VS Code is
09:52 free and fast and easy. Um, and uh, this code in the theme stuff
10:02 probably isn't going to be helped by AI right away because it's brand new. So, AI hasn't been trained on it. GitHub knows or co-pilot knows nothing about this except maybe what I've given it.
10:13 Um, and yeah,
10:20 uh, it probably will in the near future, I would guess.
10:26 Um, ChatG and Copilot are actually really good at building stacks. So, um,
10:33 yeah, if you need a crash course on like how to set up controls, you could do that with the sex API and learn how to do it using copilot GP.
10:44 Um, but yeah, we're going to edit code, you know, from scratch here or at least convert it from
10:53 platform. And you're going to need a P list editor. Um, this is kind of mandatory requirement for building a stack.
11:09 called Pro does a little bit more. Um that's from yeah friend of Joe and I uh
11:17 from who has been writing pro for even longer than I've been stack so uh long
11:23 long time. And um you can also use a texture you're editing XML which is
11:33 um but GT are pretty good at it. I know lots of people who do um when
11:43 can I get this uh videos
11:49 um that you can with so um so Not yet on the documentation. Let me get
11:58 closer to the finish line because it's hard to writeation on things shifting under your feet.
12:05 Um, as far videos, um, I just need a little bit more time to work on those, but it's been at the
12:13 top of my pretty list since like November or something. Um, the last demos. uh going to have to ask Joe cuz
12:23 my demo is stack that is going to jail and I don't feel comfortable just giving it to everybody. So um you can ask Joe
12:31 maybe we can take out some of the uh out of it and and strip it down to the basics so that it's a better demo
12:40 and it doesn't dissuade people from actually buying because I mean reason's actually a great theme. I mean it's
12:47 really simple. Uh the reason I always for because that's really
12:54 simple kind of looks great. So um yeah, that's where we're at. So without further ado, let's dive in and take a
13:03 look at. So um yeah, let me
13:11 launch and um get rid of um All right. So,
13:20 uh yeah, this is stat. So, the page is pretty simple. the same that I had in the demon.
13:33 Obviously, I'm noting a whole bunch of
13:47 keep. So, um yeah. How do you choose? you open up the library
13:56 um and you get out your door and you double click on a so
14:07 um base will probably not the final release I'm leaving it visible now so
14:15 that uh yeah so that it's easier to find for both developers because that's primary
14:22 task at the moment All right.
14:25 So double click reason and you can immediately see over in my sidebar there's a
14:34 um a controls this theme and those are almost one to one
14:43 with the version but I am leaving some both person and because it doesn't make sense
14:51 necessarily um stacks the app works a little bit differently than weaver does.
15:09 side I kind of feel I'm leaving side
15:18 for people do on their own here down below there's
15:27 um there's And I've added
15:33 that I've added that by just
15:42 basic a basic layout that adds some text to no deal.
15:51 Um yeah.
15:55 So, how do themes and layouts and stacks work all
16:02 together? This is kind of the first big change if you've been working rapid or maybe some other.
16:15 Yeah, we have a secondary way to add to your page called
16:22 layout. And that layout can be applied to any pages. Um it doesn't have to be every page. Um and in that layout you
16:32 can theme properties or choose an entirely different theme for yeah every
16:39 um so I'm not talk about too much about here too much
16:46 know some of those things that you seen another theme we're doing a little bit
16:54 differently here it's a different app It's got different types of components. Some
17:01 things be a little that's um
17:09 yeah, otherwise it's pretty much like you think.
17:14 Um know have lots of uh interesting properties. Um apply. Wow, that Oh,
17:24 that's it to change that there. Uh that's this yeah whatever you like. Uh
17:34 and you can override themes uh as I said before. So um this page looks a little bit
17:41 different because um yeah choose like
17:48 and if you're a different context um yeah one theme for
18:01 your down here um pageime Whenever you create a new page, that's
18:09 what you're going to get once you copy and paste. Yeah, that's about it. I mean, I
18:19 I kind of get the idea of themes are supposed to work roughly. Um, there are a few differences here, but they're
18:28 pretty basic. Um, you get the properties for the whole site with the theme.
18:37 And I'll probably be bouncing around a lot between those tabs. And I use the
18:43 command. It's one, two, three, four. Command one, two, three, four. So
18:51 um yeah like um
18:59 so this one
19:09 z the pages. So um yeah, uh let's now dive in and check
19:18 out what's inside of team. Um so I'm going to start by looking at the base
19:26 theme before I even get obviously got more than blank theme.
19:34 Um but there just to get blank onto the page there's some mark and
19:41 um the theme isn't just meant to be white. It's actually building blocks um
19:49 that you can reuse as a theme developer to build up. So um themes inherit from
19:58 other and every time you do you get all of the smarts of the theme that you inherit from and anything that
20:09 that yeah we tried to make the process that inheritance not it kind of compiles to like this is
20:19 the set of things that is going to be and um we don't have to walk that in screen every time you generate a page or
20:28 whatever. Let's go take a look at this base theme. I'm just going to say show and finder. Uh the base theme is actually inside
20:36 of app. Um so you could see all the nittygritty of stacks
20:46 app. Um and that way we can poke around inside. Um so all themes and stacks are
20:56 in a standard Mac OS bundle. Um a bundle has like a set of basic building blocks.
21:04 Um inside a bundle is always one folder contents. That's actually not true in a framework a little bit different.
21:16 Um then inside the contents folder there's a variety of other folders but um you'll usually find uh executables
21:26 like for app bundle the executables will be in a special Mac OS folder in here and
21:35 then um you resources folder and the resources folder is always indexed by
21:42 Mac OS really fast. So, um there can be a lot of files in there and the app can still use them as if
21:51 they're already found. Um s makes them more performant. Yeah. What's inside of the
21:59 resources? Well, everything else basically. Um but inside of a theme, uh well, you'll have any graphics that you
22:06 need like um and static files. So CSS that doesn't need to be a template. Um
22:15 or SVGs, those are good. Um you know, anything that you need to to build your theme
22:22 um goes in here. So uh the only exception to that rule is a library that
22:29 stacks can provide. So um a theme can ask for any of the same libraries that a stack can ask for. Um, and that means
22:38 you can request things with jQuery or view or I don't know what else.
22:47 There's a whole bunch, but I can't think of them off the top of my head. Anyway, um, we can always add more library
22:55 libraries, too. So, uh, yeah, let's look inside this templates folder because this is kind of
23:03 where the magic happens and we really part ways with how a stack does it. So, a stack you kind of
23:12 specify each time you want a specific asset, you say I want that asset and that file or at least that folder. um
23:21 with uh templates there's just like too many files to do that. It would be a real pain. So instead um I made another
23:31 standardized folder called templates and you put your templates in there. STAX just does the rest. Um so whatever files
23:38 are in there, STAX is going to treat them as if they're templates. Um, if they're not even
23:47 text I could but you Yeah, I suppose you could put images. It's not going to be fast. Don't do that. Um, anyway, all
23:55 your your templates in there, which should be text, um, HTML, CSS, JavaScript, PHP, or even
24:05 um, yeah, a file of some other sort that it doesn't fit into those categories.
24:12 um Python, who knows?
24:17 Um these will all be treated like a template and they'll be compiled
24:24 and grouped and turned into
24:28 [Music]
24:30 um a very fast indexed unit.
24:37 Um, for this reason, we can have a lot more templates in a theme than we could have
24:44 had in a stack. So, um, in a stack, I always said try to keep it, you know, down to just a handful of of themes.
24:54 Some people have more, but, um, try to combine the files. Don't do that. So, with a
25:02 template, do whatever you want. Um but I recommend being very modular. Um meaning
25:08 you know try to keep uh units small and lightweight if possible and to be
25:17 um yeah one type of thing and that way they're easy to replace easy to inherit from.
25:29 Um yeah, so uh we can have a whole bunch. Uh they all get treated as templates. Um some templates are more
25:38 special than others. Uh so there's um a few basic
25:45 um magic templates. Uh these will have to go in the top of the documentation, but I'm just going to say them here.
25:52 They're not very difficult to remember.
25:56 You have an index.htm HTML file, even if it's a PHP, um the index.html,
26:04 uh is going to be the primary thing that gets sent to the page. Um so whatever is in the
26:13 index.html, that's what's going to get used. Um you can also call it HTML.html. Uh and that's just for
26:21 orthogonality, you know, like trying to keep things the same because there's also CSS.c CSS and JS.js and PHP.php. I don't think that one works.
26:33 Um but uh for things that especially in on edit mode um we have
26:41 index.html CSS.css. Um very useful. So uh the thing that is index.html is going to turn into
26:50 the HTML the primary stuff for that page and CSS.css CSS is going to be your
26:56 primary uh CSS that gets uh sent to the page. It it it gets published into the
27:04 themes folder as stacks.css. Anytime STAX generates a CSS
27:11 file, it will call it stacks.css. So, you know, so that way you never have to worry
27:18 about colliding with an automatically generated file. Uh, as long as you don't name something,
27:27 uh, well, you shouldn't name something index.html, obviously. Um, if it's like an asset or something. Uh,
27:34 but if you stay away from stacks.css, CSS stacks uh JS then you won't collide
27:43 with those autogenerated files. All right. So what is inside of
27:50 these templates? So there's a whole bunch here. Um even though it's a blank theme, I know um uh I am going to well
28:08 VS Code and I'm gonna get rid of my doc so I don't bump into it all the time. All right.
28:20 Um, yeah, I'm gonna go full screen on this so that um it's not cluttering up things. So, if we look inside the
28:30 index.html HTML. There's really not much. And that's because I'm trying to be very modular here. The idea is that
28:38 each file in the base theme provides just a tiny bit of functionality that is very standard
28:48 that yeah, pretty much every page that's going to be generated is going to need um with few exceptions.
28:59 So, you know, every page is going to need a dock type HTML and set a language
29:07 um and yeah, have a head and a body um which we're
29:16 including here as other templates. And then um if you have PHP that needs the
29:22 prefix or suffix outside of the HTML um those get injected there too. So um
29:31 every time you see something like content prefix um content is the
29:38 generated content from stacks and then the the property here is prefix.
29:47 Um, and there's a lot of properties.
29:50 There's, yeah, before the body, after the body, uh, the content itself on the page. Uh, there's a lot more.
30:04 Um, so this is a good example though where even though it seems like something that
30:13 every stack will need, every theme will need if you wanted to build a stack specifically for non- English market,
30:22 then you wouldn't want this English here and it'd be easy enough to build some other
30:32 Yeah, P list property that generated that. But I figured I'll just give them this and if they need to override this,
30:39 simple enough. They just override these five lines. Um, and they put an index.html in their own
30:48 uh theme. and your own your own themes templates will always be used
30:58 um prior to looking for them from an ancestor from the thing that you're inheriting
31:05 from. So if you override index.html, you can set your own language and ignore the prefix, ignore
31:14 the suffix, do whatever you want. Um it doesn't even have to be HTML, you know.
31:22 So let's go look at these other two lines. There's um include here is is a a
31:30 basic command of of the language and include is just going to go grab that um template. It's going to look for it
31:38 first in your own templates folder and then it's going to jump up to the parent of that template, maybe even the parent or the grandparent or the grandparent.
31:48 Um, and it's going to look for the template called head. Um, well, we've
31:56 named our our templates with HTML extensions. Um, and we've only requested
32:02 head. And you can see here head.html first defines an ID. And the
32:09 reason that that that's there is that um yeah, you might not want to have the
32:16 same ID as the file name. Might want to keep it simple. I don't know. Um the reason I did that was just to make
32:25 indexing a little bit faster. Uh we don't always have to go back to the files to look for things. Um we can just index everything by these IDs. And even
32:35 if the file names change, the ID can still be stable, which is basically just like
32:42 stack IDs, you know. Um, so the head includes the standard things that you might find in the head. Um, there's con
32:52 there's that content again. So content head above, you know, a little bit content that can go head above. These can be
33:01 uh defined um in the P list in the same way that you do in a stack. Um and you
33:10 can specify specific content that goes in those things. Um outside of that, uh we put the title in here for you. Um
33:18 notice there's no ID equals like the STAX API. Um we tried to keep it a lot
33:25 simpler. we don't need that complexity to build this language. Um, since the language interpreter is much more flexible.
33:36 Um, yeah, for those in the know, this is a a full contextfree engine. Um, and uh
33:43 has a complete grammar alexer and a a parser and sort of a compiler uh built in. I mean, I can't really build a
33:51 compiler in you're not supposed to compile things for native code, but it compiles it into a format that stacks
33:58 can use very quickly in memory. All right.
34:04 Um, yeah. Then we include uh some meta tags. Those are the built-in metatags.
34:09 Obviously, you might want to add your own. Um, and uh we have the head CSS, and that's the basic CSS that stacks
34:18 needs to run. as long at along with a few of the other basics like so uh it
34:26 includes the site CSS. Well, let's go look. There's no no need for me to just talk about it.
34:36 Um so yeah, I'm trying to be very uh since I don't have documentation yet,
34:45 I'm trying to document in line when I can. Um, so I add a large description about what this file is for and I try to
34:52 keep things really clear and add some comments. Um, obviously if you want to override this template and delete all
34:59 that stuff, that's fine. Um, but uh know that in the final build version, some of those
35:08 comments might migrate out of this file and into the documentation. Um, so this file will be a little bit cleaner and
35:15 yeah, you don't have to worry about uh any of that stuff. So, uh, I should mention that the top of the page here
35:23 is, um, allows you to define some properties. You can even create your own variables like if you have a constant
35:31 like uh, yeah, you could set up a metatag for instance. Um, I think actually the metatag file might do that.
35:43 Yeah. So I I put in a description. It's a stacks page and uh the keywords are stacks and HTML. And then I use those
35:51 down here. Um so I just add those as variables. Um you can modify variables on the fly too. It's like a real language.
36:02 Um inside of let's jump back to the CSS.
36:06 Um inside a normal um CSS template will have some links to the various things.
36:14 This is the CSS that is sitewide. So some stacks will
36:22 specify here's a bunch of CSS. Put it on every page. Load that
36:28 first. And then below that your theme comes. And so we're we're using that
36:36 uh yeah it's the original um the original acronym of CSS is uh
36:45 cascading stylesheets. This is the cascade part. So the the things that you load first uh those have the lowest
36:53 priority um and as you add on um those things can overwrite the previous
37:01 styles. So, uh, we go sitewide stuff, theme stuff. Um, if you have a layout or
37:09 you get the layout stuff. Um, so if there's a stack on the on the layout, then uh that CSS gets
37:18 injected here. Um, and then we have uh the page CSS. So that's where most of
37:25 the CSS for all the the different stacks goes. Um, but in the middle here, uh, is
37:32 the the theme CSS. Um, and I want to, yeah, pay attention to
37:40 this if nothing else about this. Um, so over here in this folder called theme
37:48 overrides are three specific files that I know like every theme will want to override. Most of the other stuff it's
37:56 all boilerplate and you'll either copy it from here and put it into your own theme, maybe tweak it a little bit to your liking.
38:05 Um, or you'll just inherit it and then you don't have to worry about the site CSS file and the layout file and the
38:13 page file. Um, you just say I want the CSS and you get the CSS. Um but along
38:22 with that I have one file that just tries to
38:29 um load something from your theme. So it uses the theme path variable and then I
38:36 just give it a fake name here. So, this is something you're even if you take everything
38:44 else, you're going to want to override or delete these these templates. Um,
38:51 like override them and put nothing in them if I'm not sure why you would do that, but you could. Um anyway, this is
38:59 your chance to um include your themes CSS. All right.
39:10 Um and any other CSS that your theme loads. So, um, the
39:17 reason the reason be the loads its own CSS and just a blob of
39:26 static minimized CSS that comes from a variety of the widgets that that theme
39:33 uses. Um, and and some SAS that Nick Kates wrote and then it gets into one
39:41 big blob. And so that gets loaded first in his theme. Um, and we do that by overwriting this theme.css file. There's
39:50 also one for JavaScript file. You might want JavaScript. You might not actually want JavaScript JavaScript. Some pages
39:58 are static. Um, they're pretty boring pages, but you know, you might have just a a basic blog or something.
40:07 Um, and this is where you do that.
40:09 Again, I'm using the theme path variable. Um, and
40:16 uh, yeah, we're we're loading a fake name there. You'll obviously want to put your own
40:23 in. Um, and metatags. I most people want to put a theme metatag in.
40:35 Um, that's all. Uh, there's there's other ways to add metatags that are nice, too. Um, but this allows the theme
40:44 to add one and it gets incorporated automatically from the the metatags that STAX is using. So, it's down at the
40:52 bottom here. So, it's the highest priority one. Um, yeah.
41:03 Um, I don't think I need to talk too much more about this. No, there is one more thing. Okay, one more thing in the
41:12 base theme and then we'll go have a peek in because we're at halfway. Um, then we'll go have a peek at Reason. Um,
41:20 which is lots more complex. And, uh, in the video I actually do it all from scratch.
41:28 Um, but that takes hours. So, uh, we don't have hours. So, you know, we'll do it in 20 minutes and we'll do it just by
41:36 walking through things um and having a look at how they were achieved. Um so, navigation is a bit of
41:44 a tricky wicket. Uh sticky wicket. Um
41:51 so, every every web platform does navigation its own way.
41:58 Um the rapid weaver way mostly was you just you have a special marker and that
42:08 marker gets a bunch of HTML um injected and then you write the CSS that styles
42:14 that HTML. there are ways to override specific parts of it using yeah other
42:22 parts of their theme API but not many other web platforms work similarly to
42:28 that. So um a lot of other web platforms you're responsible for doing
42:35 navigation um for setting up you know a an unordered list or something like that and and styling it. Um, but they give
42:44 you a way to here's the content that that is going to be displayed and you do it in JavaScript or whatever.
42:52 Um, or yeah, like Jackal, it's all all static.
42:57 Um, you can you can provide Jackal with like really specifics. This is what I
43:04 want each item to look like. um and they have lots of their own Jekal language for uh managing that and customizing it.
43:16 So there are some what I'm getting at is there's some places like Rapid Weaver where you basically just say give me the nav stuff and it
43:24 blah there it is on your on your your page and yeah you have to style what you're given. Um there are some tweaks
43:32 to it but um mostly it's yeah you get it and uh you have to use CSS to kind of
43:40 manage it or or JavaScript. Um so I kind of wanted to split the difference there somehow. uh
43:48 do a little of both so that it would be easy to migrate from one of those two situations like the Jackekal situation
43:55 which is highly customizable or the rapid wever situation which is not so much.
44:01 Um so number one you can basically just say uh nav and it does the thing. Um and
44:10 you don't have to think about it. Um what it's going to do is based on this uh this base theme um but you don't have to do it this way.
44:23 Um you can modify this to your own liking and there are lots of tools in the language for customizing it. Um the
44:32 first thing you'll probably notice uh is there's a nice loop here.
44:37 Um, if you're old enough and you've been around stacks long enough, you know that looping is a particularly challenging
44:45 topic for me. Um, some people used the repeat
44:51 [Music]
44:53 um, template in stacks 2 to do some pretty nutty things. and
45:02 the way stacks interpreted it sort of iteratively, it just slowed everything to a crawl. So, we're not doing anything
45:11 like that. I promise. Um, you can do loops. Uh, you can do loops within loops. It's all fine.
45:20 Um, yeah. So, there are there are ways to definitely make it work a little bit
45:27 harder. Um, but it's going to be a lot harder to hit those. Uh, so yeah, I I
45:34 look forward to you abusing it and um making me these words and having to do something to make it even faster. So uh
45:44 yeah, do your worst, guys. Um, I'll try my Does everybody else hear that joke or
45:52 just me? Yeah, I can't see what you're doing. Oh well.
45:59 Anyway, um so how does this work? Uh we have a
46:04 for loop um and it's iterating on uh this object and that object is the
46:14 site and the site has a property in it called pages which has all the pages information. You can dump it to the
46:22 screen if you want. Um and yeah, it dumps out a whole bunch of stuff.
46:27 Uh but inside pages, uh which is a list of things is on each of those pages
46:36 there there are children. Um so um we're going to iterate through the
46:44 children of all the all the pages and then um for each iteration of that loop uh
46:52 we're assigning it to nav page. If you're familiar with any sort of modern languages,
47:01 um for in of some languages called it,
47:08 um this is a common sort of thing. So we're not doing anything new fangled or
47:14 weird. Uh we're just iterating over an array of things. um we assign them to a
47:21 property and then we're going to call include here. And the interesting thing here is that when we call
47:30 include this this variable will be included into the context
47:37 of rendering that nav item. So we only have to have one nav item over here and it
47:45 uses the variable called uh nav page.
47:53 So every time you generate
48:10 um into this nav page. And then since pages are hierarchical um which is not my favorite
48:19 thing to be honest uh but we're it's one of those places where most of our users are coming from Rapid Weaver from old
48:27 stacks plugin and they're used to having a full hierarchy
48:36 um of pages. Um, I kind of think it would be nice to have just a flat list
48:44 and generate how they're linked and connected and graphed um in a different place, usually called a router.
48:54 Um, that would be nice. That's that's a someday thing. It's definitely I've made I've made it this way so that
49:04 migration will be easier. But someday down the line, I've made it so that we can transition to that more modern future.
49:13 Um, and it would probably be as you create your file or your project, you'll specify, do I
49:20 want flat pages and a router or do I want hierarchical pages and uh yeah, organization like the old way.
49:33 So uh in this in this situation um we're going to iterate over pages. Uh we
49:39 perform this function. Uh functions in the theme language all start with an at sign. Um anything that you put inside there is the arguments to that function.
49:50 Um so we're going to count the number of children of the current page. So you know do we want to make a hierarchal menu or whatever?
50:11 And if there are more children, we're going to make uh a nav item with some other properties
50:20 like drop down. Um, and then we're going to call we're going to perform that same
50:26 sort of for loop again here inside of the children on the next layer of hierarchy. So, it's going to iterate um
50:35 in loops of loops of loops of loops. And I promise you it's still fast.
50:41 Um, anyway, each time we're going to generate that next loop.
50:46 Um, what might be interesting for you is sometimes people want
50:52 um their top level pages listed only and subpages are kind of hidden from the navigation.
51:01 Um, or sometimes you want the top and just the first layer. Um, if that's the
51:08 case, then you could delete this second for loop um in your own override of of this uh nav item. And I think probably
51:17 the most common use case will be to inherit pretty much everything
51:23 else. Override the themes that the things that are in the theme overrides folder and probably override the nav
51:32 item cuz that's probably where most people are going to do their customization. So, I've tried to create a fairly complex nav item just to give
51:41 people a demonstration of what we can do. Um, but feel free to simplify it.
51:48 Um, make it more complex if you want.
51:53 Um, yeah, or do anything. It's really up to you.
51:58 Or if this is good enough and you just want to style it with CSS, which a lot of themes did in Rapid Weaver,
52:08 um then you just inherit the the base theme and you get this for free. Um it's really that
52:15 easy. All right, so uh I only have uh 18 minutes left.
52:25 Um, and we haven't even begun to look at Reason yet. So, this is the problem with uh trying to do code on the fly
52:35 is this stuff takes time. Um, so we'll look at we'll do what we can. Um, if you guys want to stick around for another half an hour or so, I I can keep going.
52:45 Um, I don't want to go too long because I know there's some people in Europe, they would like to go to bed now. Um,
52:52 and I understand that completely. So, uh, yeah. Or if you want to bail at at,
53:01 uh, whatever it is, your time at the end of the hour. Um, yeah. Hopefully, Joel, keep going.
53:09 Keep going. Is that what everybody says?
53:11 All right. If if they fall asleep, we always got the replay. Okay. Um, I'm going to put the chat over here just so I can have a peek.
53:22 Um, if you would like me to slow down, um, or speed up or whatever, um, let let me know. Um,
53:32 but I will try to keep going. Um, and I promise it'll be a lot more detailed in the video. Um, we'll actually do the
53:40 typing on the fly. That takes a little practice though.
53:45 I coding uh live is it's not my favorite task in the world. I don't know how the
53:52 live streamers do it. All right. Um so I'm going to Yeah, I'll leave this window open. Um
54:11 Um, it's uh, yeah, in my themes folder. You can see I have several
54:18 versions here that I've been playing with in that video. Um, this one's probably the most stable and simple. Um,
54:26 I've eliminated some of the things that are more likely to cause crashes. Um, so let's have a peek.
54:36 So, we'll load this one up and I'll full screen this one, too. All right. So, can we jump over? Yeah. So, now we can switch between uh base and uh Reason.
54:48 So, Reason Pro. All right. You can see there's a lot more files here. And I'm I've left some experimental stuff in there. So, uh yeah, please excuse my mess.
55:08 there, too. Um, anyway, uh, let's see what I did to override and what I did override and what I didn't. Um, so yeah,
55:17 let's see. Did I have a metatag? So, I have a meta tag and I add something like uh I I'm using the language here. So,
55:25 the title of this theme, um, that way if I decide to change it or if I have a pro version of it, then it will automatically stick the right thing in
55:33 there. Um, it's pulling that title, the theme title from the P list.
55:41 Um, we have uh a version number. So, this is the bundle version number that is available to you in the API as well.
55:51 So you notice that I'm I'm referring to it with the Apple
55:59 uh the Apple Pist name for the bundle version. Short bundle version is the one
56:07 that's like legible. It's not the build number.
56:11 Um but yeah, CF stands for core foundation. So um basically what this
56:19 implies is that a lot of the data that is in in the objects inside of stacks
56:26 you have access to um you can change it uh but um I'm giving access to a lot
56:35 more of the internals. Um it will take some time to document them though. All right.
56:42 Um the CSS is a little bit more interesting.
56:46 Um, first, uh, we're going to go load this CSS blob. Reason uses, um, yeah, this
56:54 big hunk of CSS. I'll show it to you here. Um, no, it's in the assets. So,
57:03 there it's it's minimized. Um, and, uh, I think Joe does have the source to all
57:10 of this. Um, but uh I'm trying to do this conversion as if I'm a user. Um, so
57:18 I'm trying to make it minimal changes and use what's available just in the theme that I I
57:27 bought off the shelf.
57:30 Um, so to import that, um, I look at that.
57:37 Uh, no, don't close that.
57:41 in the theme overrides and I pulled those right from the base theme which I'm inheriting from. Um you'll notice
57:50 that there is no index.html. Um I don't have the the header CSS files. I don't have
57:59 the header JavaScript files. I'm just inheriting that from the base theme because who wants to write all that
58:06 boiler plate? I mean nobody, right? Um, in other theming languages, you would just you would download their demo and
58:15 copy and paste it. But the disadvantage of that is that yeah, I've been doing this long enough that that when we started there
58:23 was no HTML 5 and at some point all the themes had to be updated to HTML 5. Um, and then that means every single theme
58:31 has to do that. If you inherit that from the base theme, then that boilerplate code will
58:40 just update along with stacks. Um, I tried not to do anything
58:47 that would cause it's forward-looking, so I'm really just doing the basic boilerplate
58:55 stuff, trying to be totally agnostic, zero opinion about things.
59:03 Um, so that uh we we can update those those things to keep current with trends
59:10 and how web pages are built. Um, so you don't have to. That's the whole idea. Or
59:16 if you want to release a theme and never think about it again, know that uh it will have longer legs and and last
59:24 longer the more you inherit from the base theme which is going to update along with it. All right. Uh so let's
59:33 have a look at that CSS file. There's that blob of CSS. Um I also take the
59:40 standard uh CSS file um for the theme itself and that comes
59:48 from this file called CSS.css. Um but we're going to CSS.css is going to turn into stacks.css.
59:58 and um that transition we're going to process all the templates in that
60:06 file. So um yeah, everything in all of these
60:13 templates gets boiled down basically to mostly three
60:20 files. The index.html file obviously um this stacks.css CSS that's going to
60:27 be published along with your theme that comes from CSS.css and anything that includes and
60:34 includes and includes and includes um and the same for
60:43 JavaScript. So the idea there is that um there's three sort of top level starting
60:50 places um and then all of the rest of this gets compiled into it. um and output it as you know those three files.
61:02 Um yeah, so uh this last one, yeah, he's loading Bootstrap from a CDN. Um I decided not to change it.
61:12 Um we could totally do that uh through a library or um an asset or however else
61:20 you want to. It's not really kosher anymore to use uh content delivery networks cuz yeah, you're providing
61:29 Google or in this case Bootstrap um with analytics about your whoever is
61:36 using this theme and that's illegal in a lot of countries now.
61:42 Um, so I didn't update it here because again I'm trying not to change what I what I don't have to.
61:51 Um, and then uh what else do we do? Um, we do something similar with uh JavaScript. He's bringing in jQuery.
62:01 Again, I'm just trying to change as little as possible. The right way to do this would be to request jQuery as a
62:09 library from stacks because that way I we don't want to have every stack on the
62:15 page and and the theme um all loading a different version of jQuery. I it's much
62:22 better if stacks manages that. Um, and we have a brand new API for it so that you can uh update to jQuery 3 rather
62:31 seamlessly and still support stacks that beat jQuery 2. Um, but by doing it yourself, you're kind of ensuring that
62:39 there's going to be multiple loads of jQuery on the page and that leads to compatibility problems and just makes
62:46 the load longer um because jQuery is not a small library anymore. All right. And then
62:53 um yeah uh this theme from Nick came
63:07 I guess it at least does like you can click on the menu hamburger icon uh in mobile
63:16 when it's in mobile mode and it drops down menu which is pretty. So, I'm sure that's in here somewhere, but I also see
63:24 like QuickTime plugin. Um, so I guess that's for doing videos. There's a lot of stuff in this theme that I have haven't like dug through it entirely.
63:34 Um, I'm trying basically just to yeah, use it as is. Um, and trying to get it
63:41 into the stacks app with as many as few steps as possible. All right.
63:50 Um, let's have uh one last look. Yeah.
63:54 So, seven minutes uh plus maybe 15 or 20. Um, let's have a look at uh we could go two ways here.
64:10 Um, so I think we should go check out the CSS file because that's kind of interesting.
64:18 Um the file that uh yeah let's see where this file came from.
64:27 Um so here is the original theme.
64:31 Um this look and then I
64:39 will come on show package contents. So this is also a theme
64:46 bundle similar to the way stacks works.
64:52 Um and in the rapid weaver API um they have this file called color tags. This
65:08 Um, and in those days, the only setting that you could override of a theme was the
65:16 colors. Um, everything else you had to do like edit your own CSS.
65:23 Uh, and so the file is traditionally called color tags. There you go. Um, but it contains lots more smarts.
65:34 um every time they have a little property that can be set, which they do in the info playlist. I won't go delving
65:42 in there cuz it's it's pretty complex. Um then each of those properties can gets templated here.
65:55 Um and they use a template of percent sign.
66:03 Um and yeah, it's like percent sign to start it and percent sign to end it.
66:09 They have the same on both sides. And then um there are some other things that they can do.
66:18 Um are do they come in here? I don't think so.
66:23 So there's this way of customizing CSS and then even before they did
66:31 this whenever you set up a property you could make that either a checkbox or a
66:38 pop-up menu and whatever you if you checked it or popped it up and chose something that would load a different little CSS file.
66:49 So there was this time I don't know stacks 5ish uh uh rapid weaver 5ish and
66:58 uh when you generated your page if the theme had 50 options it was going to
67:06 load 50 CSS files individually separately and anybody who knows the history of the web knows that that was
67:14 really slow in those days. that was like there was no threading or anything to loading web pages. So they all loaded
67:22 one after the other and it each one waited for the next. Um it took forever.
67:27 Uh and then finally they had a way of consolidating and that's its own nightmare. But
67:34 uh yeah we have these two ways of customizing this color tags file and uh by loading individual uh files. So those
67:44 individual files are here in their assets folder. So you can see there's a lot of options and each one is this tiny
67:53 little uh CSS file. So we can check these out. A lot of them are just one line. So it was doing a whole separate
68:07 They they fixed it a long long years ago. But uh this format internal to the
68:15 their themes still remains that there's all these bajillion CSS files and the only way
68:24 to customize how your CSS templates exist is by just choosing a different
68:32 file. So there's no templating at all in these files. These files are all just flat CSS.
68:39 Um, there's nothing magic at all.
68:41 They're just plain CSS files. But, uh, for as quirky as that is, that means
68:50 that we can just load them. So, um, where is my code? This is the base
68:59 theme. This is our theme. So, what I did to incorporate this stuff was I brought
69:06 over that CSS and I put it in my templates folder. These aren't actually templates. And if you did this inside
69:15 the STAX API, it would slow to a crawl cuz that's like a bajillion little files and they for no reason because they're not even being template processed.
69:26 They're just flat files full of um flat static CSS. Uh but the stacks theming
69:37 API doesn't care. Um it will load those into memory and create a flat unit and actually incorporate it up the chain so
69:45 that um whatever file happens to include these they'll just be incorporated with
69:52 that in object in memory. So, uh, feel free to put in lots of static files
69:59 inside the templates folder. There's almost no reason to have like a separate assets folder anymore. Um,
70:08 but again, I'm trying to keep things as the same as possible. Um, and provide as much flexibility so that you can import
70:16 things from a Bootstrap theme or a Jackal theme or wherever you're coming from.
70:21 Um, so those all exist as CSS and they don't have that bit of front end that
70:28 tells it like what the ID of this file is. So the ID just gets inherited from
70:35 the file name. So it just takes the root of the file name and says that's the name of this that's the ID of this
70:44 thing. And you can have folders. uh you don't need to refer to the folders when you're loading or including things. Um
70:52 so let's go see how I use that stuff. Um so I brought in that
71:01 uh I've already forgotten what it's called. Color tags file and no then I load it into a file called conditionals.
71:12 Um and Here it is. So, this is that color tags file with a lot of edits.
71:22 Um, so the first thing to notice is that I'm not using the standard
71:30 um template notation in this file. I'm using percent sign percent sign. And
71:37 that's to keep things as much like the color text file as possible. Um, I just did a find and replace on their 1% sign
71:46 and made a two. Uh, and then I added this to the configuration section of of this
71:54 template. And I say tag begin, it's percent sign, percent sign, tag end, percent sign, percent sign. So the
72:02 stacks API is flexible enough that on one template file you can have one type
72:09 of of uh begin end tag and on another file you
72:16 can have a different one. Um and if you want to use a stack one that that's fine. Um but for converting this
72:25 file because um their begin tag and their end tag are basically the same.
72:36 Um it's really hard to like do a global find and replace that will find just the
72:42 begin tags or just the end tags. So uh instead I just yeah said percent sign
72:51 percent sign which is unique enough that stacks can work with that. Um and so I made the begin tag and the end tag the same. Stacks can do that or have them be
73:01 different. I like the look when they're different when it's more like mustache or handlebars or in my case I wanted it
73:09 to be unique from handlebars because a lot of other theming APIs use that.
73:15 Um, and for this one, I wanted it to be like the the Rapid Weaver theming API, so I use percent sense. It's all fine.
73:26 It's all good. Doesn't change the performance or the behavior. There are some things it has to be unique enough
73:34 and not impact the other characters. So, pick something weird. Um, that's all.
73:42 Uh and then um so in the color tags file of of Rapid
73:50 Weaver, let's go. This one color
74:08 So, in the color tags file, um it starts off right here with site
74:15 background. And in the CSS file, um I'm
74:24 jumping right into uh this other sort of I added this
74:31 blob. So, I'm this blob isn't reusing, it's adding. And the reason here is
74:37 because uh stacks has more complex
74:44 data. You can have arrays in stacks. So when you have four colors in a line
74:53 um in in your settings, so like
75:01 no. Is this it here?
75:07 Um, so if we go look at the properties of this guy, some of these items have
75:14 multiple colors in the same line. You'll get those colors back in a single
75:22 object. It's an array and you index the array 0 and two. Um, and the same applies to Oh boy.
75:32 Um, yeah, there's really nothing else here that is showing that off. But, uh, if you're a Stack developer, you know,
75:40 um, you get arrays and it just I don't know if the colors are in the same line,
75:48 you kind of assume that they're associated with each other. So, you give it one variable name just so there's fewer things to deal with.
75:57 Um, Rapid Weaver doesn't have that sort of thing.
76:03 So when I want to reuse their code as much as possible instead of
76:12 um yeah not using those arrays um or putting an array specifically
76:20 here I just create some temporary variables for myself that makes it a little bit easier. It's just yeah nicer
76:28 to type. Um, or I can apply a specific setting to just overwrite that if I don't want to bring that over from from Rapid Weaver.
76:41 Um, so yeah, so for like colors and things, um, current background, content background.
76:50 So here are all the highlighted too many things.
76:57 So content background, content text, content heading. Um, these are all in specific lines. Um, I dreference the the array just like stacks API pretty much.
77:12 Um, yeah, it's the standard way that you do, you know, assignment in any modern language. So variable name, you don't
77:21 have to say variable or anything. It just creates a variable on the fly. Um and then uh yeah I assign it a value.
77:33 Um you'll get the default value in those values just like the stacks API. The properties um properties and controls
77:42 work the same under the hood as the stacks API.
77:47 We just have a new syntax. It's a little bit more flexible. All right. So then down below
77:54 um I mostly just leave it as is. I change some variable names slightly. Um
78:03 uh and when it gets to some other things, I made a few changes. So I'll
78:13 give you one example that's easy to to see.
78:16 Um, if we go back to stacks,
78:21 [Music]
78:23 um, the Rapid Weaver API for themes does not have sliders. So, if you want something to
78:32 change um, and have a thousand Yeah. degrees of of flexibility
78:42 um, like a slider usually does. Uh you can have a slider. Um you can also have
78:49 number controls and buttons and you you know the whole stacks API deal. Um and we're converting from Rapid Weaver which
78:58 only really has a few controls in their theme API or maybe from other APIs like
79:06 Bootstrap and Jackal. There is no UI. You do it
79:13 all in code. Um, and so, uh, you might want to organize things a little bit differently than they were
79:22 in the the first theming API that you're coming from. Um, in this case, the banner height and uh, yeah, a few other things.
79:35 Um, opacities. Um, I made them into a slider cuz why not? Um they in Rapid Weaver, you just got a a pop-up menu and
79:44 you had to select like 200, 400, 600, 800 or whatever um as as the size. But
79:52 here in in stacks, we can uh change uh I thought we were going to change the banner height.
80:02 Um, oh, we're Don't Are we looking? Let's go back here. This one's
80:12 not overwrited or anything. Um, so we can change the banner hopefully. Yeah.
80:18 Hey. And so I what was happening there is I was changing the properties on that site theme, but we were overwriting the
80:26 site theme on that page. So the properties were not changing that.
80:32 Um anyway uh so for for this page we can you know just flexibly uh choose a
80:40 different banner height um or a different um banner image. And yeah it just gives a little
80:49 bit more flexibility but it means that I have to change the code a little bit. So I couldn't just like blanket replace.
80:56 So, in a couple cases, um, you'll
81:07 see I thought there was an if here somewhere that I was looking for. Um,
81:14 maybe I put it somewhere else. I don't remember where it is, frankly. But somewhere I'm
81:20 I'm trading in having the just select one of the files that makes it 200, 400,
81:28 600 and having it be a whole slider. Um, so I I use a slightly different variable. I specify a different sort of
81:35 control and um yeah, I I just use that property instead. Um, not a big deal. And I only
81:44 did it in a couple places where I thought, hey, that would be fun. Uh, if you don't want to do that,
81:51 if you just want to convert, um, yeah, you could do that too as like this is version one and then, you know,
81:59 grow from there. So that makes the conversion a little bit faster. Um, and you could do kind of one to one with the
82:09 the old way. So uh yeah, if you want to just maintain compatibility one to one totally can do
82:17 that. All right. Um I do call at the end of this file I think one more include.
82:24 So uh every time you call an include it's just packing more onto that file.
82:28 Um it's okay. Uh you inherit any of the variables that are defined in this file also go into that file. Um, so any of
82:37 those variables I defined up up at top, I can use them in any include I do here as well. So, uh, we'll look at that
82:44 conditionals file. And so this is where, uh, that whole big list of CSS files comes in.
82:54 Um, Rapid Weaver sort of has a built-in way that like every time you define a property and it has three values, you
83:01 get a popup no matter what. and you have to define those three values as specifically named
83:09 files. Um, that's not the way stacks does it. Um, but I wanted to make it easy to pull in that with no changes.
83:20 So, this is what we do. Um, here are all those different includes. So where they
83:27 do the colors and where you set uh oh these are the background images
83:38 in rapid weaver there's a popup and you can choose just color denim hex linen
83:45 paper wood and you get a different background image um in stacks uh
83:53 we get one variable I heard something and you give it a value based on your popup or you could have them type it in
84:02 something like that too. Whatever you want to do. But um rather than like me typing out like
84:12 converting by hand each of those includes to do the right thing. I just
84:18 include the files that are already there in those bajillion that uh
84:26 I brought in from the other theme. So, here they are.
84:30 Um, and they they only have like one line, you know. Um, I did have to change
84:36 where the path is cuz where the the publishing structure of a STAX website
84:44 is slightly different than a Rapid Weaver one, tad more modern, I think.
84:50 Um, but still very compatible. Um, Russian system. Anyway, here are those files.
84:57 So, depending on the value of my popup, I just want to pull in a different one.
85:05 So, uh in this conditional files, you can see depending on the value of background image, background image color, include the color file,
85:14 background image denim, just include the denim file. And so, this basically gives the exact same behavior
85:21 that Rapid Weaver has. this and you know these lines are just copy and paste. Um the includes are all the
85:30 same. Uh we're just having the values from our popup. Um, it
85:38 [Music]
85:39 it's a way to handle inclusion of another file
85:47 um, merging it into this CSS uh, file that's going to be created from
85:55 these templates and yeah, piggybacking on the files that
86:02 already exist so I don't have to change all those other CSS files, like bunch them up into another file or something.
86:10 Um, I don't have to rewrite any code. I just copy and paste an if line, put in the values, and change the names of the
86:19 files, and we're done. Um, so I did that for uh all of the include things.
86:27 Um, yeah, some of the things are a little bit different.
86:31 Um I I just wanted to provide a few more examples. So the opacity
86:38 um again there's another opacity. What's it called? Header up too. I guess that's for opacity. So each
86:47 of these it has a little bit more code in here and I didn't want to touch it.
86:53 Um yeah, depending on like where a blur is being set or or or hidden in some of
87:01 these um yeah, some of them have uh a simple ping image that they're like
87:08 stretching to create a gradient or something and that's in a yeah this kind of CSS
87:16 that SAS can do this kind of stuff for you and you don't actually have to create these but Um yeah, this is this
87:24 is a weird sort of thing that people used to do before uh SVGs got popular.
87:29 Um SVGs are yeah better, more flexible, but this is a way to include a simple
87:36 little image like you want to use on a a well they for here it's just
87:42 stretching it to make a a gradient. Um but people do that for like adding little bullet points or emojis or things like that.
87:51 Anyway, um there's all these files here.
87:55 I didn't want to create a different one, but I did want to provide a slider to the user. Um so, instead of
88:04 uh I'm lost here. I want conditionals. Yeah. So instead of
88:11 um having that popup, which I still think is ugly, and I don't want to change the files,
88:20 um I'm kind of contriving an example, but um basically I load a different one depending on the value of the slider.
88:28 And I wrote a little bit of code here, but code, anybody that's familiar with basically any programming language knows
88:37 how this works. we have an if um you have a some math in here you know less than 20 greater than or less than or
88:46 equal to 40 um and then if the if the if condition evaluates to true we load that
88:53 file if it doesn't we don't load it um and so then you know we get
89:07 is navigation. Yeah. Well, I I should have called that nav, but um there you go.
89:14 Uh I think yeah, it got darker and it gets lighter over here. Um it's this nav up here. I don't think it looks very
89:22 good at when it's light, but anyway, maybe you want it more opaque uh for for uh different header
89:31 images. But now we get a slider. it's still only doing that sort of incremental thing. Um, it doesn't have uh a zillion values in between there.
89:42 You you obviously could uh but I just wanted to use what was there and I wanted to provide an example of of how
89:51 to handle a more complex situation. Um, so we're at 619. I've
89:58 talked about how to include uh stuff from CSS. I haven't talked about how to
90:04 convert like the basic body text of of the index.html which is
90:11 another kind of complex thing. I wanted to talk a little bit about um the navigation. So, uh if you're doing this
90:20 from the video or you download an example that I provide later, then um yeah, pay pay special attention to the
90:29 nav. Um, it's a little bit different than the bass nav, but I basically just copied the bassnav files. They're there
90:37 for you to use. Um, I wrote them for you, not for me. Uh, and then I tweaked
90:44 them so that they work with the the CSS that
90:51 that theme is providing and the HTML that Rapid Reaver usually provided for nav. So
91:07 gives you full control uh but also inherit some of the detail
91:14 from uh both the theme CSS and Rapid Weaver's
91:22 HTML. All right, I I I'm going to call it there. Um I I'm happy to answer specific questions. Uh there's so much
91:30 more to talk about. Um there's so much more to this language. Uh it has lots more complex thing. It has lots of
91:38 functions. You can make it render markdown for instance. Um it can do complex math. Anybody who's familiar
91:46 with the the stacks API knows you a math
91:55 Doing something like this would look a lot more cumbersome. It would have a lot of garbage in it.
92:04 And that that garbage can get in the way of understandability and readability when it gets too complex.
92:12 In the theme API, uh you get a lot of that for free. So, um, you can do real math.
92:22 Um, really complex things, make complex comparisons. You can use boolean operators if you're into
92:29 that. Um, it knows how to do stuff like modulo and yeah, more complex stuff. Um,
92:38 even in the stacks API, we mostly did integer
92:45 math only. I I added floatingoint math, but it's quirky. Um, here you get the
92:52 real deal. It's And you don't have to add lots more brackets and things. Um, it works like most other programming
93:08 color math, there's full color math, uh which is a thing that Rapid Weaver
93:15 did as well and so does STAX API, but it's a little bit nicer to work with here cuz the
93:23 the yeah, the syntax is not so cumbersome. Um but you can do things like add and multiply. You can multiply
93:32 a color by a number and it'll just make it darker um or brighter.
93:38 Um yeah, you can divide a color by a number and uh make it make it darker. So um there there's
93:47 just a zillion other little details to the language that are nice. Um and I can talk more about those in a video, but
93:56 there will also be documentation of course.
93:58 Um I know that some people like Japan to have an example and tinker
94:05 around. I I'm that sort of learner. Um some people are very visual and really like the videos. We call them Gen Z.
94:17 Um you know, my kids can't learn anything if it's not on a YouTube video.
94:21 Uh and then, you know, there's there's uh old schoolers that like actual real documentation and just like to read it.
94:30 So, I understand that there's all three of those things. None of them is the right way. Maybe you need a couple ways to learn.
94:38 It's all good and we'll have it all filled out eventually, but we're kind of still tweaking things a little bit. Um,
94:48 yeah, I the theming API is mostly locked in stone now. But, um, some of the details of how it publishes things to
94:55 the to the site is a little bit new.
95:03 I would like the AI chip in my brain learning. Yes.
95:10 Just an idea. I I know yesterday you didn't go too much of the UI stuff for themes. So maybe since we're talking about themes, you can review some of the theme how the themes work inside the app. I mean, I I started out with that.
95:23 Maybe you weren't paying attention.
95:26 Oh, no. I mean like how how you can select the theme and you know like in the site settings how you can change it and go through that. Oh really? Okay. My
95:36 bad. It must have been when I had to go take watch the video again Joe. No I'll watch the replay. My bad. I I basically
95:43 the the first 20 minutes I spent tinkering with the theme in stacks. Okay
95:50 cool. Um sorry. My bad. I I mean I know color wrong. You spelled color wrong throughout the whole theme though. What
95:58 the hell? I didn't spell I didn't change any of the spelling. That is somebody else.
96:04 Um I however totally agree with that spelling. Um my devices all use that spelling. I don't know how to use colors.
96:14 Yeah, some of us uh were raised by British people.
96:20 So my for for those who don't know my family is uh comes from uh yeah Nimo um which is on the
96:31 very very western edge of British Columbia in Canada and um yeah
96:38 I I still have trouble using American words for so many things and
96:44 um but fortunately I never had my my grandmother
96:51 sounds English as opposed to she doesn't say aboot or anything like that. She doesn't say a but all her relatives do.
97:07 they have they have that accent. Um, fortunately I never I never inherited that one,
97:13 but I I I have a car and the car has uh Yeah. Yeah. has to be the coolest thing
97:21 that I've We get wings and a boot and yeah, car parts. I I still I have to
97:30 stop and like struggle with the name like, "Oh, it's a fender. It doesn't make sense. What the hell is a fender?
97:40 Like fending. Fencing. I don't know. I like when Canadians say roof
97:48 sounds like Oh, it was great when um Miller was doing her thing.
97:54 She Oh, she pronounced Claude like the French way. Yes. I I I I I noticed that
98:03 as well. I I chose not to correct it or at least I mean Yeah. I was, oh, maybe that's her, you know, the way they say in Canada. I don't know. I Eastern Canada. Um, yeah, Eastern Canada. Yeah.
98:15 Um, yeah, it's Claude for everyone I've heard is Clawude. Clude. Um, so I,
98:24 yeah, I'm very much like a British Canadian, but um, my language of choice that I studied
98:33 in high school and college was French, so Chlo makes sense to me, too. All right. Any uh, questions that I can
98:40 answer before? Well, uh, I had a couple questions during the thing that I that I answered there. There were two people that asked when are we going to get the
98:48 beta? I know yesterday you said by Sunday afternoon, check out the goodie bag. And uh yeah, I'll make sure I I'll send uh the final goodie bag URL. I
98:57 actually had a couple other developers send me some stuff last night, so I'll be updating the goodie bag with some of the stuff that they're giving as well.
99:03 Um so yeah. Yeah, download soon. Um if you have the link to the old beta 10 or
99:11 whatever, you can just open that once a day and uh check for updates. Yeah.
99:18 Um, I think did I have the manual check for updates then or do you just have to rely
99:25 on it? I I don't remember. I don't remember now.
99:30 Um, yeah. Uh, just keep checking for updates. I'll make sure that Yeah, there's a there's a new location for it
99:38 so that I Can we review layouts a little bit? I talked basically. Are you serious?
99:45 No, I did. I did actually. No. No. I was just joking because you know our our little banter. Yeah. We're we're not
99:52 talking about layouts. Yeah. I keep telling he keeps asking me is this part of layouts? Can we do this in layouts?
99:59 And I'm like uh themes first, then we'll talk about layouts. Um that that way I
100:06 can still keep working on the details of layouts while Joe is uh helping me fix themes.
100:14 Um, but yeah, I did cuz like one of these pages Yes. Yes, you did. I was
100:21 just I just enjoy busting balls. That's all. Or sorry. Okay, we're talking British taking a piss. Yeah. Taking a piss. Yeah.
100:31 Well, I I then, you know, aside from having British
100:38 Canadian being one of my primary parents, um, six-year-old Emma came home. I worked either at a British
100:46 company, I went immediately to a British company out of college and then I worked with that same group of people
100:54 until I went solo as a software developer
101:05 stories but this time not quite 20 years but after I was the only American in groups.
101:16 Mostly cuz I was the only one who could keep up with their beer drinking cuz oh man, my liver did not. I needed a
101:24 replacement after working with them for I've never been as drunk as I was my first week in London.
101:31 The the guys at Goldman Sachs took me out and man, I I've never do that again.
101:39 I could not keep up with them at all.
101:42 They invited our whole team, two uh Scottish people, one who worked with me and one who worked in another group who
101:48 were married. Um, right when they're fresh off the boat, uh, it was January and Scottish people like to celebrate
101:56 Burns night and it involves drinking uh, whiskey, reading Robert Burns poetry
102:03 and uh, eating haggus and scotch eggs and stuff. And um number one, I was the only American
102:11 who would eat haggus uh cuz I don't know, I was raised by British person who eat all sorts of things. And then number
102:19 two, um I both brought whiskey cuz I knew the tradition and um the only
102:27 American to do that. And they proceeded to try to drink me under the table and failed. So Oh, really? Wow. So I was
102:36 invited to drinking after that and the Americans were I don't even remember walking home night
102:44 that that night and I don't remember how I got home.
102:50 Yeah. Um couple service announcement just for everybody. Uh while while I was Isaiah was giving his talk, I was actually helping some very panicking
102:59 customers. Um uh apparently an update to Rappy Bird got shipped yesterday 942. uh do not update to that. Um it has a
103:08 pretty nasty bug that changes the behavior of something that's been around for like 15 years. Um and it breaks a
103:15 lot. Um what's the behavior? So uh in the in the project um your website URL,
103:24 Rapaver always adds a slash at the end of the URL. Okay.
103:30 And um they've decided uh to to remove the slash even though it's there. Um so
103:38 on the publish page the slash is all gone which if uh a product a stack references your URL for something um it
103:47 the slash isn't there and breaks the URL on your web page. Um so I had a lot of people freaking out wondering what stack
103:55 I broke. Uh it wasn't. Um, so yeah, uh, be aware of rapever 942. Um, stay on 941. They reverted back
104:03 to 941 and everything is golden for them. So just a public service announcement for everybody that's here. I'll expect an email from Dan Bloom.
104:12 [Laughter]
104:17 All right. Um, can I also encrypt
104:25 a note about encryption? Um, don't spend too much time on the current encryption.
104:34 It probably won't make the first cut cuz I'm trying to keep it.
104:39 Yeah, just do the things that I have to to get out the door. And the old encryption even though it's has issues uh
104:48 like some other people can decrypt it, but I'd rather not plan. Yeah. Uh, I will be adding a
104:57 new encryption engine. Um, and I'll use the built-in Apple
105:04 libraries instead. So, we won't rely on OpenSSL either. So, that that means yeah, better threading and more modern uh encryption standards.
105:18 So, we can have stronger encryption and probably work better on the M1 chip, too. Nice. Sweet. Before I forget,
105:27 what's that? Oh, sorry. Go ahead. The big deal is just so
105:34 that we can start over again. Clean slate so you can build things that other
105:44 people can't decrypt. Cuz the problem with building a plugin is that uh the
105:50 app can see all of my code inside. I mean, it's all compiled, but something like encryption engine, they can just
105:58 call that function themselves and decrypt things that are mine. Um, which
106:05 is a drag, you know, but it Yeah, that's enough of that. Yep. Uh,
106:15 change of subject really quick. So, uh, Foundation 6 theme, uh, once you have the new beta that Isaiah is going to
106:22 ship soon, um, in the goodie bag, I have a beta version of the Foundation 6 theme, which has site styles integrated
106:30 into the theme, so you don't need to um, you know, use that. So, that'll be all really cool. So, just let you know that's already done and built. And the
106:39 URL, the download URL to that theme is in the goodie bag.
106:43 Um yeah, the
106:49 often my goal is yeah to get like the three big hard
106:57 uh frameworks working um and uh and then
107:03 be able to convert from a a few basic platforms that I know. Um, while we're talking about the three big frameworks,
107:10 obviously we don't have Foundry and there's I know there's some Foundry users that are worried how am I going to use that. I have tested the base theme
107:18 alone um in currently works in Foundry uh with the Foundry stacks because the um I mean the stacks do a majority of
107:26 the work in terms of building the the CSS. Um the the current Foundry theme for Rapid Weaver was extremely bare
107:34 bones. Um, there was one feature that relied on one div that was added to the theme. Um, that is a super simple
107:43 oneliner in an HTML stack if you if you need that particular feature. I forget exactly what that feature was. It was in one stack needed this div to be in the
107:51 body um with a specific ID. Um, so super easy to augment that um but 99.9% of
107:59 Foundry will work just fine with the base theme. So definitely part of my testing strategy is always
108:09 yeah to try to get onetoone compatibility with every released stack.
108:15 Um we don't hit it perfectly every time.
108:20 Sometimes really old janky stuff that hasn't been updated in 10 years.
108:26 That happens. We we try not to make those uh break but um every now and again we do break one but we try to give
108:34 uh adequate time to stack developers
108:41 to update things that if they want to um but we try not to make them do that. And
108:48 one of the things that uh that I do specifically for Foundation and Foundry is try to make those work
108:56 almost out of the box. So um oftentimes there's there's tweaks, but I
109:02 give people some some time. Um if we look more closely at and Joe maybe can
109:10 help me with this with uh what is required to make Foundry work just like the old days you know maybe
109:17 not as a whole theme I don't want to like I don't want to republish stuff that Adam doesn't want me to publish but um
109:25 we can at least make the stuff that people already own functional um Yep. if we need to add an extra checkbox somewhere.
109:34 Yep. We I think I think we should be good. Like I said, I did a lot quite a bit of testing and it seems like the base theme will do again 99.9% and if
109:42 you need that.1% it's just a single div that just needs to be added. So it could just be a HTML stack, just an empty div that needs to be in the body and we're good to go.
109:54 Right. So when I do release uh the the beta version here, um I would love to hear back from people. Um,
110:03 we do have uh a new bug reporter. Um, yeah, through that or through chat or
110:11 through wherever. Um, send me stuff. I may not respond. Uh, I'm often way over busy. Uh, but,
110:22 um, I'm definitely reading everything. I try to put in a bug tracker item for anything that uh people send to me
110:31 through another channel. Um but yeah, I am I just wanted I want to let people know um I'm often just too
110:40 busy to do one-on-one. I had to put off another old school stack developer that I get along with very well. I I just
110:48 told him today like I have I'm doing a talk in like an hour, dude. You know it.
110:56 And uh I need to produce a new version.
110:59 And um I owe Dan a version of of the plugin that fixes this bug from like 3
111:06 weeks ago. Uh and uh I need to documentation for everything I just showed you and the video. And oh yeah, I have to actually write stacks.
111:18 So all of that uh unfortunately sometimes being one-on-one interacting
111:25 with people and chatting live is just it occupies a huge amount of time and um I
111:32 just I try to let people know, hey, I try a couple times a day to interact with
111:40 people who are sending me direct messages. Um, but other than that, I'm probably going to be just agency.
111:51 Talk to Joe. He likes to talk. Yeah.
111:53 Like like I I volunteered yesterday, you know, just go ahead and bother me. I'd rather you bother me. Let him focus on
112:14 I was looking at stacks per beta sounds.
112:15 Okay, cool. Spending themes. Thanks, Isaiah. Stacks pro beta sounds amazing.
112:22 Um, can I also encrypt stacks? Yes. Okay. Yeah, you answer. All right. Good.
112:29 Sweet. Cool, dude. Thank you very much.
112:31 Thanks for sticking around for like two hours for me, guys. I appreciate it.
112:36 Whoever is still here, uh, we still got 28 people around there. Oh, man. All right. Well, thank everybody. I really appreciate it. Thanks for listening.
112:45 Sweet. Thank you, Isaiah. Take care, bud. Bye.
112:54 [Music]